Customize supersized plugin for an image gallery

Question

I have a an issue with a photo gallery.

I need to update a global variable... It seems easy enough but it isn't working... Any idea what is wrong here? Could it be that supersized works onload and can't be updated once page has loaded..?

• my initial global variable is declared at the top of the page
• each thumbnail has a class of full-screen for selection
• my click function grabs the href of the anchor and updates the variable
• the variable is called in the slides image array

Here is my code:

$path = '../images/bg-gallery.jpg'; //set initial image

<div><a class="full-screen" href="../images/gallery-imgs/photo-gallery/01.jpg"><img src="../images/gallery-imgs/photo-gallery/01.jpg" /></a></div>

$('.full-screen').click(function(e){
    e.preventDefault();
    $path = $(this).attr('href');
        return $path;   //update image path variable based on which thumbnail clicked
});

This is where the image path is declared:

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   10000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   700,        // Speed of transition

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [{image : $path}]

            });
        });

Answer 1

Instead of trying to updated a variable I went into the documentation and saw that they had an API to work with (api.goTo($slide);).

• I added a rel="number of slide" to each thumbnail link
• I updated the slides in the supersized function options to coincide with the thumbs
• Wrote a quick function to stop the default action on the link, grab the slide number and place it in the goto api.

Works like a charm! :)

This is my final code:

<div><a class="full-screen" rel="1" href="../images/bg-gallery.jpg"><img src="../images/bg-gallery.jpg" /></a></div>

$('.full-screen').click(function(e){
    e.preventDefault();
    var $slide = $(this).attr('rel');
        api.goTo($slide);
});

slides                  :   [
                                                {image : '../images/bg-gallery.jpg'}, 
                                                {image : '../images/gallery-imgs/photo-gallery/01.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/02.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/03.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/04.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/05.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/06.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/07.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/08.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/09.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/10.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/11.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/12.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/13.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/14.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/15.jpg'},
                                                ]