jono.blog

With the new year here, I’ve decided to start releasing some scripts I use frequently for myself and clients. This is definitely not the first jQuery Banners script out there, but it is certainly one of the most light weight, and easy to use. The script supports the following features:

• Horizontal & Vertical banner image rotating
• Banner rotations triggered by an object, or jQuery Timer
• Linkable banner images
• Easing & Speed control on banner transitions

Script Info:

Version: 1.0
Release: January 02, 2010
Requirements: jQuery 1.3, jQuery Easing Plugin and the jQuery Timer plugin
Download: jQuery Banners (586)
Demo: jQuery Banners Demo

Instructions:

1. Make sure you are using jQuery 1.3+. You must include the jQuery easing plugin, and optiontially the jquery timer plugin if you wish to set a timer for rotating banner images.

   1 2 3 4

   <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.timers-1.1.3.js" type="text/javascript"></script> <script src="jquery.banners.1-0.js" type="text/javascript"></script>

2. Make sure your banner images are all the width and height. Put your banner images either in a unordered list, or in a div tag:

   1 2 3 4 5 6 7

   <div id="banners"> <ul> <li><a href="link1.html"><img src="images/banner1.jpg" alt="" /></a></li> <li><a href="link2.html"><img src="images/banner2.jpg" alt="" /></a></li> <li><a href="link3.html"><img src="images/banner3.jpg" alt="" /></a></li> </ul> </div>

3. In your CSS, make the parent div#banners container the same width and height as one banner image, and overflow: hidden. Lets say each banner image is 960, 250. The img needs to be displayed as a block to fix a spacing issue between images. If you are using the horizontal varient instead of vertical, you need to make the unordered list items to float left (so they sit beside each other). Otherwise, leave this out.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   img { border: none; display: block; } a:focus { outline: none; } #banners, #banners2 { margin: 0 auto; width: 960px; height: 250px; overflow: hidden; } div#banners ul li { display: inline; float: left; } ul, li { list-style: none; padding: 0; margin: 0; }

4. Call the jquery banners function when the document is ready:

   1 2 3 4 5 6

   $(document).ready(function() {   //Initialize banner rotation.. $('#banners ul').slideImages('horizontal', 960, 285, 200, 'expoinout', 'timer=5000');   });

Parameters & Options

There are 6 parameters for the slideImages() function:

• Horizontal or Vertical. If you choose to use horiztonal, make sure you have your
• float left in your css.
• Image Width. The exact with of your banner images.
• Image Height. The exact height of your banner images.
• Easing Speed. The speed in milliseconds which your transitions will occur.
• Easing. What easing equation you wish to use for your transistions. All of the equations are listed in the jquery.easing.1.3.js file. Make sure you have the correct case sensitive spelling, otherwise the script will fail.
• Trigger. This can either be a click object or a timer. If you want to trigger transitions between images by clicking a link for example, you would use $(‘a.next-banner’) in this parameter. If you would like to use a timer, you would use ‘timer=5000′ (in milliseconds = 5 seconds). To make this more clear, see the source code in the demo above.

In Conclusion…

This plugin is very simple and lacks a few features which I may release in an upgrade. There is no previous banner trigger, and no count on which banner is currently being displayed. I have the coding for this finished, but it is not clean or stable, so I have chosen to hold off for now. If you are still confused, the best way to figure out how this works is to view the source in the above example. Cheers!