CODEWITHSUNDEEP
phpjavascriptjquery
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

How do i swap out images in jquery

I have my site that the users can swap out three products and there are images for each product so rather then doing an ajax call every time the user clicks the button, I wanted to just have the image urls in the html with display none to grab when needed.. so for example, here is my html

    <img src="<?php print $product[$selected_product]['product_image']; ?>" width="auto" height="199" alt="" />
</div>
<p style="display:none;" class="image_<?php print $product["standard"]['product_id']; ?>"><?php echo $product["standard"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["professional"]['product_id']; ?>"><?php echo $product["professional"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["premium"]['product_id']; ?>"><?php echo $product["premium"]['product_image']; ?></p>

As you can see the one that is displaying is the one selected but if the user selects one of the other images i need to change the src of the image tag...here is my jquery

var image = $(this).parents(".item").find(".image_" + this_id).text();
image = $.trim(image);
console.log(image)
$(this).parents(".item").find(".item-image img").attr("src", image);

but the problem is that the console.log prints out the image url correctly but it sometimes when i click the image doesnt change and i get this error

Image corrupt or truncated: http://posnation.com/shop_possystems/image/data/1B.png

Upvotes: 0

Views: 364

Answers (1)

FishBasketGordo
FishBasketGordo

Reputation: 23142

A clearer way to do this would be to render three <img> tags and set their CSS so that they are on top of each other. Then use the jQuery show/hide functions to show the appropriate one.

Upvotes: 1

Related Questions