2012-02-15 7 views
1

フルスクリーンバックグラウンドライブラリを使用してウェブサイトを開発していますSupersized、 ページの読み込み時にデフォルトのギャラリーが表示されます。それは完全に動作します。私がしようとすると、動的Ajaxデータを使って大型スライドショーを再構築できません

問題がある:特大サイズの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); 
          }); 
      

    "DYNAMIC"義務は、

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

  • 答えて

    5

    にナビゲートするよりもすることができます

    イメージの配列を作成します。

    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(...あなたが好きな方法から、使用したい配列を持つ関数を呼び出します)。これは;-)

    EDIT役立ちます

    resetSupersized(second); 
    

    希望:私はこれを持っていた唯一の問題は....イムはまだこの問題をうまくしようとしていることは、ねじアップ遷移速度をということです!

    +1

    優れたソリューション。精巧なソリューションを構築し、OPがそれを選んでいないとき、むしろそれをdemotivating –

    関連する問題