jQuery Blinds

Slideshow using CSS Sprites

Demo

• 
• 
• 
• 
• 
• 
• 

Images from stock.xchng

1 2 3 4 5 6 7

Features

• Smooth animated transition
• Customizable sprite grid
• Customizable animation ochestration
• Multiple instances on the same webpage
• jQuery compatible (plugin)
• Unobtrusive javascript

Compatibility

Works great on the following browsers (Windows):

• Firefox 3.5
• IE 8
• IE 7
• IE 6 (imagine my surprise!)
• Opera 10
• Chrome 4
• Safari 4

Usage

HTML

<div class="slideshow">
   <ul>
      <li><img src="lemons/1.jpg" alt="lemon" /></li>
      <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
      <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
      <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
      <li><img src="lemons/5.jpg" alt="lemonade!" /></li>
      <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
      <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
   </ul>
</div>

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a>
<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6)">7</a>

Javascript

$(window).load(function () {
    $('.slideshow').blinds();
})

littlewebthings.com © 2010