Turn two dynamic images into a link with Jquery

Question

I am using a wordpress plugin called shopp sell products, and one aspect of shopp is it's image rendering. I am trying to basically tell shopp to return two images of the same product: one thumbnail and one large image. Both of those images are returned to the page right next to each other. Perfect!

What i need to do is to use jquery to hide the large image, and to set the thumbnail as a link to the large image (lightbox style). See example below!!

The reason I cant do this in pure HTML and css is because the images are dynamically generated, and shopp has no "image-link" functionality. SO again, I need to take these two images, and set the large image as a link of the small image using the markup below the (above) image using jquery.

Any idea how I can accomplish this?

Answer 1

You need some way to determine which image is which in the jQuery. (A class would be the best way)

Then you can use this code - http://jsfiddle.net/kJEGd/2/

Answer 2

There is no need to do any additional coding trying to accomplish this when using Shopp.

First, any (image)link that has class = "shopp-zoom" set will automatically open a lightbox with the original image when clicked.

Next, to use smaller images (thumbnails) you can easily specify those in your WP-admin -> Shopp settings and add setting="name-of-my-setting" to the options in the template file where the link is, most likely collection.php or product.php but cart.php would work too.