9 行 JavaScript 的图像库。
您所要做的就是创建两个目录,一个用于images
和一个用于thumbnails
; the thumbnails
目录应放置在images
目录。图像名称应该相同。使用alt
属性用于图像描述,最后,随意更改 CSS 值。
// HTML
<ul id="gallery">
<li><img src="images/thumbnails/img-01.jpg" alt="desc-01"></li>
<li><img src="images/thumbnails/img-02.jpg" alt="desc-02"></li>
<li><img src="images/thumbnails/img-03.jpg" alt="desc-03"></li>
<li><img src="images/thumbnails/img-04.jpg" alt="desc-04"></li>
</ul>
// CSS
#gallery {
list-style-type:none; background-color: #f0f0f0; overflow: hidden; margin: 0px; padding: 0px;
}
#gallery li {
background-color: #fff; float: left; margin: 5px; padding: 5px;
}
#gallery li img {
width: 120px; height: 120px; margin: 0px; padding: 0px;
}
//
// Image gallery in 9 lines of JavaScript
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function() {
var img = document.getElementById("gallery").getElementsByTagName("IMG"), w, i;
for (i = 0; i < img.length; i++){
(function(i){
img[i].onclick = function() {
w = window.open("","gallery","menubar=0,scrollbars=0");
w.document.write("<img src='" + img[i].src.replace(/thumbnails\//,'') + "' alt='" + img[i].alt + "' /><div>" + img[i].alt + "</div>");
};
}(i));
}
};
用 15 行 JavaScript 编写的图片库。
// HTML
// The same as above
// CSS
// The same as above
//
// Image gallry in 15 lines of Javascript
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function() {
var img = document.getElementById("gallery").getElementsByTagName("IMG"), w, i;
for (i = 0; i < img.length; i++) {
(function(i) {
img[i].onclick = function() {
if (!w || w.closed) {
w = window.open("","gallery","menubar=0,scrollbars=0");
w.document.write("<img src='" + img[i].src.replace(/thumbnails\//,'') + "' alt='' /><div>" + img[i].alt + "</div>");
} else {
w.document.getElementsByTagName('IMG')[0].src = img[i].src.replace(/thumbnails\//,'');
w.document.getElementsByTagName('DIV')[0].innerHTML = img[i].alt;
}
w.focus();
};
}(i));
}
};
检查first or the second工作版本。