Превратите два динамических изображения в ссылку с помощью Jquery

Question

Я использую плагин WordPress под названием Shopp Sell Products, и один из аспектов Shopp - это рендеринг изображений.Я пытаюсь в основном сказать shopp вернуть два изображения одного и того же продукта: одно миниатюру и одно большое изображение.Оба эти изображения возвращаются на страницу прямо рядом друг с другом.Perfect!

Мне нужно использовать jquery, чтобы скрыть большое изображение, и установить миниатюру в качестве ссылки на большое изображение (стиль лайтбокса).Смотрите пример ниже!

Причина, по которой я не могу сделать это в чистом HTML и CSS, заключается в том, что изображения генерируются динамически, а у shopp нет функции «ссылка на изображение».Итак, еще раз, мне нужно взять эти два изображения и установить большое изображение как ссылку на маленькое изображение, используя разметку ниже (выше) изображения, используя jquery.

Есть идеи, как мне это сделать?

Answer 1

Вам нужен какой-то способ определить, какое изображение находится в jQuery.(Класс будет лучшим способом)

Тогда вы можете использовать этот код - http://jsfiddle.net/kJEGd/2/

Answer 2

Нет необходимости выполнять дополнительное кодирование, пытаясь выполнить это при использовании Shopp.

Во-первых, любая ссылка (с изображением), для которой установлен class = "shopp-zoom", при нажатии автоматически открывает лайтбокс с исходным изображением.

Далее, чтобы использовать изображения меньшего размера (миниатюры), вы можете легко указать их в настройках WP-admin -> Shopp и добавить setting="name-of-my-setting" к параметрам в файле шаблона, где находится ссылка, скорее всего, collection.php или product .php, но cart.php тоже будет работать.