Как сделать страницу миниатюр со ссылками на изображения в королевской галерее слайдеров

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

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

Я знаю, что существует использование API с currSlide и т. д. Может ли это быть применено к тому же принципу этой идеи, чтобы каждое изображение в списке эскизов могло иметь идентификатор/номер, и при нажатии на него оно соответствовало бы currSlide в галерея и показывает, что при открытии?

slider.currSlideId // current slide index
slider.currSlide // current slide object

Будет ли он также использовать это из API:

slider.ev.on('rsSlideClick', function() {
    // triggers when user clicks on slide
    // doesn't trigger after click and drag
});

Любые мысли были бы замечательны по этому поводу.

Спасибо, Марк


javascript slider jquery gallery
person M dunbavan    schedule 13.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это должно быть довольно просто. Используя RoyalSlider, вы можете сделать что-то вроде следующего (когда пользователь щелкает ссылку эскиза, и он переходит к нужному слайду в слайд-шоу):

// Get slider instance from royalSlider data
var slider = $(".royalSlider").data('royalSlider');

// Activate the thumbnail links   
$("ul#thumbnails a.fullScreenGallery").click(function(e) {
    e.preventDefault();
    var slideIndex = $("ul#thumbnails a.fullScreenGallery").index(this);
    slider.goTo(slideIndex);
});
person shandy    schedule 27.09.2013