3

わかりましたので、少しjqueryを使用し<a>てページ上のすべてのタグを選択し、それらが画像ファイルにリンクしている場合zoomは、ライトボックスの目的でそれにクラスを追加しました。これは動作するコードです

$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});

ただし、これには問題があります。

別のページに移動するだけのリンクがあるとしますが、URL の GET 変数として画像の URL を渡します。この結果、ライトボックスがアクティブになり、リンクが実際には画像ではないため失敗します。例えば：

<a href="http://example.com/a-normal-page/?pic=http://example.com/pics/picture.jpg">Link text</a>

上記の例では、jQuery スクリプトは、実際には画像にリンクしていなくても、zoom クラスをこのアンカーに追加します。ライトボックスが表示される前にページを離れてリンク先に移動するため、これは通常問題になりませんが、新しいタブ/ウィンドウが開かれると、失敗したライトボックスが表示されます。

これは、リンク内で画像の URL を渡す Pinterest などのソーシャル メディア ボタンで特によく見られます。

[タイトルについてお詫び申し上げます - どのように表現すればよいかわかりませんでした。より適切なものに自由に編集してください]

4

2 に答える 2

2

属性に a が含まれていない(つまり、クエリ文字列が含まれていない)zoom場合にのみ、クラスを追加できます。href?

$(document).ready(function () {
    $('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').each(function() {
        if (this.href.indexOf('?') < 0) {
             $(this).addClass('zoom');
        }
    });
});
于 2013-01-29T12:30:23.410 に答える
1

単純な正規表現で href を解析して、画像がクエリ文字列に含まれていないことを確認し、誤検知を除外できます。

$(document).ready(function () {
    $imgLinks = $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"]');
    $imgLinks.filter(function() {
        return !$(this)
                .attr('href')
                .match(/^http\:\/\/.*\?.*http\:\/\/.*\.(png|gif|jpg)$/);
    })
    .addClass('zoom');
});
于 2013-01-29T12:33:35.897 に答える