SDAC Blog

I recently created a site (in beta testing now) with Smooth Gallery and the client loved it.

The Problem:
The only issue was that upon the initial page load – all items in the gallery would flicker for a second or two while the first image loaded – causing this to not look professional at all.

The Solution:

1. HTML: I took the example code:

   <div>
   
     <div class="imageElement" id="element">
         <h3>Item 1 Title</h3>
         <p>Item 1 Description</p>
         <a href="#" title="open image" class="open"></a>
         <img src="images/brugges2006/1.jpg" class="full" />
         <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
      </div>
    
    </div>
   

   I then added an ID to each div (id=”element1″) so that each div had a class of “imageElement” and a unique ID (element1, element2, etc).

2. CSS: Now that I had IDs to style, I added the following to my style sheet:

   #element2 {display: none;}
   

By adding the 2 bits of code mentioned below, I was able to initially hide the content in the second div so that only the content in the first div appeared on page load. Once the script started running, it then changed the display from none to block automatically. Problem solved.