如何防止fancybox刪除點擊縮略圖

第一次使用fancybox，它不是很好..開始希望我沒有打擾它。如何防止fancybox刪除點擊縮略圖

我在一行中有一些縮略圖，很好，然後當我點擊一個它打開THUMBNAIL而不是鏈接什麼更糟糕它刪除DOM的縮略圖。我已經在fancybox src中尋找了這個問題，但有很多，我可能最終會殺死功能，所以我想我會在這裏發佈。

繼承人的代碼：

原始的HTML來自CMS看起來像：

<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg"> 
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">

然後我在骨幹視圖運行一些東西呈現，最重要的一點是：

var imgs = this.$el.find("img"); //:a jquery group of the img elements above 
    this.content = this.$el.find("span.postcontent"); 
    //empty current 
    this.content.empty(); 
    //make replacement 
    for(i= 0;i<imgs.length;i++) 
    { 

     var curImg = $(imgs[i]); 
     var curLink = $("<a/>"); 
     curLink.attr("href",curImg.attr('data-orig')) 
     curLink.append(curImg); 
     curLink.on("click",function(e){ 
      e.preventDefault(); 
      $.fancybox.open(imgs) 
     }); 
     this.content.append(curLink) 
    }

我現在已經提供了這樣的html：

<a href="http://blah..blah..flickr..big..001_b.jpg"> 
    <img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg"> 
    </a> 
    <a href="http://blah..blah..flickr..big..002_b.jpg"> 
    <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg"> 
    </a>

到目前爲止這麼好...現在，當我點擊鏈接/拇指它做了fancybox東西，但顯示THUMBNAIL不是鏈接的圖像，在它的lightcarbon事情的中間小，什麼是真正煩人的是，點擊縮略圖頁面本身現在已經完全從DOM即：

 <a href="http://blah..blah..flickr..big..001_b.jpg"> 
     ///THIS IS MISSING COMPLETELY..... ggggggrrrrr 
     </a> 
     <a href="http://blah..blah..flickr..big..002_b.jpg"> 
     <img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg"> 
     </a>

來源

2012-06-13 Alex

可以從CMS的HTML不只是在格式的fancybox？即'' – CWSpear

可悲的是它不是一個預先要求迴應蹩腳的設備 – Alex

我回答並投票了前兩個，因爲他們都幫助，但不是確定的答案。該documentation並不清楚，如果你只使用「組」爲jQuery的數組，你還必須指定選項因此correnct答案是這樣做（傳遞兩個參數）：

  $.fancybox.open(imgs, 
       { 
        href:this.href, 
        title:curImg.attr("title") 
       } 
      );

來源

2012-06-13 21:27:33 Alex

我從來沒有見過的fancybox使用這樣的去除。通常情況下，您不需要像那樣觸發$.fancybox.open。您可以將fancybox()綁定到<a>標籤。

HTML：

<a href="big-image.jpg" class="fancybox"> 
    <img src="thumbnail.jpg"> 
</a>

的JavaScript：

$('.fancybox').fancybox();

儘量只使用該功能，你已經得到了DOM的樣子，經過。

[編輯]

我不能讓你的DOM操作，以相當的工作，但我這個小提琴測試，它似乎是工作：http://jsfiddle.net/haRnQ/4/

注：我沒有導入演示的樣式或圖像，所以它將是無風格的，但它仍然有效。

來源

2012-06-13 20:36:00 CWSpear

是的，這是一個大的MVC JavaScript應用程序，它沒有任何內容開始，所以它不能做所有的設置就緒/加載等 – Alex

不過，我的解決方案有它。如果你只是操縱你的DOM看起來像那樣，那麼你需要一個簡單的jQuery調用。我的小提琴有一個它的工作樣本（把你的HTML和操縱它看起來像我的''，然後只是一個快速的fancybox調用）。這有點古怪，因爲CSS沒有加載（所以它沒有註冊一個關閉點擊或任何東西），但我用本地測試它的所有css和來自fancybox的圖像，它的工作。 – CWSpear

嘗試改變這種

$.fancybox.open(imgs)

本

$.fancybox({ 
href: this.href 
});

因爲imgs是您的縮略圖（所有<img>元素），它被移動到的fancybox上click但不收集結束後搬回。

在任何情況下，我建議你添加一個class到<a>否則任何其他錨，你可能在你的網頁將嘗試打開的fancybox。

來源

2012-06-13 20:37:39 JFK

是的，做href的方式會忽略'羣'悲傷，這意味着沒有回/下一個等 – Alex

相信的fancybox喜歡包裹你的圖像在錨點。這一點很重要，因爲Fancybox 在激活幻燈片放映時刪除錨點，以防止在模式處於活動狀態時單擊錨點。

從拇指調用FB的行爲就像您通過刪除拇指並在模式關閉後未恢復拇指一樣。

這是我典型的FB的設置（不是拇指圖庫）：

<a href="image1.jpg" class="fb" rel="fb1"><img src="image1.jpg" alt="" /></a> 
<div style="display: none"> 
    <a href="image2.jpg" class="fb" rel="fb1"></a> 
    <a href="image3.jpg" class="fb" rel="fb1"></a> 
    ... 
</div>

來源

2015-04-01 22:04:19

如何防止fancybox刪除點擊縮略圖

回答

相關問題