我如何製作縮略圖<img>單擊時顯示完整大小的圖像？

通常你必須與SRC作爲圖像的來源和ALT作爲替代文本的圖像踏歌：我如何製作縮略圖<img>單擊時顯示完整大小的圖像？

<img src="image1.gif" alt="Image 1" />

你能有這樣的事情是？：

<img src="image1.gif" alt="image2.gif" />

因此，這意味着src有一個圖像源，而alt也有一個圖像源。

我想要做的就是使用flickr api（一個拇指圖像和一個正常大小的圖像）從flickr中拉出2張圖像，當用戶單擊拇指時，會顯示正常大小的圖像。

我已經試過這樣的事情：

<a href="image2.gif" ><img src="image1.gif"/></a>

...但我得到了默認的「not found」形象拇指（即使圖像的確存在）。

我正在使用JQuery/Javascript。

任何幫助，建議，甚至替代品都歡迎和讚賞。

感謝

感謝您的答覆山姆，

我不喜歡收藏，因爲我覺得它太慢，花哨。

但我喜歡geowa4的想法。

，但請保持你的答案來了...

感謝

來源

2009-01-22 A Hassan

alt是文本當圖像無法加載或顯示在用戶的瀏覽器不支持圖像（如讀者盲人）。

嘗試使用類似收藏夾：

http://www.lokeshdhakar.com/projects/lightbox2/

更新：這個庫也許更好的基於jQuery的，你有你的使用 http://leandrovieira.com/projects/jquery/lightbox/

來源

2009-01-22 03:13:52 Sam

我不會那樣做的說 - alt標籤專門用於不顯示圖像的時間。然而，這適用於很多jQuery的東西，「rel」屬性非常有用。

來源

2009-01-22 03:17:17

這種功能將需要一些Javascript，但它可能只是使用CSS（除IE6以外的瀏覽器）。

來源

2009-01-22 03:17:25 dylanfm

這不會做你期待什麼：

<img src="image1.gif" alt="image2.gif" />

的ALT屬性文字只有 - 如果你給它一個圖像URL也不會做什麼特別的事情。

如果您想要初始顯示低分辨率圖像，然後將其替換爲高分辨率圖像，則可以執行一些JavaScript代碼以交換圖像。或者，也許將圖像加載到具有充滿低分辨率圖像的背景圖案的div中。然後，當高分辨率圖像加載時，它會加載到背景上。

不幸的是，沒有直接的方法來做到這一點。

你的第二次嘗試將創建一個鏈接到image2，但實際上顯示image1。

<a href="image2.gif" ><img src="image1.gif"/></a>

如果你想彈出更高的水庫版本，@山姆的建議是一個好主意。

這個CSS可能會爲你工作（它爲我工作在Firefox 3）：

<html> 
<head> 
    <style> 
     .lowres { background-image: url('low-res.png');} 
    </style> 
</head> 
<body> 
    <div class="lowres" style="height:500px; width:500px"> 
     <img src="hi-res.png" /> 
    </div> 
</body> 
</html>

在這個例子中，你必須到div高度/寬度設置爲圖像。它實際上會同時加載兩個圖像，但假設低分辨率圖像加載速度很快，您可能會在高分辨率圖像下載時首先看到它。

來源

2009-01-22 03:18:17

<img src='thumb.gif' onclick='this.src="full_size.gif"' />

當然，您可以更改onclick事件以將圖像加載到任意位置。

來源

2009-01-22 03:19:54 geowa4

一個無腳本，僅限CSS的實驗性方法，圖像預加載^獎勵！以及哪些僅適用於Firefox：

<style> 
a.zoom .full { display: none; } 
a.zoom:active .thumb { display: none; } 
a.zoom:active .full { display: inline; } 
</style> 

<a class="zoom" href="#"> 
<img class="thumb" src="thumbnail.png"/> 
<img class="full" src="fullsize.png"/> 
</a>

默認顯示縮略圖。在單擊並按住鼠標按鈕的同時顯示全尺寸圖像。一旦按鈕被釋放，立即返回到縮略圖。我絕不建議使用這種方法;它只是一個僅用CSS解決問題的演示。有了z-index +相對位置的調整，它也可以在其他瀏覽器中運行。

來源

2009-01-22 04:06:15

的

<a href="image2.gif" ><img src="image1.gif"/></a>

技術一直爲我工作。我在超級盃日記中使用它的效果很好，但是我看到我使用的腳本已損壞。一旦我解決了問題，我將在URL中進行編輯。

來源

2009-01-22 04:57:06

以下是LightBox的Angular版本。 Just Awesome :)

注：我已經把這個答案，因此沒有Js庫已被提及標籤下。

angular-bootstrap-lightbox

<ul ng-controller="GalleryCtrl"> 
    <li ng-repeat="image in images"> 
    <a ng-click="openLightboxModal($index)"> 
     <img ng-src="{{image.thumbUrl}}" class="img-thumbnail"> 
    </a> 
    </li> 
</ul>

來源

2016-03-03 11:46:52 Sampath

我如何製作縮略圖<img>單擊時顯示完整大小的圖像？

回答

相關問題