2012-01-11 47 views
1

有沒有人嘗試使用按鈕或錨點擊激活fancybox縮略圖庫,目前可以使用fancybox通過點擊圖像,它將您帶到彈出圖像庫,In我的條件是我想要一個簡單的按鈕或一個html錨點,以便當用戶點擊按鈕或錨點時,應顯示模式彈出式庫。此外我的圖像將來自數據庫,任何想法如何做到這一點?從的fancybox網站如何觸發fancybox-thumbs gallery在主播上點擊

守則,在圖像上單擊時運行

$('.fancybox-thumbs').fancybox({ 
      prevEffect: 'none', 
      nextEffect: 'none', 

      closeBtn: false, 
      arrows: false, 
      nextClick: true, 

      helpers: { 
       thumbs: { 
        width: 50, 
        height: 50 
       } 
      } 
     }); 

更新工作的腳本:

$('a.gallery').click(function() { 
     $('.fancybox-thumb').click(); 
    }); 
+0

你想顯示花式畫廊時,單擊#畫廊? – zdrsh 2012-01-11 13:45:35

+0

是的,這正是多數民衆贊成是我在找 – 2012-01-11 13:47:20

+0

你可能會出現這個錯誤。通常這是通過給你的錨標記的href屬性來完成的,你想在你的Fancybox中覆蓋div的id。 – meagar 2012-01-11 13:50:55

回答

2

我在想這個(自從你以前的問題),也許你可以嘗試模擬點擊第一個元素分類.fancybox拇指

$('#gallery').click(function(){ 
     $('.fancybox-thumbs:first').click(); 
}); 

讓我知道

+0

現在什麼也沒有發生,在d上面的腳本中,d fancybox不是所謂的 – 2012-01-11 17:22:30

+0

錯誤在螢火蟲? – 2012-01-11 17:22:46

+0

沒有錯誤...... – 2012-01-11 17:26:12

0

你可以做這樣的事情:定義與性質和圖像

數組
var galPhotos = [{ 
     href : '../img/galeria/fondo1.jpg','nextEffect' : 'none', prevEffect : 'none', closeBtn: false, arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50 } }, 
     href : '../img/galeria/fondo2.jpg','nextEffect' : 'none', prevEffect : 'none', closeBtn: false, arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50 } }, 
     href : '../img/galeria/fondo3.jpg','nextEffect' : 'none', prevEffect : 'none', closeBtn: false, arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50 } }, 
     href : '../img/galeria/fondo4.jpg','nextEffect' : 'none', prevEffect : 'none', closeBtn: false, arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50 } }]; 

然後,只需

$('a#gallery').live('click',function(){ 
    $.fancybox(galPhotos); 
}); 

沒有測試您的配置,但我的是(和正常工作):

var galPhotos = [ 
        {href : '../img/galeria/fondo1.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'}, 
        {href : '../img/galeria/fondo2.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'}, 
        {href : '../img/galeria/fondo3.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'}, 
        {href : '../img/galeria/fondo4.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'}, 
        {href : '../img/galeria/fondo5.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'}, 
        {href : '../img/galeria/fondo6.jpg','nextEffect' : 'fade', 'prevEffect' : 'fade'} 
       ]; 

或簡單地點擊模擬到類

$('#gallery').click(function(){ 
     $('.fancybox-thumbs:first').click(); 
}); 

讓我知道是怎麼回事去

+0

但我的圖片會從數據庫 – 2012-01-11 14:13:02

+0

來填充它只是顯示第一圖像,無法看到縮略圖 – 2012-01-11 14:54:23

+0

你能提供測試鏈接? – 2012-01-11 15:08:47

0

也許這個作品:

<a class="fancybox-thumb" rel="fancybox-thumb" href="link_to_large_image.png" title="Image title"> 
<img src="link_to_small_image.png" alt="" /> 
</a>