0

ギャラリーの最初の画像のみを読み込む非常にシンプルな画像ギャラリーを作成しています。ユーザーは画像を表示するためにサムネイルをクリックする必要があります。これは、ギャラリーに大きな画像を使用しているため、すべての画像を読み込む必要がないためです。そして今、次と前のボタンの作成に問題があります。

これは、画像が読み込まれる場所です

<div class="entry-content">
<div class="img-box">
<img id="img-preview" src="#" >
</div>
</div>

これはページネーションです

<div class="paginate">  
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>

これはサムネイルが属する場所です

<ul id="related-category"> 
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
</ul>

JQUERY

jqu(document).ready(function(){

jqu("#related-category li a").click(function(){

    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;
    
});

    jqu("a.next").click(function(){
    jqu(" li.photo").next("a");
});
    jqu("a.prev").click(function(){
    jqu("li.photo").prev("a");
});
});

私は解決策を探していましたが、ほとんどのスライダー画像はスライダーロードとしてプリロードされていますが、私のものはプリロードされていません。

4

1 に答える 1

1

.next()andメソッドは.prev()クリックを発生させません。DOMの現在の要素と同じレベルにある次または前の要素を含むjQueryオブジェクトを作成します。したがってjqu("li.photo").next("a")、li要素と同じレベルにアンカーがないため、何も見つかりません。いずれの場合も、すべて"li.photo"のli要素が選択されます。

クリックしたliにフラグを設定して（クラスを使用して）、それがどれであるかを覚えておくことをお勧めします。そうすれば.next()、その要素.prev()からを使用できます。

jqu("#related-category li a").click(function(){
    jqu("#related-category li").removeClass("selected");
    jqu(this).parent().addClass("selected");
    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;    
});

jqu("a.next").click(function(){
    jqu("li.selected").next().find("a").click();
});
jqu("a.prev").click(function(){
    jqu("li.selected").prev().find("a").click();
});

デモ： http： //jsbin.com/iruyap/1/edit

（注：前または次の項目がない場合は、前のハンドラーと次のハンドラーにコードを追加して、何かを実行することをお勧めします。）

于 2013-02-23T11:47:26.440 に答える