0

画像のグリッドを一覧表示するギャラリー ページがあります。画像の 1 つをクリックすると、カラーボックスがポップアップし、ユーザーが画像を循環できるようにします。

シンプルなカラーボックスを使用すると、IE を除くすべてのブラウザーでこれが行われます。カラーボックスを開いた後でも、IEはリンクをたどります。

元のコード:

$('a.gallery_image').colorbox({
    transition: 'fade',
    opacity: 0.7,
    speed: 100,
    fixed: true,
    rel: 'gal_img',
    scalePhotos: true,
    maxWidth: ($(window).width() / 100) * 85,
    maxHeight: ($(window).height() / 100) * 85
});

以下を使用して、同様の効果を得ることができました。

$('a[rel="gallery_image"]').click(function(e){
    e.preventDefault();

    $('a[rel="gallery_image"]').colorbox({
        maxWidth: '90%',
        initialWidth: '200px',
        initialHeight: '200px',
        speed: 700,
        rel: 'gal_img',
        overlayClose: false
    });
$.colorbox({
    href: $(this).attr('href')
});
//return false;
});

ただし、IE にはまだ同じ問題があります。次に、return false; のコメントを外します。IE はページを離れなくなりますが、カラーボックスはギャラリーとして機能しないため、ユーザーは画像をスクロールできません。

IEがリンクをたどらないようにする方法、またはそもそもなぜそうなのかについて、私は考えがありません。

4

1 に答える 1

0

問題は、画像の URL に itemprop="image" があることが判明しました。それが問題を引き起こした理由はよくわかりませんが、それを削除すると問題は解決しました。これは、JS が元の状態に戻ったことを意味します。

$('a.gallery_image').colorbox({
    transition: 'fade',
    opacity: 0.7,
    speed: 100,
    fixed: true,
    rel: 'gal_img',
    scalePhotos: true,
    maxWidth: ($(window).width() / 100) * 85,
    maxHeight: ($(window).height() / 100) * 85
});
于 2013-09-02T07:54:13.630 に答える