Question

已将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>

但是它没有使用外部链接，只能以某种方式打开它是单击鼠标滚动。

Answer 1

您可以做的是wrap定位外部网址的锚标记<a>内的fancybox中打开的图片。

首先，你必须正确构建你的html，以便绑定fancybox，如：

<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()触发功能）。

然后，您需要使用fancybox回调wrap已打开的图片另一个<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，则可以使用（HTML5）data-*属性动态传递每个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

Answer 2

变化：

<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>

Answer 3

你不能用fancyBox做到这一点。该代码用于在您所在页面顶部的弹出窗口中弹出图像，而不是打开新选项卡以显示有关刚刚打开的图像的信息。

当用户单击fancybox IMG时，在新选项卡中打开外部网站

3 个答案: