2

私のギャラリーには、同じ名前の対応する大き​​な画像がすべて含まれているサムネイルがあります。phpを使用して、各サムネイルを大きな画像に動的にリンクしました。次に、jQueryを使用して、href属性を使用して大きな画像を表示し、大きな画像へのパスを取得しました。ライトボックスがポップアップし、[次へ]をクリックすると、各画像を確認して表示できるようになります。代わりに、[次へ]をクリックすると、次の画像に移動しますが、[次へ]をもう一度クリックすると、同じ画像が表示されます。

説明が苦手なので、基本的な考え方を表す画像を添付しました。

ギャラリーに動的に読み込まれたサムネイル：

ギャラリーの最後の親指をクリックすると、次のように表示されます（建物の写真）。

[次へ]をクリックすると、この写真（破裂する泡）が表示されますが、[次へ]を数回クリックすると、この写真（破裂する泡）が残ります。

私のコード：

var Picture = $('.lightbox'); // path to full sized picture the class lightbox identifies a link <a>
var pic = Picture.index(this) //finds index
var num = Picture.length;//finds the total amount of thumbnails

$('#next').click(function(e){ //when next is click prevent default
    e.preventDefault(); 

    if(pic<(num-1)){ 
    var ntx = (pic)+1;
}
if(pic == (num-1)){ 
    ntx= 0;
}
var nxt = Picture[ntx]; 
var img = $('.box img'); 
img.remove();
$('.box').hide(); // removes the current image

$('.box').append('<img align="center" id="motown" src="'+nxt+'" style=" z-index:52px;" > '); //appends the next image and sets the div container to hidden and hide the new image


    });

次のボタンを毎回機能させるために、コードに何を追加できますか？

4

1 に答える 1

0

同じグループ内のすべての画像に同じrelを追加してみてください。それが私がやった方法です

<a href="first_img.jpg" rel="lightbox[mygroup]">Trigger Text or Image Tag</a>
<a href="second_img.jpg" rel="lightbox[mygroup]"></a>
<a href="third_img.jpg" rel="lightbox[mygroup]"></a>
<a href="forth_img.jpg" rel="lightbox[mygroup]"></a>
<a href="fifth_img.jpg" rel="lightbox[mygroup]"></a>
于 2012-05-30T14:40:19.173 に答える