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

Question

我正在使用全屏背景库 Supersized 开发一个网站， 网站开始在页面加载时显示默认图库。它工作完美。

问题是当我尝试：

• 删除超大实例

• 使用ajax加载的其他数据重新加载新实例

   var 选项 = {
              进度条：1，
              随机：1，
              Slide_interval : 3000, // 转换之间的长度
              transition : 1, // 0-无、1-淡入淡出、2-幻灯片顶部、3-幻灯片右侧、4-幻灯片底部、5-幻灯片左侧、6-旋转木马右侧、7-旋转木马左侧
              transition_speed : 700, // 转换速度
  
              // 成分                           
              Slide_links : 'blank', // 每张幻灯片的单独链接（选项： false、'number'、'name'、'blank'）
              Slides : [ // 幻灯片图像
                                              {图片：'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 Kazvan'}
                                      ]
  
          }
      $(函数(){
          $.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);

然后设置主页 Suppersize 幻灯片

$.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

});

然后创建其余的 Supersize 函数：

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

希望这有帮助;-)

编辑：我遇到的唯一问题是它搞砸了转换速度......我仍在努力解决这个问题！