無法重建動態阿賈克斯數據的超大幻燈片

Question

我正在開發一個網站，使用全屏幕背景圖書館Supersized, 網站開始顯示一個默認圖片頁面加載。它完美的作品。

問題是，當我嘗試：

• 取出超大型istance

• 刷新與AJAX加載其他數據的新istance

  var options = { 
        progress_bar   : 1, 
        random     : 1, 
        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  : 700,  // Speed of transition 
  
        // Components       
        slide_links    : 'blank', // Individual links for each slide (Options: false, 'number', 'name', 'blank') 
        slides     : [   // Slideshow Images 
                {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/sfondi/livedinnerparty_-07_1280x853.jpg', title : 'Image Credit: Maria Kazvan'}, 
                {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/sfondi/livedinnerparty_-08_1280x853.jpg', title : 'Image Credit: Maria Kazvan'} 
              ] 
  
       } 
      $(function(){ 
       $.supersized(options); 
      }); 
  

「動態」被稱爲

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

}

任何人都可以幫到我嗎？

你可以看到所有的項目HERE，比導航到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 

}); 

然後創建其餘的超級大小功能：

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

希望這有助於;-)

編輯：我曾與此唯一的問題是，它搞砸了過渡速度....我還在努力工作這個問題了！