iCarousel

by Fabio Zendhi Nagao (http://zend.lojcomm.com.br)

iCarousel is an open source (free) javascript tool for creating carousel like widgets.

index:

  1. Index
  2. Abstract
  3. Examples
  4. Browser compatibility
  5. Features
  6. Usage
  7. License
  8. Download
  9. Version history
  10. Comments

abstract:

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn't matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It's a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

examples:

browser compatibility:

iCarousel is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari (thanks Kamicane for testing it). But it should work in other browsers too... If you successfully find another compatible browser, please let me know ;)

features:

iCarousel is fully configurable. You can change any default option just initializating the class with an object in JSON. The following options are available:

how to use:

First of all, iCarouse is built over MooTools v1.1, so both libraries are required.
Get MooTools at http://mootools.net and iCarousel here. Use IceBeat Packito to see mootools dependences.
With scripts in hands, include them between your "head" definition:

Initialize the iCarousel class:

That's it, at this rate you should be able to see iCarousel creating a news ticker with the elements with a class "item".

license:

This piece of code is is released under the Open Source MIT license, which permits you to use it and modify it in every circumstance. For more details read it below:

The MIT License

Copyright (c) 2007 Fabio Zendhi Nagao - http://zend.lojcomm.com.br

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

download:

iCarousel is available in the formats below:

version history:

05/22/2007 : v1.001

05/09/2007 : v1.0 - first public release

comments:

User ratingvery cool!5/11/2007 10:55:58 AM
Author:Dave(http://www.fruehjahr.ch)
Very cool work! We used the old caroussell here:

http://www.fruehjahr.ch/portfolio/

Greets
Dave
User ratingWoW!5/11/2007 11:01:17 AM
Author:George Calm(georgecalm.com)
Nice! Exciting piece of code, which I really needed. (I'm replacing my old code as I write.) Thanks.
User ratingLooking good5/11/2007 11:39:04 AM
Author:iPilya(http://www.therandomdigest.com)
This is looking interesting.

You also might want to give specifics on what exactly in mootools is needed so when someone build the mootools js file they can make sure to include only those items needed.

-PilyaThanks for your suggestion. I'd add the mootools dependences at how to use topic.
User ratingcss?5/11/2007 3:08:05 PM
Author:andreas
fantastic job, but i have a problem.
i tried to configure it, but doesnt work for me.
do i need container css to use?
i cant see it in the code example.Hi Andreas,

Thanks for posting. Please send me more information about what are you trying to do and I will be glad to help you to set up iCarousel ;)
User ratinggreat component (minus 1 for no callbacks)5/11/2007 3:33:32 PM
Author:guy
Hi;
I have been looking for a long time for a carousel component based on mootools that would let me replace the yui carousel.
yui carousel has many features that i need such as dynamically adding items to the carousel, callback functions such as 'nextButtonPressed' and so forth.
this looks like a component that could eventually match the yui carousel.
are there any plans to add sch a functionality in the near future?Hi guy,

I'd no previous plan for it, but now you are talking about, I'll add this kind of features in the next release (which will be soon). Any suggestion is welcome ;)
User ratingVery nice!5/11/2007 5:30:40 PM
Author:Bill Guindon
Looks great, also works on Mozilla 1.7.13.Thanks for pointing me this.
User ratingSweet5/11/2007 10:03:12 PM
Author:Nicolás Sanguinetti(http://nicolassanguinetti.info)
Cool stuff. As guy said above, a bit of customization on the "adding callbacks" side would be neat. That would let us use Ajax to load the next set of images, for example, to page through large galleries :)

Keep at it!
User ratingscript warning in IE?5/11/2007 10:04:25 PM
Author:OffBeatMammal(http://blog.offbeatmammal.com)
these are really great, bu in IE7 I get a warning that the script may make my browser run slow and have an option to cancel out...
Hopefully just IE7/Vista being over-protective (as I've nt actually seen a problem result from it) but thought uI'd mention it...
User ratingNice, but slow ?5/11/2007 10:32:59 PM
Author:spinnach
Looks very nice, but all the examples on this page are kinda sluggish for me, upon clicking on any of the buttons nothing happens for a few seconds and then slides left right (or up or down).. Using Firefox 2.0.0.3 on WinXP..Sorry for all this slowness mess... as i wrote in ajaxian it's all fixed now.
User ratingNot bad; 5/13/2007 5:37:38 AM
Author:Mike(http://www.overfood.com/photos)
I implemented iCarousel tonight. It works fairly well, although I still have to tweak some display things. You have to be mindful of the width of your images, the CSS, and the JS parameters. My values aren't precise, and so the images are a little cut off and you don't scroll through a whole window of images each time. I think those are my fault and not iCarousel's fault though.
User ratingworks good5/13/2007 8:17:50 AM
Author:Evgenios Skitsanos(http://www.skitsanos.com/)
OffBeatMammal been complaining that stuff works bad for him/her on IE7/Vista, well, it is not. as i said, - works just fine.
User ratinggood5/15/2007 8:28:47 AM
Author:huanghuahua
this is very good,i will study hardly.
User ratingVery Good !5/15/2007 1:26:02 PM
Author:arnotw(www.creacommunication.fr)
Congratulations !
but is there possible to create an automatic scroll without arrows ?Yes, take a look in example I.
User ratingI love it, but...5/15/2007 1:46:33 PM
Author:Al
This is exactly what I've been looking for, but unfortunately neither the Horizontal images scroller example page or my implementation of it work in IE6. The arrows are being covered up by the content. I've just started trying to find a solution, but I'd appreciate any input anyone else has.
User ratingLooks good, function errors though5/15/2007 7:55:16 PM
Author:Chris
I might be doing something wrong, but I have followed the instructions, including the exact dependencies for MooTools. I am following the instructions in Example3 and I get an error "this.container.effects is not a function". Any ideas?Hi Chris, post your code in somewhere like paster2.org or pastie.caboo.se and I'll be glad to help you.
User ratingie6 error with arrows left and right5/16/2007 12:19:13 AM
Author:andres(http://www.geoturismo.cl)
http://www.geoturismo.cl/detalles/index.php?id=20#

todo perfecto, pero en ie6, las flechas quedan atras en la capa

------------
firefox 2.0 this script is ok
but ie6 the pics is over the arrows left and rightUse CSS to position your arrows IN FRONT OF the sliding container.
User ratingFeature Request5/16/2007 5:08:43 AM
Author:Jimmy
Works great, you did a fantastic job! A feature request for the image slider: only load the images when they're visible, similar to the way it works on youtube. Thanks for your posting Jimmy,

This behavior will break the unobstructive rules... but i'm going to add some custom events which will enable you to dinamically inject things ^^;;
User ratingthanks5/16/2007 7:06:28 AM
Author:arman
thank you so much for making this 'tool'.
it's really help, specially for newbie like i am :)

keep good works :)
User ratingRe: Looks good, function errors though5/16/2007 6:18:37 PM
Author:Chris
http://pastie.caboo.se/62190

I hope this is helpful.Can't you place this code in anywhere? It's hard to understand it oO;;
User ratingARGH!5/17/2007 7:46:32 AM
Author:Muzz
Is it not possible to package these examples into a zip so that we don't have to grab code, css and random images from your example pages just to get it to work? Im battling with the horizontal scroller and chances are I'm missing some valuable component for it to work :( .

Did you like it? Disliked it? Express your feelings, leave-me a message. (Yellow fields are required)

© 2007-2009 Fabio Zendhi Nagao (nagaozen) - http://zend.lojcomm.com.br/