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.

New Code: (put your tracker ID in where you see the X’s)

var pageTracker=_gat._getTracker('UA-XXXXXX-X');
pageTracker._initData();
pageTracker._trackPageview();

While you are updating your code, you might also want to consider moving this and any other javascript to the bottom of your web site for improved performance.

function terms(){
	question = confirm("Terms of Use text here")
 if (question !="0"){
		document.URL()
	}
  }

Then, call this code in your HTML code by using:

<a href="http://www.sandboxdev.com" />Download Link</a>