Dynamic Galleries with DOM and CSS

Images that follow a sequence need another approach. For the visitor, it would be very annoying to click each of the thumbnails separately and click the real size picture to get back. A sequential viewer is needed. 

The functionality will include the following:

• The visitor sees all images as thumbnails; clicking on one takes her to the sequential viewer.
  
  
• The viewer displays the image in its real size and next to it the same image as a thumbnail. Below the thumbnail it displays the next one and above the previous one. 

Our script needs to do the following:

• To avoid the need of two different style sheets, the script adds a class called “sequential” to the “thumbs” div. This means that in the style sheet we simply need to overrule the original settings with the new ones by increasing the selector’s specificity:
  
  thumbs div { … }
  
  #thumbs.sequential div {}

• Loop through all the thumbnails and hide them. If the thumbnail is the one that was clicked on, it gets an extra class called “current,” and the previous and the next one do not get hidden but displayed as a block element rather than floated.
  
  
• Add a function that reloads the entire document when the user clicks on the big image.

Other than that our script stays the same, we generate a DIV which will contain the big image and display when the user clicks on a thumbnail.

function sequentialgallery()

{

 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].i=i;

 

  piclinks[i].onclick=function()

  {

       if(!/sequential/.test(d.className)){d.className='sequential';}

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

       {

        piclinks[j].parentNode.className=(j==this.i)?'current':'';

        piclinks[j].parentNode.style.display=(j<this.i-1 || j>this.i+1)?'none':'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.onclick=function()

       {

        window.location=window.location;

       }

       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;

  }

 }    

 

}

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

The only difference in the style sheet is that we need to add the selectors for the thumbnails in the sequential view:

      #thumbs.sequential div{

      float:left;clear:both;margin-bottom:0;

      }

     #thumbs.sequential div.current{

          background:#036;

     }

The script adds the class “sequential” to the “thumbs” element when the sequential view is needed, therefore we don’t float the thumbnails in this one, but clear all floats to display them above one another. Theoretically, setting their display value to block should have done the same, but some margin-collapsing bug in Mozilla forces us to go this route. The “current” class is added to the thumbnail of the currently visible image, and all we add here is a different background color.