Question

我正在使用最新的fancybox和按钮助手;有什么方法可以让切换大小按钮在新窗口中单独启动图像，而不是在fancybox中显示完整图像？

任何帮助将不胜感激

Answer 1

如果我理解了你的问题，点击切换大小按钮帮助应该在新的浏览器窗口/标签中打开当前图像，这是正确的吗？

如果是这样，首先考虑fancybox切换大小按钮helper html结构：

<a href="javascript:;" title="Toggle size" class="btnToggle"></a>

选择器.btnToggle在fancybox脚本中绑定到一个切换当前图像大小的函数，改变该行为可能非常麻烦（取消绑定/销毁函数并分配新函数等）。）

我会做的是

1）。使用另一个类（我将其称为.btnToggleClone）克隆切换按钮助手，并将其css属性设置为与原始.btnToggle完全相同，以便它可以使用相同的图像精灵（./helpers/fancybox_buttons。 png）：

#fancybox-buttons a.btnToggleClone {
    background-position: 3px -60px;
    border-left: 1px solid #111111;
    border-right: 1px solid #3E3E3E;
    width: 35px;
}

2）。将click事件绑定到新类以在新窗口中打开当前图像（el）：

$("body").on("click", ".btnToggleClone", function () {
    window.open(el);
});

注意我在其委托表单中使用.on()，因此我的类将绑定到任何当前或未来的DOM元素（当打开fancybox时，按钮帮助程序会动态附加到DOM 。）

参数el（元素）将通过fancybox回调传递（见下文）

3）。使用API选项tpl将我的新类放入fancybox按钮帮助程序模板中，如：

helpers: {
    buttons: {
        // replace the class "btnToggle" by "btnToggleClone" 
        tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggleClone" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
    }
}

4）。在fancybox el回调中传递参数afterShow，如：

afterShow: function () {
    el = $(this.element).attr("href");
}

其中$(this.element).attr("href")是目标图片网址。

一共？

$(".fancybox").fancybox({
    closeBtn: false,
    helpers: {
        buttons: {
            // replace class "btnToggle" by "btnToggleClone" 
            tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggleClone" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
        }
    },
    afterShow: function () {
        el = $(this.element).attr("href");
    }
});

参见 JSFIDDLE

注意：.on()需要jQuery v1.7 +

Answer 2

我不确定切换大小按钮是如何出现在页面上的，但简单的jQ解决方案可能与下面的代码类似。

$('.sizeButton').on('click',function(e){
   e.preventDefault();
   activeImgURL = $('.fancybox-inner img').attr('src');
   window.open(activeImgURL);
});

只是一个想法.... 编辑 here's a fiddle与它一起去。

编辑2 -----------------------------

好的，我看到了这个问题，因为首次加载页面时元素不存在，您必须将处理程序绑定到尚未创建的任何元素的类。

请参阅此edited version of your zip。

我添加的是以下代码到第125行。

$('body').on('click','.btnToggle' ,function(e){
   e.preventDefault();
   activeImgURL = $('.fancybox-inner img').attr('src');
   window.open(activeImgURL);
});

有没有办法制作fancybox切换大小按钮，在新窗口中打开完整图像？

2 个答案: