0

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

任何帮助，将不胜感激

4

2 回答 2

1

如果我理解您的问题，单击切换大小按钮助手应该在新的浏览器窗口/选项卡中打开当前图像，对吗？

如果是这样，首先考虑fancybox切换大小按钮帮助器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 选项将我的新类放入fancybox 按钮助手模板中，tpl例如：

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）。el在 fancyboxafterShow回调中传递参数，例如：

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

$(this.element).attr("href")目标图像 URL在哪里。

一共？

$(".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+

于 2013-03-24T10:37:56.113 回答
0

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

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

只是一个想法....编辑 这里是一个小提琴。

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

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

请查看您的 zip 的此编辑版本。

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

$('body').on('click','.btnToggle' ,function(e){
   e.preventDefault();
   activeImgURL = $('.fancybox-inner img').attr('src');
   window.open(activeImgURL);
});
于 2013-03-24T00:32:31.707 回答