Fancybox放大同一圖像onlick

在頁面的內容區域中，我必須放置少量圖像，當用戶單擊圖像時，使用fancybox放大圖像。Fancybox放大同一圖像onlick

如果圖片很大，那麼用戶可以點擊圖片&它應該在放大的花哨框中顯示圖片。

我必須使用與縮略圖和大版本相同的圖像。

我試圖添加圖像的內聯樣式，以便它在內容區域顯示爲200px，並在圖像上單擊時顯示爲放大。但它並沒有考慮到它仍然保持在同樣的在線維度在花式框中顯示圖像的效果。

<div class="wrapper"> 


    <p><img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="float:right; padding:5px; width:200px;" class="zoom"><p> 

Vivamus nisi neque, finibus quis ex et, lacinia aliquam ipsum. Nullam ut malesuada nulla, vel pulvinar arcu. Nulla accumsan dolor sed faucibus accumsan. Aliquam non nulla lectus. Sed</p> 
</div>

http://codepen.io/anon/pen/ZQmrOb

來源

2016-02-09 Learning

的fancybox需要一個''或明確的URL加載 – Alex

作爲@Alex提到使用''時關閉。這裏是更新的鏈接http://codepen.io/anon/pen/LGXQdQ – karan3112

@ karan3112，我不能將文本包裹在錨點中，我想使它工作在當前的html結構中。 – Learning

你要做的唯一一件事就是特殊data-fancybox-href屬性添加到您的img標籤，如：

<img data-fancybox-href="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="float:right; padding:5px; width:200px;" class="zoom" />

注意兩個屬性， src和data-fancybox-href指向相同的圖像，但是data-fancybox-href用於在沒有img標記約束的fancybox中打開它。

Forked PEN

PS。你可以選擇添加closeClick: true到您的fancybox初始化這樣的fancybox點擊打開的圖像

$(".zoom").fancybox({ 
    closeClick: true 
});

來源

2016-02-10 04:49:50 JFK

這裏是更新的版本。它按照你的要求工作。

更新HTML

<a class="fancy-trigger" href="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg"> 
    <img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="" class="zoom"> 
</a>

Working Demo

來源

2016-02-09 10:25:19

你正在包圍它，我不想要的錨。 – Learning

Fancybox放大同一圖像onlick

回答

相關問題