點擊圖片縮略圖的建議？

我正試圖建立一個縮略圖和一個顯示大圖像的圖片庫。目前，它在鼠標懸停在顯示較大圖像的縮略圖上時工作。不過，我希望用鼠標點擊替換懸停功能，以便鼠標離開縮略圖時較大的圖像不會消失。從一些研究中我可以相信這不能用css來完成，就像懸停功能一樣，我需要包含一些腳本。由於我是新開發的Web開發人員，我有點失落，並希望得到一些幫助。下面是圖庫容器和相應的CSS代碼的HTML代碼......我從哪裏開始？點擊圖片縮略圖的建議？

感謝一個

HTML代碼

<div class="gallerycontainer"> 

    <a class="thumbnail" href="#thumb"><img src="images/gallery/1one/101.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/101.jpg" width="405px" height="585px"/></span></a> 

    <a class="thumbnail" href="#thumb"><img src="images/gallery/1one/102.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/102.jpg" width="405px" height="585px"/></span></a> 

<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/103.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/103.jpg" width="405px" height="585px"/></span></a> 

<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/104.jpg" width="56px" height="80px"border="0" /><span><img src="images/gallery/1one/104.jpg" width="405px" height="585px"/></span></a> 

<br /> 

</div>

CSS代碼

.gallerycontainer{ 
position: absolute; 
/*Add a height attribute and set to largest image's height to prevent overlaying*/ 
} 

.thumbnail img{ 
border: 1px solid white; 
margin: 0 5px 5px 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
} 

.thumbnail:hover img{ 
border: 1px solid grey; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background-color: #000000; 
padding: 5px; 
left: -1000px; 
border: none; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image*/ 
visibility: visible; 
top: 0; 
left: 300px; /*position where enlarged image should offset horizontally */ 
z-index: 50; 
}

來源

2011-07-06 hotshots

下一次請使用代碼功能，否則您的代碼將無法在屏幕上正確顯示。 –

繼承人一個簡單的開始使用jQuery。

http://jsfiddle.net/8GKXM/

$('.thumbnail').each(function(){ 
    $(this).click(function() { 
     $('.thumbnail span').hide(); 
     $(this).find('span').show('slow'); 
    }); 
});

這是jQuery的說基本上是：

在每一個人.thumbnail點擊：

隱藏.thumbnail跨度（如每發現跨度）然後找到點擊.thumbnail的範圍並顯示

雖然我可能會將更大的圖像移動到自己的容器中...

來源

2011-07-06 11:15:32 Joonas

乾杯，工作的一種享受....... – hotshots

您可以沿着使用jQuery與blockUI插件：

<div class="gallerycontainer"> 
    <a class="thumbnail" href="#thumb" class="imgthumb"><img src="images/gallery 
     /1one/101.jpg" width="56px" height="80px" border="0" /></a> 
    <a class="thumbnail" href="#thumb" class="imgthumb"><img src="images/gallery 
     /1one/102.jpg" width="56px" height="80px" border="0" /></a> 
</div>

然後你就可以使用窗口onload事件附上onclick事件，火災與blockUI大圖片：

$(function(){ 
$(".imgthumb").onclick(function() { 
    $.blockUI({ 
    message: "<div><img src=" + $(this + " > img").attr("src") + " width='405' height='585' /></div>"; 
    css: { border: '1px solid grey'}  
    }); 
}); 
});

來源

2011-07-06 11:06:45 ramtheconqueror

歡呼聲爲快速反應，非常讚賞 – hotshots

點擊圖片縮略圖的建議？

回答

相關問題