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>

首先，您必须正确构建您的 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()函数触发）。

然后，您将需要对wrap打开的图像使用 fancybox 回调，另一个<a>标签将在新选项卡中打开外部 URL .... 所以您的代码应如下所示：

<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

于 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

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

于 2013-03-08T16:08:34.430 回答