Turn two dynamic images into a link with Jquery
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 lar开发者_如何学编程ge 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?
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/
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.
精彩评论