Jquery timer gallery is the first real Jquery plugin that I have tried Authoring. It is a simple gallery that you can add to any page with thumbnails and descriptions for each image. This is a BETA version which may have some bugs. I have fixed all the ones that I have found, but if you find any of your own shoot me an email through the contact link in the main nav and I will try and fix it as quickly as possible. Also if you have any questions about the plugin you can send them to me as well. Also being the first plugin I have authored there may functions that could be written better, any suggestions or tips would be greatly appreciated as I am always trying to get better at writing jquery. I also realize that this plugin only works with small amounts of images because they are all loaded into the page. I am in the process of creating an ajax version that will load each image on click instead of loading them all into the page. That being said lets take at how to implement the plugin on your pages.

You can download the source code here

You can also see a demo of the gallery here

Add CSS files to the top of the page

The first thing you will need to do is to add the CSS files to the top of the page. You copy the CSS into your style.css file or rename the CSS file to something else and include it at the top of the page. For the demo I used style.css so I will include that at the top. I also include the CSS for Colorbox which I use to show full-sized versions of the images. I thought about writing my own Lightbox but there are so many good ones out there that I just used a pre-built solution. All the files for it are included in the source files, however if you want the latest version you can download it at Colorpowered.com

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/colorbox.css" />

You can tweak both these stylesheets to get the look and feel you want for both the gallery and the Colorbox

Include the Javascript in the head

Next thing we will do is add the JS to the head that will allow the photogallery to work.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.vec.timerGallery_ts.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

And now the JS to start the plugin

<script type="text/javascript">
$(document).ready (function(){
	$('#slide1').timerGallery({idPre: 'img' , interval : '4000' });
	$("a[class='cboxElement']").colorbox();
});
</script>

