敏捷傳送帶縮略圖問題

Question

我在我的網站上使用Agile Carousel插件進行了兩次不同的幻燈片演示。第一個是頂部;我在那裏沒有問題。我的問題在於底部（在About部分），我試圖用相應的縮略圖創建輪播。我創建了縮略圖並滾動瀏覽它們，但一旦它到達可見元素的末尾，它就不會將幻燈片放映到下一組縮略圖。

我的問題是：如何在幻燈片放映過程中將自己的縮略圖自己放置在旋轉木馬上？提前致謝！

下面是一些代碼片段：

//Bottom Slideshow instantiation 
$.getJSON("php/bottom/bottomShow_data.php", function(data) 
{ 
    $(document).ready(function() 
    { 
     $("#bottomSlide").agile_carousel({  
      // required settings 
      carousel_data: data, 
      carousel_outer_height: 525, 
      carousel_height: 450, 
      slide_height: 450, 
      carousel_outer_width: 713, 
      slide_width: 713, 
      // end required settings 

      transition_type: "fade", 
      transition_time: 600, 
      timer: 3000, 
      continuous_scrolling: true, 
      control_set_1: "previous_button,pause_button,next_button", 
      control_set_2: "content_buttons" 
     }); 
    }); 
}); 

JSON數據片段：

[ 
    { "content": "<div class='slide_inner'><img class='photo' src='../images/slideshow/bottom/1.jpg' alt='UGM 1' /></div>", 
    "content_button": "<div class='thumb'><img src='../images/slideshow/bottom/1.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>" }, 
    { "content": "<div class='slide_inner'><img class='photo' src='images/slideshow/bottom/2.jpg' alt='UGM 2' /></div>", 
    "content_button": "<div class='thumb'><img src='images/slideshow/bottom/2.jpg' alt='bike is nice'></div><p>Agile Carousel Place Holder</p>" }, 
.... 
14 objects total 
] 

Answer 1

你需要修改JavaScript（agile_carousel.alpha.js），可能有一個更好的辦法（即更有效）做到這一點，但這應該工作。

修改add_selected_class功能，並添加以下代碼：

var n = 0; 

for (n=1; n<=number_of_slides; n++) { 
obj.find(".content_button_" + n).css("top", '0'); 
obj.find(".content_button_" + n).removeClass("thumb_show").addClass("thumb_hide"); 
} 

這是做一個粗暴的方式，但所有這確實是隱藏所有縮略圖按鈕 因爲你可以使用的東西的thumb_show/thumb_hide類就像在你的CSS如下：

.thumb_hide { display:none; position:relative; top: -50000px; left:0; z-index:0; opacity:0;} 
.thumb_show { display:block; position:relative; top:0; left:0; z-index:20; opacity:1; } 

爲add_selected_class功能代碼的其餘部分只是決定5個縮略圖集合取決於該滑塊當前顯示顯示哪些。

var $thumb_set_length = 5; 
var $button_row_pos = 0; 

$button_container_offset_top = Math.round(obj.find(".content_buttons_container").offset().top);     
$current_button_offset_top = Math.round(obj.find(".content_button_" + slide_num).offset().top); 

//Depending on the layout of your page and top padding/margin added to parent elements you will need to fiddle about with the values below to calculate where the buttons should be positioned. 
$adjuster = Math.round(obj.find(".content_button_" + slide_num).height()/2); 

$button_row_pos = ($button_container_offset_top - $current_button_offset_top) * -1 - $adjuster + 26; 

//if slide_num % 5 == 1 than this is the 1st of the 5 slides     

if ((slide_num % $thumb_set_length) == 1) { 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+4)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+3)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+4)).css("top", $button_row_pos + "px");      

} 



//if slide_num % 5 == 2 than this is the 2nd of the 5 slides     

if ((slide_num % $thumb_set_length) == 2) { 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+3)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+3)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 3 than this is the 3rd of the 5 slides     

if ((slide_num % $thumb_set_length) == 3) { 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+2)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+2)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 4 than this is the 4th of the 5 slides     

if ((slide_num % $thumb_set_length) == 4) { 

obj.find(".content_button_" + (slide_num-3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num+1)).removeClass("thumb_hide").addClass("thumb_show"); 


obj.find(".content_button_" + (slide_num-3)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 

obj.find(".content_button_" + (slide_num+1)).css("top", $button_row_pos + "px"); 

} 


//if slide_num % 5 == 0 than this is the last of the 5 slides    

if ((slide_num % $thumb_set_length) == 0) { 

obj.find(".content_button_" + (slide_num-4)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-3)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-2)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + (slide_num-1)).removeClass("thumb_hide").addClass("thumb_show"); 

obj.find(".content_button_" + slide_num).removeClass("thumb_hide").addClass("thumb_show"); 
obj.find(".content_button_" + (slide_num-4)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-3)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-2)).css("top", $button_row_pos + "px");      

obj.find(".content_button_" + (slide_num-1)).css("top", $button_row_pos + "px");     

obj.find(".content_button_" + slide_num).css("top", $button_row_pos + "px"); 
}