0

私のサイトでは、いくつかの異なるスライドショーにAgile Carouselプラグインを使用しています。最初のものは一番上にあります。私はそこで問題を抱えていません。私の問題は、対応するサムネイルを含むカルーセルを作成しようとしている下部 ([概要] セクション) にあります。サムネイルを作成してスクロールするようにしていますが、表示される要素の最後に到達すると、スライドショーを次のサムネイルのセットに進めません。

私の質問は次のとおりです。スライドショーの進行に合わせてサムネイルをカルーセルにするにはどうすればよいですか? 前もって感謝します！

以下にいくつかのコード スニペットを示します。

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

1 に答える 1

2

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");
}
于 2012-10-26T15:27:28.563 に答える