FancyBox从多个链接打开同一个图库

如何在保留相同花式框设置的同时点击'.fancybox-button'来打开'.fancybox'打开的相同图画？FancyBox从多个链接打开同一个图库

<div class="custom-thumbnail"><a class="fancybox" rel="group" href="Gallery/Image3.jpg"><img title="Bird Caption" src="Gallery/_t/testImage3_jpg.jpg"></a></div> 
<div class="custom-caption"><a class="fancybox-button"  rel="fancybox-button" href="Gallery/testImage3.jpg">Click here to open gallery</a></div>

这里是我的代码来管理的fancybox属性

 jQuery(".fancybox").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '100%', 
     height  : '100%', 
     title: this.title, 
     wmode: 'transparent', 
     allowfullscreen : 'true', 
     allowscriptaccess : 'always', 
     beforeLoad: function() { 
      this.title = jQuery(this.element).find('img').attr('title'); 
     }, 
     next : { 
      13 : 'left', // enter 
      34 : 'up', // page down 
      39 : 'left', // right arrow 
      40 : 'up' // down arrow 
     }, 
     prev : { 
      8 : 'right', // backspace 
      33 : 'down', // page up 
      37 : 'right', // left arrow 
      38 : 'down' // up arrow 
     }, 
     close : [27], // escape key 

     helpers: { 
      title : { 
       type : 'inside' // 'float', 'inside', 'outside' or 'over' 
      }, 
      overlay : { 
       showEarly : false 
      }, 
      thumbs : { 
       width: 50, 
       height: 50 
      } 
     } 
    });

来源

2015-05-06 Hectooorr

编辑：感谢@JFK，我终于明白了什么是OP的问题。是的，OP的解决方案似乎很好:)

FancyBox激活自己的类定义fancybox。所以，你的锚标记打开fancybox窗口（div.custom-thumbnail内的那个窗口）的原因是它有一个fancybox类。如果您为fancybox-button定义了不同的css属性，则只需在其附近添加fancybox类。否则，只需将fancybox-button更改为fancybox，您应该很好。

我为您创建了一个fiddle。我改变的唯一的事情是将“fancybox-button”类改为“fancybox”，它的工作原理。

通过在fancybox-button类中添加一个单独的fancybox类也可以。请参阅更新的fiddle。

来源

2015-05-06 21:36:31 ilter

复制对话框窗口中的图像。 – Hectooorr

我为你准备了一把小提琴。查看更新后的答案。 – ilter

仍然'fancybox-button'添加'fancy-box'不会打开与'custom-thumbnail'内部链接相同属性的图库。 – Hectooorr

这对我有效。你们认为这个解决方案是什么？

jQuery('.fancybox-button').click(function(){ 
     jQuery(this).parent().prev().find('.fancybox').trigger('click'); 
     return false; 
    });

来源

2015-05-07 23:13:44 Hectooorr

你让事情变得比他们应该的复杂。你只需要使用“fancybox”类。不像你在我的答案评论中写道的那样，“花式框”。你的解决方案可能有效，但是没有办法！请再次阅读我的答案，并尝试了解FancyBox插件如何激活。 – ilter

您的解决方案正是您需要做的。看到类似的答案http://stackoverflow.com/a/10838140/1055987 – JFK

@ilter：这个解决方案是要走的路 – JFK

FancyBox从多个链接打开同一个图库

回答

相关问题