Timer Gallery V2 Ajaxed

Posted on: February 20th, 2011 by James Vec

This is the newest version of Timer Gallery. In the original plugin, if there were too many images the gallery would break. I corrected this in the new version so that all the large images are loaded into the page instead of living within it.

You can see a working demo of the plugin here

You can download the source files here

I simplified the structure so that it would be easier to work with in this version. I removed many of the lists that were in the previous version and put most of the additional information in the anchor tags. The descriptions are included in the rel attribute of the anchor tag rather than in a list of descriptions .

Basic Usage

The gallery is easy to set up. Start by linking the styles and the script files in the top of your page. My styles include a global reset, but if you are using one in your stylesheet you can simply remove it. You will notice that one of the files is the Jquery easing plugin. You will only need to include this if you plan on setting custom easing for the menu. You can grab the latest version of the easing plugin here.

<link rel="stylesheet" href="css/timer.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.vec.GalleryAjaxed.js"></script>

Now you can add the code to initiate the plugin at the top of your page, and you can set or override any options that you would like.

<script type="text/javascript">
$(document).ready (function(){
	$('#viewer').timerGallery();
});
</script>

Right now, the only options are easing, timer, interval, and opacity. There are descriptions for each below.

Easing: The easing option will only work if you have included the easing plugin at the top of your document. This option just sets the easing for the scrolling thumbnails.

Interval: Interval sets the interval for the timer. 5000 is equal to 5 seconds. If you try to set the interval faster than 4 seconds it will default to 4 seconds so that the photos will have time to load.

Opacity: This option sets the opacity to the thumbnails. 100% = 1, 50% = .5, the default is set to .5

Timer: Timer has only 2 options, true or false. The option defaults to true, however if you would like to shut off the timer you can set the timer option to false.

If you prefer to set all of these options your code might look something like this.

<script type="text/javascript">
$(document).ready (function(){
	$('#viewer').timerGallery({ easing : 'easeInOutCubic', opacity: '1', timer: true, interval: '7000'});
});
</script>

Next, you will need to setup the gallery mark-up. This can be done by adding a few nested lists. All of the classes must remain the same for the plugin to work. If you change a class name you will need to change it in the script file as well, or else the plugin won’t work.

    <div id="viewer">
     <a href="javascript:void(0);" class="prev_img"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/prev_btn.png" width="70" height="280" alt="previous image" /></a>
   	  <div class="large_image_wrap">
       	  <div id="frame"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/frame.png" width="780" height="353" alt="frame" /></div>
            <div class="desc">
     	    <p class="desc_holder"></p>
    		</div>
   		    <div class="large_image_holder loading"> </div>
      </div>
        <!--end  large image --> 

     <a href="javascript:void(0);" class="next_img"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/next_btn.png" width="70" height="280" alt="next_image" /></a>
     <div id="thumb_wrapper">
     <a href="javascript:void(0);" class="previous"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/back.png" width="60" height="60" alt="backward" /></a>
     <div class="thumb_holder">
      <ul class="thumbs">
        <li class="section">
          <ul class="sub_section">
            <li class="first"><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/potatoe.jpg" rel="If you want to add a description for the photo you add it in the rel attribute of the link." class="one current"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/potatoe_thumb.jpg" alt="little Girl" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/aj.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/aj_thumb.jpg" alt="Aj Jenkins" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/claire.jpg" rel="Our good friend Bettina"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/claire_thumb.jpg" alt="claire" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/brunch.jpg" rel="My roomates and I having brunch... good times."><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/brunch_thumb.jpg" alt="Brunch" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/band.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/band_thumb.jpg" alt="band" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/clothes.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/clothes_thumb.jpg" alt="Clothes" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/molly.jpg" rel="Our new friend and roommate Molly, isn't she swell, well thats because you don't know her"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/molly_thumb.jpg" alt="Molly" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/fabric.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/fabric_thumb.jpg" alt="Fabric" /></a></li>
          </ul>
        </li>
        <li class="section">
          <ul class="sub_section">
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs_thumb.jpg" alt="Legs" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/smo.jpg" rel="Smo makes it into all the photo shows"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/smo_thumb.jpg" alt="Smo" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/nude.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/nude_thumb.jpg" alt="Nude" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs1.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs1_thumb.jpg" alt="Legs" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/skeleton.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/skeleton_thumb.jpg" alt="Courtney" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/trombone.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/trombone_thumb.jpg" alt="trombone" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/shapes.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/shapes_thumb.jpg" alt="Shapes" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs2.jpg" rel="emp"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/legs2_thumb.jpg" alt="Legs" /></a></li>
          </ul>
        </li>
        <li class="section">
          <ul class="sub_section">
          	<li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/toys.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/toys_thumb.jpg" alt="Toys" /></a></li>
            <li><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/kid.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/kid_thumb.jpg" alt="Kid" /></a></li>
            <li class="last"><a href="http://www.jamesvec.com/examples/timer_gallery_v2/images/guy.jpg" rel=""><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/guy_thumb.jpg" alt="Nude" /></a></li>
          </ul>
          </li>
      </ul>
    </div>
    <a href="javascript:void(0);" class="next"><img src="http://www.jamesvec.com/examples/timer_gallery_v2/images/fore.png" width="60" height="60" alt="foreward" /></a>
    </div>
    </div>
    <!--end thumbs-->
  </div>

Each sub section is a section of the thumbnail scroller. You can put as many or as few thumbs in each section as you want. All you will have to do is adjust the CSS for the section and the plugin will adapt the scroller automatically.

If you want to add a description to the photo, you can include one in the rel attribute of the anchor tag. If the rel is not there or is left blank, then the description box will remain empty.

That’s all there is to it. This is a beta version and suggestions for enhancements are always appreciated. If you find any bugs, please let me know by either leaving a comment or filling out the contact form above.

Tags: gallery, Jquery, thumbnail, timer