0

jquery を使用してライトボックス スタイルのギャラリーを作成しました: http://jsfiddle.net/ncD9H/ このフィドルで機能するものとクロムは他のブラウザーでは機能しません。

<a>タグ内にサムネイルがあります：

<div id="gallery">
            <a class="trigger" href="images/fulls/01.jpg">
                <img class="thumb" src="images/thumbs/01.jpg">
            </a>
            <a class="trigger" href="images/fulls/02.jpg">
                <img class="thumb" src="images/thumbs/02.jpg">
            </a>
            <a class="trigger" href="images/fulls/03.jpg">
                <img class="thumb" src="images/thumbs/03.jpg">
            </a>
</div>

サムネイルをクリックすると、次の jquery スクリプトでフルビューに切り替わります。

$('.trigger').click(function(e){
    e.preventDefault();  
    $('.lightbox').fadeIn(200);
    $('#main').foggy();
    var imageSource =$(this).attr('href');
    $('.lightbox>img').attr('src',imageSource);
    });

フル画像をクリックすると、フルビューがオフになります。

$('.lightbox>img').click(function(){
        $('.lightbox').fadeOut(200);
        $('#main').foggy(false);
    });

サムネイルをクリックしてフルビューを開き、フル画像をクリックしてライトボックスを終了すると、$('.trigger').click(function(e){ ...});まったく機能しません。サムネイルを 2 回クリックすると、ブラウザは完全な画像に移動します。

そのため、次のことを試しました。ページを更新し、サムネイルをクリックしてフルビューを開き、画像をもう一度クリックしてフルビューを終了しました。次に、コンソールで次のように入力しました。

$('.trigger').click(function(e){
    e.preventDefault();
});

サムネールをもう一度クリックしても、ブラウザは関数の指示に従って何もしませんでした。しかし、これは、何らかの理由で元の機能に 2 回目のクリックでアクセスできなくなることを意味していると推測しています。なぜこれが起こるのですか、なぜクロムで動作するのですか、どうすれば修正できますか?

注: foggy() は、背景をぼかす jquery プラグインです。

4

1 に答える 1

1

私にとっては、Safari ( 6.0.5) と Firefox ( 23.0.1) で期待どおりに動作しています (リンクを正しく開いていませんか?)。ばかげた質問ですが、キャッシュをクリアしようとしましたか?

とにかく、ブラウザがリンクされた画像にユーザーを送信することをいつでも望まない場合は、使用しないことをお勧めします<a>。<a>これにより、すべてのブラウザが意図したとおりに動作しないようにする方法を考える時間を大幅に節約できます。

于 2013-08-20T08:14:53.507 に答える