CODEWITHSUNDEEP
javascriptjquery
doubleplusgood
doubleplusgood

Reputation: 2556

Swap image and show image zoom

I have a website using BigCommerce that has a feature on the product page that displays some thumbnail images. When a user clicks on a thumbnail image, it shows some description for that image and should also swap the main image on the left to the large version of the selected thumbnail.

The script is doing the show/hide part correctly for the description but isn't swapping the main image. I was wondering if anyone might be able to help resolve this? Contacted BigCommerce but they say it's a template specific issue that they can't help with.

On checking web inspector, it says that there is an uncaught type error and that the 'largeimage' attribute for the rel tag is missing. I tried adding this back in, but it didn't have any effect.

Thank you.

Upvotes: 4

Views: 998

Answers (1)

gilly3
gilly3

Reputation: 91497

You have a function showProductThumbImage() that expects two arguments, but you are only passing one, eg:

<a onclick="showProductThumbImage(2)" href="#"><img ... /></a>

The second argument should be a reference to an element... elsewhere you are passing this, so presumably you should do the same here. The function expects the passed element to have a rel attribute containing a JSON string as it's value. There are elements hidden on the page that have a rel attribute that looks correct:

<a href="javascript:void(0);"
    rel='{"gallery": "prodImage", "smallimage": "http://www.kriega.com/product_images/m/322/HY3home__49494_std.jpg", "largeimage": "http://www.kriega.com/product_images/h/328/HY3home__71324_zoom.jpg"}'
><img ... /></a>

You need to get the rel attribute containing JSON as above into the links that call showProductThumbImage(), and pass this as the second parameter:

<a onclick="showProductThumbImage(2, this)" href="#"
    rel='{"gallery": "prodImage", "smallimage": "http://www.kriega.com/product_images/m/322/HY3home__49494_std.jpg", "largeimage": "http://www.kriega.com/product_images/h/328/HY3home__71324_zoom.jpg"}'
><img ... /></a>

Upvotes: 4

Related Questions