How do I make a link to an image in a slideshow?

For my portfolio website I made a slideshow with cycle2 carousel with some big images on my work page.

All images are also displayed on the homepage really small.

I would like to make the smaller images on the homepage function as links to the bigger images within the slideshow.

I tried to give all images in the slideshow a different id to link to. But the link always goes to the first image of the slideshow and not the image with the id. Can anyone maybe give me some advice on this?

Thank you, Noa

Solution

You'll need to utilize the cycle2 api to transition the slideshow to the appropriate slide when the user clicks the link. Here's the relative snippet from the api documents:

// goto 3rd slide
$('.cycle-slideshow').cycle('goto', 2);

You just have to use the index numbers of the slide in question. You would run this code then have the link point to the anchor of the slideshow.

Rest of the documentation on the api can be found here: http://jquery.malsup.com/cycle2/api/

UPDATE

$(document).ready( function() {
    var field = 'slide';
    var url = window.location.href;
    var slideNumber = url.indexOf('?slide');
    if ( slideNumber === -1 ) {
        slideNumber = url.indexOf('&slide');
    }
    if ( slideNumber >= 0 ) {
        $('.cycle-slideshow').cycle('goto', url[slideNumber + 1]);
    }
});