home » design, development, freebies

Simple Java script for rotating images: easy and unobtrusive

15 June 2009 8 views View Comments
» vCard | lsd@twitter | the Japan serie | lsd@tumblr | lsd@flavors.me

A simple Java script using JQuery, named Jarvis, helpful to make your images rotate without any delay.
The preload helps avoid hiccups while loading images at the very own first visit.
All value are customizable, and it may be helpful for several images rotation, even in a WordPress installation (and you know that many scripts are conficting in some way with that platform).
If you find some bugs or want to suggest improvements feel free to post a comment or drop a line.

You can see the script in action in the header of Liquid Sky Design: look at the rotating images, aren’t they cute? =)
Credits for the Jarvis icon image and for the dummy script images to Il Pianeta Naturale.

Author of this script is Nate Grey, a wonderful iPhone application developer, a great mind and a perfect match!

The script is released under a Common Development and Distribution Licence (CDDL), so feel free to download it, modifiy and redistribute but please keep the original author in the starting lines.

Usage:

  1. download the Jarvis.zip archive (click the link or the image heredown); open the jarvis.js file (using a free text editor like NotePad++);
  2. load the script with: <script type="text/javascript" src="yourpath/jarvis.js"></script> (REMEMBER: this line must be placed AFTER the one that loads jQuery);
  3. add in your CSS style the id “rotation”. You can also specify properties like width/height or whatever;
  4. add: <img id="rotation" src="defaultImage.jpg"></img> where you want your rotating images;
  5. edit the Jarvis script specifying the images you want, use a comma separated list (no comma for the last entry).
    Attention: you must specify the images twice (the second is for preload).
    Attention: I suggest the first image you specify here is the same you choose as ‘src’ in the <img> tag above;
  6. rotating timeout is set to 3000ms ( 3s ) by default, you can change this in the Jarvis script as well;
  7. no, there’s no point 7, you should be done. Go refresh =)

Download Jarvis

Tutti gli articoli e le immagini presenti su ./lsd sono fruibili sotto licenza copyleft e protetti da Safe Creative; le immagini di terze parti sono protette da copyright dei rispettivi detentori.
 

Altri post utili

deviantART: new page look and new art
Commercial: BE YOURSELF
Miss Piggy: The Diva Code
How to be a webdesigner: the bucket list of free resources
Music and inspiration: double your works
      
                              

View Comments »

  • Vicky said:

    I am using Fire Fox and I don't see rotating images at the top of the page

  • Claudia (author) said:

    Vicky, you’re completely right: I removed Jarvis from the header planning to change something over the images and needed a quick way to move images.
    Btw you can download Jarvis and tryout for yourself how easy and simple it is =)

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam. Domo Arigato.

You are allowed to use these tags in posts (if unsure keep it this way):
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

blog comments powered by Disqus