これは私の最後の質問 (現在解決済み) と同じページ用ですが、ホスティングがダウンしているため、実際の例を表示できません。Fearless Flyer の contentslider を使用しています。これは、私が見つけた最も単純なマークアップとコードを備えているためです。こちらをご覧ください: http://demo.fearlessflyer.com/html/demo/content-slider/
ただし、複数のスライダーではなく、ページごとに 1 つのスライダー用に作成されていることは明らかです。2 つのスライダーで変更せずに実装しようとすると、2 番目のスライダーは機能しません。これは、スライドの負のマージンの値が、最初のスライダーで既に行われた計算の上に乗算されるためです。表示する写真がない右側の 4000px。
次のマークアップを使用して、2 つのスライダーで動作するようにしました。
1 つは「lightbox_gallery」と呼ばれ、もう 1 つは「lightbox_5gruende」と呼ばれる 2 つのスライダーがあります。
<div id="lightbox_gallery" class="lightbox_window">
<div id="mother_gallery">
<ul>
<li><img id="test" src="gallery_02.jpg" /><a class="next" href="#">next</a></li>
<li><img src="gallery_01.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>
</div>
</div> <!--end lightbox div -->
<div id="lightbox_5gruende" class="lightbox_window">
<div id="mother_5gruende">
<ul>
<li><img id="test" src="gallery_03.jpg" /><a class="next" href="#">next</a></li>
<li><img src="gallery_03.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>
</div>
</div> <!--end lightbox div -->
そして、この信じられないほどハックなスクリプト:
$(window).load(function() {
var theImage = $('#lightbox_gallery ul li img');
var theImage2 = $('#lightbox_5gruende ul li img');
var theWidth = 790;
$('#mother_gallery').css({
//stuff
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function(){
return totalWidth;
}
});
$('#mother_5gruende').css({
//stuff
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function(){
return totalWidth;
}
});
$(theImage).each(
function(intIndex){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex + 1) * 790)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex - 1) * 790)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
// THEN REPEATING THE SAME WITH SLIGHTLY DIFFERENT NAMES BECAUSE I DO NOT KNOW HOW TO WRITE A REUSABLE FUNCTION //
$(theImage2).each(
function(intIndex2){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex2 + 1) * 790)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex2 - 1) * 790)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
});//doc ready
これは痛いほど醜いです！それは機能しますが、2 つの完全に別個のスライダー関数が、別個のスライダーの画像に対して同じことを行うことは望ましくありません。
$(theImage).each 内の計算を両方のスライダーに使用できるように、これを書き直すにはどうすればよいですか?