Remove Initial Flicker With Smooth Gallery

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.

Upgrade Google Analytic Tracker Code

If you use Google Analytics on your web site, you should update your tracker code that is placed in your code. The new tracker is faster, and offers added tracking functionality (See Google’s announcement)

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.

Terms of Use Javascript

Need: A script that a client could easily call within a URL to force the users to agree to their terms of use before downloading a file.

Solution:Either put the following code in the header, or in a .js file to include:

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>