mbBgndGallery - jquery gallery

Question

你好，謝謝你的閱讀。

目前我正在開發一個項目，該項目擁有「mbBgndGallery」作爲背景動畫的插件插件。

它與圖像完美結合，但我也需要加載文本。

這是插件的URL和解決方案的作者提供了使用文本： http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-bgndgallery/comment-page-6/#comments

其實我真的接近解決，但現在我有以下初始化：

if(slider_options.fx == 'zoom') 

      { 
var caption=["11111111", 
"22222222", 
"33333333", 
"444444444", 
"55555555555" 
]; 

       //BG SLIDESHOW WITH ZOOM EFFECT 
       $.mbBgndGallery.buildGallery({ 
        containment:"body", 
        timer:14000, 
        effTimer:14000, 
        controls:false, //updated in v1.1 
        grayScale:false, 
        shuffle:false, 
        preserveWidth:false, 
        preserveTop: true, 
        effect: slider_options.fx, 
        //effect:{enter:{transform:"scale("+(1+ Math.random()*2)+")",opacity:0},exit:{transform:"scale("+(Math.random()*2)+")",opacity:0}}, 

        // If your server allow directory listing you can use: 
        // (however this doesn't work locally on your computer) 

        folderPath:false, 

        // else: 

        images: slider_options.slides, 

        onStart:function(){}, 
        onPause:function(){}, 
        onPlay:function(opt){}, 
        onChange:function(idx){ 
if(caption[idx]) 
$("#desc").fadeOut(function(){$("#desc").html(caption[idx]).fadeIn()}); 
else 
$("#desc").fadeOut(); 
}, 
        onNext:function(opt){}, 
        onPrev:function(opt){} 
       }); 
      } 

圖片做旋轉正確，但我需要加載內容的div只是淡出 -

#desc 

可能有人會注意到我的東西失蹤 - 只是不知道如何處理它。

謝謝

Answer 1

我會建議只是hide/show標題寧可通過fadeIn/fadeOut動畫，請檢查下面的代碼：

背後

onChange:function(opt,idx){ 
    if(caption[idx]) { 
     $("#desc").html(caption[idx]); 
    } else { 
     $("#desc").html(""); 
    } 
}, 

原因是內部的幻燈片與一些計時器事件，一旦運行您嘗試調用功能fadeIn/fadeOut其他計時器事件已綁定，並且它們不會與原始幻燈片計時器事件保持同步。

PS：您還需要添加一個id爲desc的空白div，並使用css設置它。 即<div id="desc" style="font-size: 20px; color: #ffffff; border: 1px solid red;"></div>