How to make a thumbnail page that links to images in the royal slider gallery

Question

I am trying to create a page that holds a set of thumbnails containing images loaded in via a cms. These thumbnails have a clickable event that once clicked will open a page with all the images from that slider loaded into a slideshow of my choice.

Right now I am toying with different ideas but I wondered how easy it would be to link a page of external thumbnails to a template with a royal slider gallery so that when the thumbnail is clicked it goes to the right image in the gallery on that external page?

I know that there is the use of the api with currSlide etc. Could this be applied to the same principle of this idea so each image in the thumbnail list could have an id/number and when that is clicked it corresponds with the currSlide in the gallery and shows that one when opened?

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

Would it also use this from the api:

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

Any thoughts would be great on this.

Thanks, Mark

Answer 1

This should be pretty straightforward. Using RoyalSlider you can do something like the following (where the user clicks a thumbnail link and it goes to the correct slide in the slideshow):

// 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);
});