2

親指をクリックして次へボタンと前へボタンを使用できる画像ギャラリーを設定しようとしています。私の問題は、ユーザーが最初に検出する必要がある画像と、次または前の画像が表示されるワークアウトをクリックして、表示 src を次の画像の src に置き換えることができることです。前のボタンが同じ原理で機能するため、次のボタンを最初に機能させようとしているだけです。私は . next() を使おうとしましたが、本当に困惑しました。

これに関するどんな助けも素晴らしいでしょう。

これは私が持っているもののjsfiddleであり、以下は私が書いたjqueryです。問題は次のボタンの一番下のビットです:

var numImgs = $('div.locationGallery .polaroidImage').length;
var prevImages = $('.polaroidImage').prevAll().length;
var thisImage;
var imageClicked;
var nextImage;
var nextImage;

$('.polaroidImage').click(function(){
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
    if(prevImages > 0){
        $('.prev').show();
    }else{
        $('.prev').hide();
    }
    if(prevImages == (numImgs - 1)){
        $('.next').hide();
    }else{
        $('.next').show();
    }
});

$(".thumb").click(function(){
      imageClicked = '';
      imageClicked = $(this).attr('src');
    $(".imageDisplay").find('img').remove();
    $(".imageDisplay").append("<img src='"+imageClicked+"' />")
});

$('.next').click(function(){
    nextImage = $('.imageContainer').next('img').attr('src');
    alert(nextImage);
});
4

4 に答える 4

5

以下は、前と次のボタンが機能する例です: http://jsfiddle.net/8FMsH/1/ サムクリックで、現在の画像を保存する必要があります:

$(".thumb").click(function(){
  imageClicked = $(this);
  $(".imageDisplay").find('img').remove();
  $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />")
});

$('.next').click(function(){
 imageClicked.closest('.imageContainer').next().find('img').trigger('click');
});

$('.prev').click(function(){
 imageClicked.closest('.imageContainer').prev().find('img').trigger('click');
});
于 2013-05-17T14:51:12.057 に答える
1

クリック時に現在の画像を設定する必要があります。

thisImage = $(this).closest('.imageContainer');

次に、次のクリックでコードを次のように変更します。

nextImage = thisImage.next().find('.thumb').attr('src');

http://jsfiddle.net/c9Jkv/24/の例を参照してください。

于 2013-05-17T14:43:50.383 に答える
0

selected現在選択されている画像にのクラスを追加し、それを使用して次の親指を「見つける」ように設定して、コードを更新しました。

http://jsfiddle.net/c9Jkv/25/

これは非常に不自然に思えますが、DOM にすべてを依存するよりも、配列やオブジェクトなどの何らかのデータ構造を維持した方が少し簡単になるかもしれません。

于 2013-05-17T14:45:29.360 に答える
-2

ColorboxまたはShadowboxを使用することをお勧めします

于 2013-05-17T14:44:20.147 に答える