How to build a simple image gallery in JavaScript

问题:

I have looked all over the internet for help but I can't get it to work!

Would someone be able to give me an example of how to code something like this?

I would resize an image, and have a thumbnail size image and a bigger one for the popup. I want an user to click on the thumbnail size image and have the full size image in a popup.

I am very much a beginner to Javascript, I think that the code would involve an window.open and an onclick function but besides that I'm not sure what to do.

回答1:

Image gallery in 9 lines of JavaScript.

All you have to do - create two directories, one for images and one for thumbnails; the thumbnails directory should be placed within the images directory. Image name should be the same. Use the alt attribute for an image description and finally, feel free to change CSS values.

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

Image gallery in 15 lines of 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));
    }
};

Check the first or the second working version.