无法用动态ajax数据重建超大幻灯片

Question

我正在开发一个使用全屏幕背景库超大号的网站，该网站开始显示页面加载上的默认图库。它工作得很完美。

问题是当我试图：

• 移除超大型止回阀
• 用ajax加载的其他数据重新加载一个新的运行状态 var options ={ progress_bar : 1，随机: 1，slide_interval : 3000，//转换之间的长度: 1，// 0-无，1-淡出，2-滑动顶部，3-滑块右端，4-滑动底部，5-幻灯片左，6-旋转右，7-旋转木马离开transition_speed : 700，//转换//组件的速度slide_links：“空白”，//每个幻灯片的单个链接(选项: false，'number'，'name'，(“空白”)幻灯片: //幻灯片{ 'http://spiaggiaolivi.webjuice.it/foto/galleria/sfondi/livedinnerparty_-07_1280x853.jpg'，标题：‘图像信用: Maria Kazvan'}，{图像：'http://spiaggiaolivi.webjuice.it/foto/galleria/sfondi/livedinnerparty_-08_1280x853.jpg'，标题：‘图像信用: Maria’}}$(函数(){$.supersized(选项)；})；

“动态”状态是由

// click
$('#gallery a.show').live('click', function(event){
    $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');

    var options3 = {
                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
                slides                  :   [           // Slideshow Images
                                                {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/galleria-3/bggal4.jpg', title : 'Image Credit: Maria Kazvan'},
                                                {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/galleria-3/bggal5.jpg', title : 'Image Credit: Maria Kazvan'},
                                                {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/galleria-3/bggal6.jpg', title : 'Image Credit: Maria Kazvan'},
                                            ]

    }
    $.supersized(options3);

}

有人能帮我吗？

您可以看到所有的项目这里，然后导航到FOTOGALLERY

Answer 1

试试这个：

创建图像数组：

var homeImages = [  
                    {image : 'img/1.jpg', title : '', thumb : 'img/thumbs/1.jpg', url : ''},
                    {image : 'img/2.jpg', title : '', thumb : 'img/thumbs/2.jpg', url : ''},
                    {image : 'img/3.jpg', title : '', thumb : 'img/thumbs/3.jpg', url : ''},
                    ];

var home = $.makeArray(homeImages);

var secondImages = [    
                    {image : 'img/4.jpg', title : '', thumb : 'img/thumbs/4.jpg', url : ''},
                    {image : 'img/5.jpg', title : '', thumb : 'img/thumbs/5.jpg', url : ''},
                    {image : 'img/6.jpg', title : '', thumb : 'img/thumbs/6.jpg', url : ''},
                    ];

var second = $.makeArray(secondImages);

然后设置主页超大型幻灯片

$.supersized({

    // Functionality
    slideshow               :   1,          // Slideshow on/off
    autoplay                :   1,          // Slideshow starts playing automatically
    start_slide             :   0,          // Start slide (0 is random)
    stop_loop               :   0,          // Pauses slideshow on last slide
    random                  :   0,          // Randomize slide order (Ignores start slide)
    slide_interval          :   3000,       // 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        :   500,        // Speed of transition
    new_window              :   1,          // Image links open in new window/tab
    pause_hover             :   0,          // 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            :   0,          // 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             :   1,          // Individual thumb links for each slide
    thumbnail_navigation    :   0,          // Thumbnail navigation
    slides                  :   home        // Using the home Image array we created

});

然后创建rest超大功能：

function resetSupersized(arr)
{   

    $("#play-button").empty().remove();
    $("#thumb-list").empty().remove();
    $("#thumb-back").empty().remove();
    $("#thumb-forward").empty().remove();


    $("#supersized").fadeOut('fast', function() 
    {

        $('#supersized-loader').empty().remove();
        $('#supersized').empty().remove();
        $('#hzDownscaled').empty().remove();
        $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');


        // Animation complete.
        $("#tray-button").fadeIn();
        $('#thumb-tray').html('<div id="thumb-back"></div><div id="thumb-forward"></div>');

        $.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       :   3000,       // 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     :   500,        // Speed of transition
           new_window           :   1,          // Image links open in new window/tab
           pause_hover          :   0,          // 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         :   0,          // 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         :   1,          // Individual thumb links for each slide
            thumbnail_navigation:   0,          // Thumbnail navigation
            slides              :   arr

        });     



    });

}

然后用你想要使用的数组调用函数，不管你想用什么方法.即onClick()；

resetSupersized(second);

希望这有帮助;-)

编辑:我唯一的问题是，它破坏了过渡速度.我还在努力解决这个问题！