用jquery做相册
範例圖片CSS
body{ text-align:center;}
*{ margin:0; padding:0;}
img{ border:none;}
#container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
#loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
#imageOptions{ float:left;}
#imageOptions li{ list-style:none; margin:10px;}
.loading{ background:url(images/spinner.gif) center center no-repeat;}
h3{ line-height:500px;}HTML code<div id="container">
<div id="loader">
<h3>Click on an image to view it full size.</h3>
</div>
<ul id ="imageOptions">
<li><a href="#"><img width="200px" src="./uploads/20131251.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20131252.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20151213.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20160415netyea_banner1.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20160414netyea_banner5.jpg" alt="image" /></a></li>
</ul>
</div>
JavaScript code$(function(){
$("#imageOptions a").click(function(){
var imageSource = $(this).children("img").attr("src");
$('#loader').addClass("loading");
$("h3").remove();
showImage(imageSource);
return false;
});
});
function showImage(src)
{
$("#loader img").fadeOut("slow").remove();
var largeImage = new Image();
$(largeImage).attr("src",src)
.load(function(){
$(largeImage).hide();
$("#loader").removeClass("loading").append(largeImage);
$(largeImage).fadeIn("slow");
});
}
頁:
[1]