Изменение изображения Jssor, связанное с выпадающим меню

Question

Я использую Jssor Slider для отображения изображений продуктов на одном из моих сайтов. Я использую слайдер с навигацией по миниатюрам, и для большинства продуктов стандартная реализация отлично работает как стандартная. Однако существует ряд продуктов, для которых различные варианты выбираются из раскрывающегося списка (каждый из которых имеет свое собственное конкретное изображение). Чтобы загрузить все миниатюры, я просто просматриваю таблицу базы данных, и я делаю то же самое, чтобы заполнить раскрывающийся список.

Что бы я хотел сделать, это выбрать конкретную раскрывающуюся опцию, чтобы вызвать то же действие, что и щелчок по соответствующему миниатюре и загрузить изображение полного размера.

Прежде чем я добавил ползунок jssor на странице продукта я просто использовал JavaScript для получения выбранного индекса и изменить основной источник изображения таким образом:

http://www.scotcrest.com/singleproduct.php?action=More+Details&productId=18&productName=Clan%20Cloot%20Tea%20Towels

(Это текущая версия - без jssor)

, но я не очень разбираюсь в jquery (обычно я работаю с php), поэтому я не понимаю, как работать с функциями jssor.

Я попытался сделать это, посмотрев на код, который запускается при нажатии на миниатюру и пытается заставить его сменить окно выбора, но на самом деле ничего не получилось.

Это новая версия я работаю, но не может получить раскрывающийся, чтобы вызвать изменение изображения:

http://www.scotcrest.com/singleproduct2.php?action=More+Details&productId=18&productName=Clan%20Cloot%20Tea%20Towels

Может кто-нибудь помочь мне точку в правильном направлении, где начать?

Благодаря

Answer 1

Добавление кода открытия Shadowbox к вашей changeimage функции должны работать:

function changeimage(x){ 
    var s = x.options[x.selectedIndex]; 
    document.getElementById("mainproductpic").src = s.getAttribute("data-value1"); 
    document.getElementById('ThumbImageOne').href = s.getAttribute("data-value1"); 
    mynum = s.getAttribute("data-value2"); 
    Shadowbox.open(document.getElementById('ThumbImageOne')); 
    Shadowbox.change(mynum); 
}