超大了如何使用url链接?

时间:2013-03-20 09:07:36

标签: jquery supersized

我正在使用here中的超大尺寸。

如何使用幻灯片的网址?

我使用了标题并知道我需要一个div slidecaption作为id,但是幻灯片网址呢:

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

我在前面有一个图像,我希望随着幻灯片的更改而改变网址

这是我要改变的href:

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

每次图像更改时,我都希望上面的href链接更改

1 个答案:

答案 0 :(得分:0)

试试这种方式

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

来自docs

  

api.getField(field)

     

返回幻灯片的指定字段的值(来自幻灯片   阵列)

所以在你的情况下它应该是这样的

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

    });