Dynamic Galleries with DOM and CSS

There are numerous ways to style an image gallery. The technique we use here is to give the thumbnail DIVs a certain size and float them left. Then we fix the width of the “thumbs” element, which causes the thumbnails to neatly sort themselves into rows. This also means that should we resize the “thumbs” element, we won’t need to rearrange the thumbnails; they’ll do that automatically.

 #thumbs{

  width:700px;

 }

 #thumbs div {

  margin:5px;

  width:120px;

  height:110px;

  float:left;

 }

 #thumbs div img{

  border:none;

  display:block;

  margin:5px auto;

 }

 

For the big image we need to define the bigDynPic DIV as absolutely positioned over the others. This is the DIV that our script generates.

           #bigDynPic{

                      background:#369;

                      position:absolute;

                      top:1em;

                      left:80px;

                      padding:5px;

           }

Adding more features

So now we have it, a thumbnail gallery that displays the big picture without reloading the page or opening a pop-up, fully accessible and only available to those who really can use it. We could add a “loading” message while the image is being loaded, to avoid confusion for users on slow connections.

function dyngallery()

{

    var picId='bigDynPic';

    var loadingId='loadingmessage';

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

    if(!d){return;}

    if(!document.getElementById(loadingId))

    {

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

        lo.appendChild(document.createTextNode('Loading image'));

        d.parentNode.insertBefore(lo,d);

        lo.id=loadingId;

        lo.style.display='none';

    }

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

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

    {

        piclinks[i].onclick=function()

        {

             document.getElementById(loadingId).style.display='block';

             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.onload=function()

             {

                 document.getElementById(loadingId).style.display='none';

             }

             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;

        }

    }       

}

Just like the big image, the loading message will need to be positioned absolutely.

#loadingmessage{

  position:absolute;

  top:200px;

  left:150px;

  padding:1em 5px;

  background:#ffc;

  font-family:Verdana,Sans-serif;

  font-weight:bold;

  width:20em;

  text-align:center;

  font-size:80%;

  color:#000;

}

 

This allows us to display a range of images in a slick, nice way that does not force the visitor to reload the page for every image. But what if we are dealing with a sequence of images?