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從多個鏈接打開同一個圖庫

回答

相關問題