Simple Gallery Example

An example of a image gallery viewer using only vanilla JavaScript. This serves as example of how to manipulate and play with the DOM

by odiseo

HTML

<h1>My Super gallery</h1>

<ul id="myImages">
    <li>
        <img src="http://i.imgur.com/OUQ3Gst.jpg" width="500" />
    </li>
    <li>
        <img src="http://i.imgur.com/tA9khck.jpg" width="500" />
    </li>
    <li>
        <img src="http://i.imgur.com/UAPkDvr.jpg" width="500" />
    </li>
    <li>
        <img src="http://i.imgur.com/PGdzkfE.jpg" width="500" />
    </li>
    <li>
        <img src="http://i.imgur.com/CfQIruB.jpg" width="500" />
    </li>
</ul>

JavaScript

(function () {
    //we'll hold a reference to our original ul image listing
    var listingSelector = document.getElementById('myImages');

    //hiding original listing
    listingSelector.style.display = "none";

    //and we get all img elements that the listing contains
    var images = document.querySelectorAll('#myImages img');

    //this will be our gallery viewer
    var galleryViewer = document.createElement('div');
    galleryViewer.className = "gallery-viewer";
    var greeting = document.createTextNode('This is my gallery viewer ');
    galleryViewer.appendChild(greeting);

    //creating buttons and registering events
    var prev = document.createElement('button');
    var prevLabel = document.createTextNode('<< prev');
    prev.appendChild(prevLabel);

    var next = document.createElement('button');
    var nextLabel = document.createTextNode('next >>');
    next.appendChild(nextLabel);

    prev.addEventListener('click', showPrev);
    next.addEventListener('click', showNext);

    //both buttons will be inside our gallery viewer
    galleryViewer.appendChild(prev);
    galleryViewer.appendChild(next);

    //we need a div to store the current visible image
    var currentImageDiv = document.createElement('div');
    galleryViewer.appendChild(currentImageDiv);

    //and we insert our gallery into the DOM
    //just before the original hidden listing is
    document.body.insertBefore(galleryViewer, listingSelector);

    //showPrev and showNext will set the current image
    //according to the appropiate index pointer
    function showPrev() {
        var prevImgInd = (currentIndex < 1) ? images.length - 1 : currentIndex - 1;
        setCurrentImage(prevImgInd);
    }

    function showNext() {
        var nextImgInd = (currentIndex + 1 >= images.length) ? 0 : currentIndex + 1;
        setCurrentImage(nextImgInd);
    }

    //these two will work as references to the image being displayed
    var currentImgElm;
    var currentIndex;

    
   ...