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:
<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.
76 comments
You are definitely releasing some of the better mootools scripts lately. Keep up the great work!
Thanks man. It’s not easy but I’m doing my best. Please spread the word. Also, any suggestions you might have are more then welcome.
Thank you, nice piece of Code.
Your Site inspires me every time i come around.
[...] SlideItMoo [...]
[...] MooTools Image Slider – a good looking way to display the thumbnail images of your gallery. Display any number of thumbnails in a photo gallery or as a banner rotator. [...]
[...] SlideItMoo, Mootools Framework’ü ile yapılmış bir resim slayt göstericisi. [...]
[...] SlideItMoo adalah slider untuk image yang dibuat dengan MooTools 1.2. [...]
I’m using the banner example on my new site. When the first transition occurs it moves the image up 2 or 3 pixels.
Nevermind. I found my bug. Nice script!
[...] SlideItMoo е безплатен MooTools слайдер на изображения който може да се интегрира във web 2.0 приложения ефективно като image gallery или банер ротация. Изображенията могат да се визуализрат чрез prev-next бутони ( или навигация с мишаката) а дизайна може да се персонализира посредством CSS. [...]
[...] SlideItMoo is a free MooTools image slider that can be used as an image gallery or a banner rotator. [...]
[...] This nice and easy to implement code can create either a banner rotator or an attractive thumbnail image gallery slider Link [...]
[...] Visiter le site [...]
This is fantastic but I did not suceed to use it on my own website because I have frames.
If you try this to use your exemple link inside a frame :
You get an error which is not systematic: ‘Abandoned operation’ on Internet explorer, no problem with Firefox.
Do you know if there is any solution for using SlideItMoo with frames as my website is already done.
Thank you for your help…
@Herve
Please provide a link with an example.
I just inserted your exemple page inside a frame.
It works on Firefox, Chrome, safari…
Not on IE
The error is more explicite on IE8: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
I’ve tested your page in IE6 and it works.
For more details, see IE error KB927917. I found this after a bit of googling your error.
this is exactly what i am looking for, however, i can not seem to find a good version of slimbox that functions well with this script. Does anyone have anything or know of a place to find one? I am already tried the Slimbox home page and tried versions 1.65 and 1.68.
It works with both Slimbox 1.68 and 1.65. You just have to follow these installation steps:
1. Download SlideItMoo source files
2. Make sure that all gallery images are in place ( gallery/full folder is empty by default; just copy the images from gallery/thumb/ to gallery/full/ )
3. Copy slimbox.js to ( Slimbox_source/js/slimbox.js ) to SlideItMoo_path/script/
4. Copy the images from Slimbox/css to SlideItMoo_path/images/
5. Copy the stylesheet from Slimbox/css to SlideItMoo_path/stylesheet/
6. Edit slimbox.css and set all background image paths to ../images/path_to_image.jpg
7. Add slimbox.css to the head section of the HTML document
8. Add slimbox.js to the head section of the HTML document
thank you, I appreciate it. Sometimes you just forget about the css.
[...] İndir [...]
Good script, anyway i’m trying to make it work with div elements, for example:
<a href=”url” rel=”nofollow”>textAMT-1</a>
now it slide vertical, not horizontal,dunno why… i think main problem is here:
this.images = $(this.options.thumbsContainer).getElements(‘a’);
or maybe not ? how to fix it for div?
Div’s are block elements. When you put div on every image anchor, they stack one on top of the other and you end up with the vertical slider. Try to set them: float:left in your CSS.
float: left; doesn’t help :/ maybe you can look here -> http://www.amtauto.lt/ ? whats the problem ? ill tryed many changes, same :/ and now not working on IE, damn…
try setting a width on #thumbs, something like 6000px. It won’t be a problem since his parent has overflow hidden. It looks like it helps.
nice idea :) thank you very much! its works! :)
It only needed some CSS twicking. You’re welcome, glad to be of help.
[...] kaydırma yöntemi ile önizlemesini yaptıran, mootools ile hazırlanmış bir araç. Örnek İndir Open Web Messenger: Değişik bir araç olan Open Web Messenger çevrimiçi destek için web [...]
Hi,
I have a problem with the banner rotator, when I load more than 2 images, in IE7 and Opera9 the last image won’t slide in. You can look at the page at http://www.locuiesteimpreuna.ro/svn/ where in Firefox or Chrome you get 3 images, in IE or Opera you only get 2 images, and the last shown image (the second) seems to pause a little longer before sliding back to the first one.
The example you have at http://www.php-help.ro/examples/mootools_rotator/ fails as well with Opera, but for some strange reason seems to work in IE.
Do you have any idea why this might happen?
Thanks in advance for your support,
Radu Stanciu
Awesome script! Thanks a bunch