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

我正在使用最新的fancybox和buttons助手；有没有办法让“切换大小”按钮在新窗口中单独启动图像，而不是在fancybox中显示完整图像

---

任何帮助都将不胜感激

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

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

只是一个想法编辑以将其添加到

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

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

请看这个

我只在第125行添加了下面的代码

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

---

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

如果是，首先考虑FANYBOX肘节大小按钮助手HTML结构：

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

2） 。将

单击

事件绑定到新类，以在新窗口中打开当前图像（

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

其中，

$（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");
    }
});

$（“.fancybox”）.fancybox({
closeBtn:false，
助手：{
按钮：{
//将类“btnToggle”替换为“btnToggleClone”
tpl:“
”
}
},
余辉：函数（）{
el=$（this.element）.attr（“href”）；
}
});

请参见

---

注意：

.on（）

需要jQuery v1.7+

这可能很完美，但是我如何才能使按钮只显示在模式窗口中而不显示在页面正文中？抱歉，我只添加了

.sizeButton

作为示例，您会将当前创建的按钮设置为触发器。哦，是这样的，我还是有点困惑，你能帮忙吗？我看到的是：if（obj.canShrink）{toggle.addClass（'btntogleon'）；}或者if（！obj.canExpand）{toggle.addClass（'btnDisabled'）；}我能用你的代码替换它吗？当然，有什么问题吗？JFK，这很好，你的方法和vletech方法都对我有用，事实上，为了得到我个人想要的结果，我将两者混合在一起，这个答案也是正确的，但由于vletech从昨天起就在帮助我，我选择了他的：（@Unknownslo:yep，我看到@vletech在我的答案之后编辑了他的答案，以绑定

.btnToggle

的动作……所以我的答案被他接受了，这就是生活。很高兴你解决了你的问题。

afterShow: function () {
    el = $(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");
    }
});