jQuery Blinds
Slideshow using CSS Sprites
Demo
Images from sc.chinaz.com
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(); })