如何在JavaScript中使用弹出窗口构建一个简单的图片库

How to build a simple image gallery in JavaScript using popup window

本文关键字：一个 图片库 简单 构建 窗口 JavaScript      更新时间：2023-09-26

我在网上到处找帮助，但我不能让它工作!

有人能给我一个例子，如何编码这样的东西?

我会调整图像的大小，并有一个缩略图大小的图像和一个更大的弹出窗口。我想要一个用户点击缩略图大小的图像，并有一个弹出全尺寸的图像。

我是一个Javascript的初学者，我认为代码会涉及到一个窗口。打开和点击功能，但除此之外，我不知道该怎么做。

9行JavaScript图片库

你所要做的-创建两个目录，一个用于images，一个用于thumbnails;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));
    }
};

// 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));
    }
};

检查第一个或第二个工作版本

相关文章：