MooTools 1.2 image slider – SlideItMoo
Thursday, November 27th, 2008 in Mootools
SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel.
It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.
There are several options inside the plugin that you can set up in order to obtain the desired effect:
- visible: number of visible images ( default:5 )
- showControls: either to show the back-forward buttons ( default: 1 )
- autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
- transition: the transition you want to use when sliding
- currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
- thumbsContainer: the id of the thumbnails/images container
- elementScrolled: the id of the container of thumbsContainer variable
- overallContainer: the id of the elementScrolled variable
Comments are closed for this version of the script. Please use the new version and place any comments/issues there.
To use it, you need to include the plugin into the header section of your page after the MooTools 1.2 framework and then create an instance of the SlideItMoo class:
1 2 3 4 | <script src="script/mootools-1.2.1-core.js" type="text/javascript"><!--mce:0--></script> <script src="script/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script> <script src="script/SlideItMoo.js" type="text/javascript"><!--mce:2--></script> <script type="text/javascript"><!--mce:3--></script> |
Giving the fact that you can download MooTools having only the modules you need (in order to reduce file size), here’s the list of modules used by this script:
MooTools core:
- Core: all
- Native: all
- Class: all
- Element: all
- Utilities: DomReady
- Fx: Fx, Fx.Transitions
Mootools more:
- Fx : Fx.Scroll
The CSS styling behind all this is very simple; the only thing you need to remember is to put on the thumbnails/banners container the whitespace:nowrap property. Besides that, you can use your own id’s in your html and then provide them when you instantiate the class.
Related posts
Was this useful? Show your support.
75 comments
@Radu Staicu
Thanks for your error report. It looks like to solve this problem you need to make some changes into the stylesheet. On #banners ( the banners container ) you need to set
display:block,
position:relative
I’m sorry for the delay. Akismet thought your comment was spam and I just found it in the spam page.
Thank you for your help, that fixed the issue.
Hello,
is there a bugfix for Opera Version 9.26? With this Version the Slide doesnt slide.
Warm regards
Andi
is there a way to make it loop continuously instead of sliding back to frame 1 once it reaches the end?
@Andi
I’ve tested the script on Opera 9.63 and it works. What exactly doesn’t work? The whole script or there’s a bug somewhere? See comments 19 and 21 and let me know if that’s the problem.
@Andi
It looks like there is a problem getting the element coordinates in Opera 9.26. This could be solved by replacing the last line from the script ( this.myFx.toElement( this.images[this.options.currentElement] ); ) with this one: this.myFx.start(this.options.currentElement*this.image_size.x, 0);
It’s just a quick fix, it might need some more adjustments. I’ll make a new release these days.
@Holly
Yes, there is but the script needs some modifications. It’s not quite a quick fix. Basically, the elements should be positioned on the left side once they leave the visible area to create the illusion of a continuous slider.
I try replacing your compressed mootools with actual JS source from MooTools — your script breaks. Any thoughts? Have tried builder method as you’ve described above, and using full source. Your script doesn’t run. Any feedback is appreciated.
I’ve tested with MooTools 1.2.1 Core release and everything works fine. Try using firebug in Firefox and see what errors you get. If you could set an online example it would be great.
Hello. I would like to know, how can i change thumbnails container width?
Hi,
It’s quite easy. Just change the number of visible thumbnails. The parameter is itemsVisible. It will change the width to thumbnail width * number of thumbnails visible.
I mean im trying to make this: http://img24.imageshack.us/my.php?image=sliders3.jpg if you could help me i will be really thankful to you. Thank you for your time.
Well, you’ll need to change the back/forward buttons with your own buttons and change the styles on .addfwd and .addbkwd to the width/height of your images.
Next, change the background color on #gallery_container to your background and change the height to suit the height of your images.
That should be all, it’s not that hard, you only need to give it a try.
Thanks man. It helped me well. I will keep reading your web site.
Hi, i have lots of slideitmoo sliders in my page and i have to define every instance when i add another one, is there anyway make it automatically.
Or defining them with CSS Classes instead of CSS IDs
Hi, i couldnt use with slimbox? Is there any option to make it?
@Anime
Slimbox is a separate plugin. For info on how to install and use it, please refer to the author’s website: http://www.digitalia.be/software/slimbox. Also, see this explanation.
As a note, it’s not imperative to use slimbox, you can use any other lightbox script developed with mootools and more familiar to you.
@Huseyin
I’ll get back to you regarding that issue. It will need some modifications.
I try it but it’s not working. When i remove this two files: (mootools-1.2-core, mootools-1.2-more) then slimbox is working but of course image slider is not working. I couldn’t make it.
Ok i fix it. I just put slimbox.js under mootools lines. Thank you anyway.
BTW, when you changed the thumbsContainer’s ID other than “thumbs” slider is going crazy, sliding down or not sliding sometimes.
Have you declared on the new id white-space:nowrap? Or if you use divs (or other block elements), floated them left?
Is it possible to make when you click end of the slider image can it go back to begining? For example: Coda Slider?
Yes, change line 99 from this:
if(this.options.autoSlide && this.options.currentElement >= this.images.length-this.options.itemsVisible )
to this:
if( this.options.currentElement >= this.images.length-this.options.itemsVisible )
Awsome man thank you so much.
I’m currently using this slider and want to add a short description under each image which will be a link. I can’t seem to get this to work because if I try and put my image in a div tag it scrolls vertical. Also if I try and float left I get 5 images across (my itemsVisible is 5) but it still scrolls vertical but with 5 in each row. I’m a noob to css and I did see other people had this issue but I can’t resolve it, any thoughts?
Here’s a link to a scroller I’m kind of trying to emulate (except 5 in a row not 4):
http://food.yahoo.com/recipes/
By the way GREAT STUFF here!
Hi, please check the example page here. I’ve added an example based on your request, I hope you find it useful.
[...] we’ve used to give up the idea of. Modern web-applications can be designed with. MooTools 1.2 image slider – SlideItMoo SlideItMoo is a MooTools 1.2 slider for images, browser friendly and nicely degradable. YAML [...]
Greetings Constantin,
I think there may truly be one problem with 1.2.1 core compatibility. The last image or two in a simple link-only slider will not appear in IE (7 or 6) when clicking the ‘forward’ button. They sometimes, but not always will appear with mouse wheel. OK in other browsers.
Switch to 1.2.0 core — leaving all else the same — and it works fine in IE.
Switch back to 1.2.1 and it’s broken again. Repeatable, even using your demo example.
No errors appear either way.
Anyway — love the slider. Clean, nice and functional. Good work!
Hey Constantin,
Great script! Like Holly (Comment #24) I’d love to learn how to set the script up to appear continuous. Would appreciate any pointers you can offer as I’m not profeicient enough to make it work.
[...] version 1.0, skip to download. For the rest, some explaining. Also, the 1.0 version is available here and I’ll try to provide support for it if any [...]
Thank you all for your bug reports. With your help, I’ve developed the version 1.1 for SlideItMoo. It’s available here.
Again, thank you and please report any bugs you might find.