帶有大拇指圖片畫廊，有全尺寸圖片網址可以加載

我有一個照片庫與一堆縮略圖。帶有大拇指圖片畫廊，有全尺寸圖片網址可以加載

<img src="/images/33113_thumb.jpg" class="thumb" /> 
<img src="/images/1233_thumb.jpg" class="thumb" /> 
<img src="/images/99513_thumb.jpg" class="thumb" />

我希望做的是使用jQuery，這樣，當用戶點擊圖像上，我可以在全尺寸圖像加載到視圖。

問題是我不知道在哪裏可以存儲我想要加載的圖像的完整URL。我想讓它可用，並且不需要服務器，因爲它會影響性能。

任何建議，我可以存儲上述拇指的替代全尺寸URL？任何技巧？

感謝

來源

2010-11-04 AnApprentice

請參閱http：// stackoverflow。COM /問題/ 1679751 /如何對負載的圖像從 - 拇指到更大尺寸的通孔的JavaScript – 2010-11-04 06:04:41

如何將它們存儲在無序列表中並有鏈接。

<ul> 
    <li><a href="/images/33113.jpg"><img src="/images/33113_thumb.jpg" class="thumb" /></a></li> 
</ul>

然後你就可以捕獲點擊事件，取消默認的瀏覽器的行爲，但閱讀鏈接href值，看看那裏的大圖像。

這也有一個好處，它可以在禁用JavaScript的情況下工作（它們仍然可以點擊以查看完整大小的圖像）。

來源

2010-11-04 05:26:33 alex

在你開發這樣的應用程序，我建議你看看那些現有的解決方案。 Jq.Lightbox將是其中之一。

回到你的問題，JavaScript函數的基本思想需要非阻礙，這意味着即使用戶沒有能力使用你的腳本，你的網站仍然可以正常工作。因此，對於您的應用程序標記至少會喜歡：

<a class='gallery' href='fullsizeimagelink' alt=''><img src='thumbimage'></a>

在這種情況下，即使沒有JavaScript中，用戶仍然可以在圖像上單擊並移動到完整大小的圖片，此外，它解決了你的問題也是如此。

來源

2010-11-04 05:24:56 xandy

我使用jquery lightbox插件實現了它。下面的摘錄給予或看到這個website（點擊事件或最新一期的部分）爲實現

腳本時它如何出現

$(function() { 
    jQuery('#magscarousel li a').lightBox(); 
});

HTML標記

<ul id="magscarousel" class="jcarousel-skin-mags"> 
<li><a href="./images/mag_cover_large_7.jpg"><img src='./images/mag_7.jpg' id='mag_cover_7'></a></li> 
<li><a href="./images/mag_cover_large_6.jpg"><img src='./images/mag_6.jpg' id='mag_cover_6'></a></li> 
</ul>

來源

2010-11-04 05:33:15 Philar

如果您使用HTML5 DocType，您可以將自定義數據屬性添加到您的標記標籤。

例如：

JQuery的可用於.attr（ '數據altsrc'）抓住的值。

正在使用類似的方法在pagoda.com上存儲alt圖像「翻轉」的URL。它仍然可以在沒有HTML5 DocType的情況下運行。如果您嘗試驗證標記，則只會標記「無效」屬性。

來源

2010-11-04 05:33:48 Gthompson83

帶有大拇指圖片畫廊，有全尺寸圖片網址可以加載

回答

相關問題