The Image Gallery Revisited

Lets apply the Best practices to the Image Gallery .

/***　　　　　　index.html　　　　　　***/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body>

    <h1>Snapshiots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display"> Fireworks </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffe"> Coffee </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose"> Rose </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock"> Big Ben </a>
        </li>
    </ul>
    <div id="placeholder">
        <img src="images/placeholder.gif" alt="my image gallery" >
    </div>
    <div id="description">
        <p>Choose an image</p>
    </div>

    <script type="text/javascript" src="scripts/showPic.js"></script>

    <script type="application/javascript">
//        alert (description.childNodes.length);
//        window.onload = countBodyChildren;
//var description = document.getElementById("description");
//alert (description.childNodes[2].nodeValue);
    </script>
</body>
</html>

View Code

/***　　　　　　showPic.js　　　　　　***/

/**
 * Created by Administrator on 9/9/2015.
 */


function addLoadEvent(func) {
    var oldonload = window.onload;
    if( typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}



function prepareGallery() {
    if( !document.getElementsByTagName )  return false;
    if( !document.getElementById ) return false;
    if( !document.getElementById("imagegallery") ) return false;

    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i=0; i<links.length; i++) {
        links[i].onclick = function() {
            return showPic(this) ? false : true;
        }
    }
}


/*
    you can use this function to count how many children nodes the body element contains
 */
function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.nodeType);
    alert( body_element.childNodes.length );
}


function showPic(whicPic) {
    if( !document.getElementsByTagName ) return false;
    if( !document.getElementById("placeholder") ) return false;
    var source = whicPic.getAttribute("href");


    var placeholder = document.getElementById("placeholder");
    var img = placeholder.getElementsByTagName("img")[0];
    img.setAttribute("src", source);
    if(document.getElementById("description")) {
        var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3;
        var description = document.getElementById("description");
        var desc_p = description.getElementsByTagName("p")[0];
        desc_p.firstChild.nodeValue = text;
    }
    return true;
}

addLoadEvent( prepareGallery );

View Code

/***　　　　　　layout.css　　　　　　***/

body{
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    /*background-color: #777;*/
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

img {
    display: block;
    clear: both;
}

View Code

I think there is a function you can use in the furture, thats the addLoadEvent() :

function addLoadEvent(func) {
    var oldonload = window.onload;
    if( typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

This is a good plan for the future expansion.

This effectively creates a queue of functions to be executed when the page loads.

To add functions to this queue, I just need to write :

addLoadEvent( firstFunction );

addLoadEvent( secondFunction );