$(‘#slide1′) is the ID of the div that we want to use the plugin on. So all of my mark-up for my plugin is contained in that the div named slide1. idPre is a variable for setting what proceeds the id number which is added by the plugin. I had to add this in case you were running 2 galleries on one page. Since the plugin gives id’s to the list items they must be unique, so you only have to worry about this if you are running multiple instances of the plugin on one page. So if you wanted to run another instance you could just add $(‘#slide2′).timerGallery({idPre: ‘imgs’ , interval : ’4000′ }); below the first instance. The next variable is the interval time. This is how many seconds between switching images there is. 4000 is equal to 4 seconds, so every 4 seconds the image will switch.

Some other variables you can set are the easing type and the opacity of the thumbnails. So $(‘#slide1′).timerGallery({idPre: ‘img’ , interval : ’4000′, easing:’easeInExpo’, opacity: ’1′ }); will set the interval to 4 seconds the easing to easeInExpo and the opacity of the thumbnails to 100%.

The HTML

The HTML is a bunch of unordered lists. The class names must remain the same. Copy and past the format from the demonstration and add it to your document. Then all you have to do is change out image names and delete any un-needed sections

<div id="slide1" class="slideshow">
	<div class="img_cont">
  <ul id="desc1" class="descriptions">
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula.  </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula.  </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula.  </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula.  </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
    <li>
      <p class="slider_add">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Suspendisse malesuada dolor vel lorem pulvinar vitae consequat purus iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam et egestas ligula. </p>
    </li>
  </ul>
  <ul class="main_images">
  	<li><a href="images/girl1.jpg" class="cboxElement"><img src="images/girl1_chloe.jpg" alt="girl" /></a></li>
    <li><a href="images/baby.jpg" class="cboxElement"><img src="images/baby_chloe.jpg" alt="baby" /></a></li>
    <li><a href="images/balloon.jpg" class="cboxElement"><img src="images/balloon_chloe.jpg" alt="balloon" /></a></li>
    <li><a href="images/bear.jpg" class="cboxElement"><img src="images/bear_chloe.jpg" alt="bear" /></a></li>
    <li><a href="images/smo.jpg" class="cboxElement"><img src="images/smo_chloe.jpg" alt="smo" /></a></li>
    <li><a href="images/beer.jpg" class="cboxElement"><img src="images/beer_chloe.jpg" alt="beer" /></a></li>
    <li><a href="images/boots.jpg" class="cboxElement"><img src="images/boots_chloe.jpg" alt="boots" /></a></li>
    <li><a href="images/bullets.jpg" class="cboxElement"><img src="images/bullets_chloe.jpg" alt="bullets" /></a></li>
    <li><a href="images/case.jpg" class="cboxElement"><img src="images/case_chloe.jpg" alt="case" /></a></li>
    <li><a href="images/charlie.jpg" class="cboxElement"><img src="images/charlie_chloe.jpg" alt="charlie" /></a></li>
    <li><a href="images/courtney.jpg" class="cboxElement"><img src="images/courtney_chloe.jpg" alt="courtney" /></a></li>
    <li><a href="images/girl2.jpg" class="cboxElement"><img src="images/girl2_chloe.jpg" alt="girl" /></a></li>
    <li><a href="images/icecream.jpg" class="cboxElement"><img src="images/icecream_chloe.jpg" alt="icecream" /></a></li>
    <li><a href="images/justin.jpg" class="cboxElement"><img src="images/justin_chloe.jpg" alt="justin" /></a></li>
    <li><a href="images/old.jpg" class="cboxElement"><img src="images/old_chloe.jpg" alt="old people" /></a></li>
    <li><a href="images/skateboards.jpg" class="cboxElement"><img src="images/skateboards_chloe.jpg" alt="skateboards" /></a></li>
    <li><a href="images/stroller.jpg" class="cboxElement"><img src="images/stroller_chloe.jpg" alt="stroller" /></a></li>
    <li><a href="images/thumb.jpg" class="cboxElement"><img src="images/thumb_chloe.jpg" alt="thumb" /></a></li>
    <li><a href="images/track.jpg" class="cboxElement"><img src="images/track_chloe.jpg" alt="track" /></a></li>
  </ul>
  </div>
   <div class="prev_btn"><a href="#" class="prev"><img src="images/previous.png" alt="previous"/></a></div>
  <div class="thumb_holder">
    <ul class="thumbs">
      <li class="section">
        <ul class="sub_section">
          <li><a href="javascript:void(0);"><img src="images/girl1_chloe_thumb.jpg" alt="gril" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/baby_chloe_thumb.jpg" alt="baby" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/balloon_chloe_thumb.jpg" alt="balloon" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/bear_chloe_thumb.jpg" alt="bear" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/smo_chloe_thumb.jpg" alt="smo" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/beer_chloe_thumb.jpg" alt="beer" /></a></li>
        </ul>
      </li>
      <li class="section">
        <ul class="sub_section">
          <li><a href="javascript:void(0);"><img src="images/boots_chloe_thumb.jpg" alt="boots" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/bullets_chloe_thumb.jpg" alt="bullets" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/case_chloe_thumb.jpg" alt="case" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/charlie_chloe_thumb.jpg" alt="charlie" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/courtney_chloe_thumb.jpg" alt="Courtney" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/girl2_chloe_thumb.jpg" alt="girl" /></a></li>
        </ul>
      </li>
      <li class="section">
        <ul class="sub_section">
          <li><a href="javascript:void(0);"><img src="images/icecream_chloe_thumb.jpg" alt="icecream" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/justin_chloe_thumb.jpg" alt="Justin" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/old_chloe_thumb.jpg" alt="old people" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/skateboards_chloe_thumb.jpg" alt="skateboards" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/stroller_chloe_thumb.jpg" alt="stroller" /></a></li>
          <li><a href="javascript:void(0);"><img src="images/thumb_chloe_thumb.jpg" alt="thumb" /></a></li>
        </ul>
      </li>
      <li class="section">
        <ul class="sub_section">
          <li><a href="javascript:void(0);"><img src="images/track_chloe_thumb.jpg" alt="track" /></a></li>
      </ul>
      </li>
    </ul>
  </div>
      <div class="next_btn"><a href="#" class="next"><img src="images/next.png" alt="next"/></a></div>
</div>

Thats it you are ready to go. No matter how many thumbnails and images you add the scroller will handle it all.