如何在點擊彈出窗口中顯示圖片

我有一個簡單的手風琴，它有三個div類別一，類別二，類別三。所有三個div都有一些圖片，我想實現的是當我點擊在手風琴的任何圖像上，該圖像應該在高度寬度增加的彈出窗口中顯示。可以幫助任何人幫助我。任何幫助都非常感謝。謝謝。如何在點擊彈出窗口中顯示圖片

2012-06-06 freebird

這裏有沒有一個插件的任何幫助小提琴：http://jsfiddle.net/SzR6h/25/

回答您的評論

假設你更大的圖像有着完全不同的名字，我把數據中的該名稱 - * - 圖像標記中的屬性，例如

<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png" 
data-image-big="url_to_image_big"/>

在JavaScript，然後你可以通過寫作獲得圖像URL：

var urlBigImage = $img.data('image-big');

2012-06-06 08:36:28 iappwebdev

偉大的工作很好，謝謝你，一個問題給你，假設，而不是增加圖像的高度和寬度，我需要打開不同大小的相同圖像，那麼我該怎麼做，我需要指出它標籤的href。感謝。 – freebird

謝謝，我應該添加類似的東西，屬性是數據正確？你寫的數據圖像大，有點令人困惑 – freebird

對不起，以爲你知道它。看看這裏：http：//api.jquery.com/data/#data-html5 – iappwebdev

2012-06-06 08:20:00

感謝你的鏈接會嘗試。 – freebird

你在找什麼叫燈箱。「Fancybox」它是一個jQuery Lightbox插件。

您可以找到該插件在這裏： http://fancybox.net

有很多好的文檔關於它太，這是非常簡單的使用方法：http://fancybox.net/howto

例子：

您只需包含所有.js和.css文件並修改您的HTML一點點：

<a class="my_images" href="bigimage.jpg"> 
    <img src="thumbnail.jpg" alt=""/> 
</a>

然後你添加的fancybox：

$("a.my_images").fancybox();

2012-06-06 08:21:04

感謝您的幫助將嘗試這一點。 – freebird

你可以使用任何燈箱插件。他們中的許多可用在那裏，這是一個使用http://www.jacklmoore.com/colorbox

添加大圖像的URL中的ahref並添加一類像colorbox，則包括必要的文件和初始化顏色框狀

演示

HTML

<a class="colorbox" href="http://placekitten.com/200/300"> 
    <img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/> 
</a>

jQuery的：

$('a.colorbox').colorbox({photo:true});

2012-06-06 08:25:13

@Downvoter，請注意評論，所以我可以糾正自己。 –

謝謝你會嘗試鏈接，這意味着在我的標籤的href我需要指向相同的圖像權利。 – freebird

@freebird是的，更大版本的相同圖像的鏈接，或者如果你想要的不同的圖像。它會顯示你放入'href'的內容。 –

回答