带有缩略图问题的敏捷轮播

Question

我在我的网站上使用Agile Carousel 插件来制作几个不同的幻灯片。第一个在顶部；我在那里没有问题。我的问题在于底部（在About 部分），我正在尝试创建一个带有相应缩略图的轮播。我有它，以便它创建缩略图并滚动浏览它们，但是一旦到达可见元素的末尾，它就不会将幻灯片推进到下一组缩略图。

我的问题是：如何让缩略图随着幻灯片的进行而自行轮播？提前致谢！

这里有一些代码sn-ps：

//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数据sn-p：

[
    { "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");
}