Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.
There are two things you need to add to your <head> section in your html, the css and javascript import lines:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style type="text/css"> .banner { height: 82px; width: 82px; padding: 0; margin: 0; } .banner img { border: 1px solid #fff; width: 80px; height: 80px; top: 0; left: 0 } .banner img { display: none } //these lines hide all the rest of the pictures on startup .banner img.first { display: block } //except the first image </style> |
1 2 3 4 5 6 7 8 9 10 11 | <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.banner').cycle({ fx: 'scrollLeft' // transition type, scrollleft }); }); </script> |
And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:
1 2 3 4 5 6 7 | <div class="banner">
<img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" />
<img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" />
<img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" />
<img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" />
<img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" />
</div> |
