Dynamic Galleries with DOM and CSS

Our script will follow the rules of unobtrusive Javascript. We use the Document Object Model to access our markup, create and destroy elements on the fly, and will not use any global variables. The whole script will be self-contained and should be easy to mix and match with other scripts. The only overlap is when we call it when the page has loaded. If you are not familiar with unobtrusive Javascript, you can become familiar with it by taking the self-training course to get your skills up-to-date: http://www.onlinetools.org/articles/unobtrusivejavascript/

To apply our functionality, all we need to do is write a function that loops through all the links inside the element with the ID “thumbs,” and, to avoid the use of a pop-up window, we will generate a DIV dynamically and insert the image in that one. 

function dyngallery()

{

    var picId='bigDynPic';

    var d=document.getElementById('thumbs');

    if(!d){return;}

    var piclinks=d.getElementsByTagName('a');

    for(var i=0;i<piclinks.length;i++)

    {

        // [..]

    }

}

Once the user clicks on any of the links inside the “thumbs” element, we want to do the following:

• Check if there is already an element with the same ID as picId.
  
  
• If that is the case, remove this element – this is necessary to make the element “shrink-wrap” around our image.
  
  
• Create a new DIV element with the ID defined in picId.
  
  
• Create a new image with the same source the thumbnail-link points to.
  
  
• Set the alternative text of the image.
  
  
• Add a title to the image, telling the visitor that clicking the image will get her back to the thumbnails.
  
  
• Add a function to the image that removes the image when you click on it.
  
  
• Add a paragraph below displaying the alternative text of the thumbnail.
  
  
• Not return to the document, to avoid the real link being followed. If there is a Javascript error, the script will fail and the browser will load the big image instead.

function dyngallery()

{

    var picId='bigDynPic';

    var d=document.getElementById('thumbs');

    if(!d){return;}

    var piclinks=d.getElementsByTagName('a');

    for(var i=0;i<piclinks.length;i++)

    {

        piclinks[i].onclick=function()

        {

             var oldp=document.getElementById(picId);

             if(oldp)

             {

              oldp.parentNode.removeChild(oldp);

             }

             var nc=document.createElement('div');

             d.parentNode.insertBefore(nc,d);

             nc.style.display='none';

             nc.id=picId;

             var newpic=document.createElement('img');

             newpic.src=this.href;

             newpic.alt=this.getElementsByTagName('img')[0].alt;

             newpic.title='Click to return to images';

             newpic.onclick=function()

             {

              this.parentNode.parentNode.removeChild(this.parentNode);

             }

             nc.appendChild(newpic);

             np=document.createElement('p');

             np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))

             nc.appendChild(np);

             nc.style.display='block';

             return false;

        }

    }       

 

}

 

Now all we need to do to make our gallery work is fire up our function once the page is loaded, after we checked that the browser does understand the DOM. 

window.onload=function()

{

    if(document.getElementById && document.createTextNode)

    {

             dyngallery();

    }

}

Almost, that is. The functionality we developed depends on a mouse. Keyboard users can open the big image, but they cannot close it, as the newly generated DIV does not get the focus, and setting it via focus() doesn’t work in all browsers. Therefore we need to ensure that only mouse users get the functionality:

window.onload=function()

{

    if(document.getElementById && document.createTextNode)

    {

        document.body.onmouseover=function()

        {

             dyngallery();

        }                                           

    }

}

 

See the example with a proper style sheet in action here: http://icant.co.uk/articles/dyngallery/gallery.html