fancybox在新标签页中打开

Question

我有以下html：

<a href="createCompany/getOriginalImage/1" class="fancy_image"><img id="right_tab_image" src="createCompany/getSmallThumbnail/1" alt=""></a>

以下代码在页面加载时执行（在调试中测试）：

 $(document).ready(function(){
        $(".fancy_image").fancybox({
            type        : 'image',
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });

并且该页面包含以下来源：

但是当我点击href图像时会打开但在另一个标签页中。

我忘了什么？

Answer 1

模仿提供的代码似乎有效：

HTML

<a class="fancybox" href="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast.jpg"
style='width:50px;'> 
<!-- Note that FancyBox ignores this width styling -->
<img src="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast-150x150.jpg" alt="" /><br>
<b>Click to trigger Fancybox</b></div>

的jQuery

$(document).ready(function () {
    $('.fancybox').fancybox({
       padding: 0,
       type        : 'image',
       openEffect  : 'none',
       closeEffect : 'none'
    });
});

请参阅this demo。

所以你应该尝试让它运作起来：

1. 使用最新版本的jQuery和最新版本的fancybox。 Sometimes there are problems with the versions.
2. 确保fancybox.js实际已加载
3. 以完整的http://..格式
指定图片链接

我认为如果你遵循所有这些要点，它就会奏效。否则，请检查是否有任何其他插件导致fancybox出现问题。

Answer 2

是的，有效。我把类型设置为fancybox中的图像。我最后用fancybox放置一个空的占位符div标签来代替活动的flex幻灯片。这导致空白区域出现在花式框的背景中。它是通过以下设置修复的。

window.setTimeout(function () {
    jQuery('.slides a.fancybox')
        .attr('rel', 'gallery')
        .fancybox({
            arrows: true,
            type:'image'
        })
});