jQuery Gallery Plugin

Demo:

Opera House

Previous Next Photo of

• Opera House
• Harbour Bridge
• Sydney from the above
• Sydney Buildings
• The Iconic Opera House

Usage:

$("#gallery-wrapper").gallery({
	background: '#ffc',
	foreground: '#000'						  
 });

Demo HTML:

<div id="gallery-wrapper">
  <h1 class="gallery-title">Opera House</h1>
  <div class="gallery-pagination"> <a href="#" class="prev">Previous</a> <a href="images/image2.jpg" class="next" title="Harbour Bridge" rel="2">Next</a> <span>Photo <span class="current-pos"></span> of <span class="total-pos"></span></span> </div>
  <div id="gallery-image" style="height:300px; width: 400px;"> <img src="images/image1.jpg" width="400" height="300" title="Opera House" alt="Opera House" /> </div>
  <div class="gallery-more">
    <ul>
      <li><a href="images/image1.jpg" title="Opera House" class="t1 active"><img src="images/thumb1.jpg" width="60" height="50" alt="Opera House" /><span>Opera House</span></a></li>
      <li><a href="images/image2.jpg" title="Harbour Bridge" class="t2"><img src="images/thumb2.jpg" width="60" height="50" alt="Harbour Bridge" /><span>Harbour Bridge</span></a></li>
      <li><a href="images/image3.jpg" title="Sydney from the above" class="t3"><img src="images/thumb3.jpg" width="60" height="50" alt="Sydney from the above" /><span>Sydney from the above</span></a></li>
      <li><a href="images/image4.jpg" title="Sydney Buildings" class="t4"><img src="images/thumb4.jpg" width="60" height="50" alt="Sydney Buildings" /><span>Sydney Buildings</span></a></li>
      <li><a href="images/image5.jpg" title="The Iconic Opera House" class="t5"><img src="images/thumb5.jpg" width="60" height="50" alt="The Iconic Opera House" /><span>The Iconic Opera House</span></a></li>
    </ul>
  </div>
</div>

Download:

jquery.gallery.js