supersized how to use url link?

Question

am using supersized from here.

How do i use the url of a slide?

I have used title and know i need a div slidecaption as id, but what about a slide url:

    jQuery(function ($) {
    $.supersized({
        // Functionality
        slideshow: 1,           // Slideshow on/off
        autoplay: 1,            // Slideshow starts playing automatically
        start_slide: 1,         // Start slide (0 is random)
        stop_loop: 0,           // Pauses slideshow on last slide
        random: 0,          // Randomize slide order (Ignores start slide)
        slide_interval: 5000,       // 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: 1000,     // Speed of transition
        new_window: 1,          // Image links open in new window/tab
        pause_hover: 1,         // Pause slideshow on hover
        keyboard_nav: 1,            // Keyboard navigation on/off
        performance: 1,         // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
        image_protect: 1,           // Disables image dragging and right click with Javascript
        // Size & Position                         
        min_width: 0,           // Min width allowed (in pixels)
        min_height: 0,          // Min height allowed (in pixels)
        vertical_center: 1,         // Vertically center background
        horizontal_center: 1,           // Horizontally center background
        fit_always: 0,          // Image will never exceed browser width or height (Ignores min. dimensions)
        fit_portrait: 1,            // Portrait images will not exceed browser height
        fit_landscape: 0,           // Landscape images will not exceed browser width
        // Components                           
        slide_links: 'blank',   // Individual links for each slide (Options: false, 'num', 'name', 'blank')
        thumb_links: 0,         // Individual thumb links for each slide
        thumbnail_navigation: 0,    // Thumbnail navigation
        slides: [          
        { image: '../gfx/slideOne.jpg', url: 'http://www.official.com/' },
        { image: '../gfx/slideTwo.jpg', url: 'http://www.1.com/gb/home/' },
        { image: '../gfx/slideThree.jpg', url: 'http://www.8.com/' },
        { image: '../gfx/slideFour.jpg', url: 'http://www.8.com/home' },
        { image: '../gfx/slideFive.jpg', url: 'http://www.8.com/' },
        { image: '../gfx/slideSix.jpg', url: 'http://4.tumblr.com/' }
        ],
        // Theme Options              
        progress_bar: 0,
        mouse_scrub: 0
    });
});

I have a image on the front which i want the url to change with the slide changing

This is the href i want to change:

<a class="findLink" target="_blank" href="/">
                        <img src="slideFindOut.png" alt="find out more"/></a>

Every time the image changes i want that href above link to change

Answer 1

Try this way

$(document).ready(function(){
    var slideurl = api.getField('url');
    alert(slideurl);
});

From the docs

api.getField( field )

Returns the value of the specified field for the slide (from the slide array)

So in your case it should be like this

    $(document).ready(function(){
        var slideurl = api.getField('url');
        $("a.findLink").attr("href", slideurl);

    });