0

初めての訪問者にポップアップするようにFancyboxを設定します。Fancyboxには画像が含まれており、その画像にリンクが必要です。したがって、ユーザーがクリックすると、hrefのある新しいタブが開きます。

    <div id="usplayers" class="fancybox" style="max-width:500px;overflow:none;display: inline- block;">
    <a href="External URL" target="_blank">
        <img src="/folder/img.gif"> </a>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox();
    });
</script>
<script type="text/javascript">
    function popit() {
        setTimeout(function () {
            $("#usplayers").trigger('click');
        }, 2000);
    }
    $(document).ready(function () {
        var visited = $.cookie('hello');
        if (visited == 'yes') {
            nothing();
        } else {
            popit();
        }
        $.cookie('hello', 'yes', {
            expires: 15
        });
    });
</script>

しかし、それは外部リンクでは機能しません。どういうわけかそれを開く唯一の方法は、マウスのスクロールをクリックすることです。

4

3 に答える 3

3

できることは、外部 URL をターゲットとwrapするアンカー タグ内の fancybox で開いた画像にすることです。<a>

まず、fancybox を次のようにバインドするために、html を適切に構築する必要があります。

<a class="fancybox" href="{the image that you want to open in fancybox}">
  <img src="{the thumnail that users see on your page}" alt="" />
</a>

... 訪問者がサムネイルをクリックすると、fancybox はタグのhref属性でターゲットにした画像を表示します<a>(これもpopit()関数によって起動されます)。

wrap次に、開いた画像への fancybox コールバックを使用し、新しいタブで外部 URL を開く別のタグを使用する必要があり<a>ます。コードは次のようになります。

<script type="text/javascript">
function popit() {
    setTimeout(function () {
        $("#usplayers").trigger('click');
    }, 2000);
}
$(document).ready(function () {
    var visited = $.cookie('hello');
    if (visited == 'yes') {
        // nothing(); // this is not defined
        return false; // use this instead
    } else {
        popit();
    }
    $.cookie('hello', 'yes', {
        expires: 15
    });
    $(".fancybox").fancybox({
        // here you wrap the opened image
        afterShow: function () {
            $(".fancybox-image").wrap("<a href='http://jsfiddle.net' target='_blank' />");
        }
    });
});
</script>

JSFIDDLEを参照してください

編集：

@blachawk のコメントに基づいて、fancybox に表示する要素が複数あり、各要素が異なる外部 URL にリンクする必要がある場合は、次のdata-*ような (HTML5) 属性を使用して各 URL を動的に渡すことができます。

<a id="usplayers" data-url="jsfiddle.net" title="fire fancybox" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

...次に、同じコールバック内で、data-url属性の値をフェッチし、次のようhrefにラッピング<a>タグを設定します。

$(".fancybox").fancybox({
    afterShow: function () {
        var url = "http://" + $(this.element).data("url");
        $(".fancybox-image").wrap("<a href='"+url+"' target='_blank' />");
    }
});

もちろん、更新されたJSFIDDLEを参照してください

于 2013-03-08T18:02:18.573 に答える
0

変化する：

<a href="External URL" target="_blank">
<img   src="/folder/img.gif" </a>

に：

<a href="External URL" target="_blank">
    <img src="/folder/img.gif" alt="" />
</a>
于 2013-03-08T15:45:01.677 に答える
0

ファンシーボックスではそれができません。このコードは、開いたばかりの画像に関する情報を表示するために新しいタブを開くのではなく、現在のページの上部にあるポップアップ ウィンドウに画像をポップアップするように作成されています。

于 2013-03-08T16:08:34.430 に答える