SlideItMoo v1.1 comes with some new stuff implemented in it. Those of you familiar with version 1.0, skip to download read on. Updates have been made for more extensive usage of SlideItMoo. For the rest, some explaining. Also, the 1.0 version is available here and I’ll try to provide support for it if any needed.
SlideItMoo is a banner rotator, article spinner and image slider ( carousel ) developed with MooTools 1.2. Differences from the first version are the fact that the image slider now supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.
Basically, you can use the script without the item width parameter, by default is null and the width of the elements is calculated by the script. For better control though, it’s recommended that you provide this value. Same goes for height, for vertical sliding carousels. The item_width value is the width of a single item from the slider that includes any padding, margin or borders the element might have ( similar for height ).
To make a better idea about the parameters, it’s best to show them:
- overallContainer: this is the main container id
- elementScrolled: this container has overflow hidden; it works as a mask for his content
- thumbsContainer: the slider elements container; this is the element that actually slides
- itemsSelector: CSS class for your slider items
- itemsVisible: number of items visible
- elemsSlide: number of items to slide at once. For example, if you set this 3, when you click forward/back button or on autoSlide, it will go to the 4th element if the first in the active one.
- itemWidth: width of a single element (since they all have the same width) specified for the itemsSelector parameter
- itemHeight: height of a single element (since they all have the same width) specified for the itemsSelector parameter. This is useful when using the vertical carousel settings
- navs: navigation buttons ( forward/back button ) are no longer added from script. This enables you to style the whole slider/article spinner/carousel/… exactly the way you want and SlideItMoo will only implement functionality. navs param is divided in 2 more params: fwd and bk where fwd is the CSS selector for the forward button ( as .css_class ) and bk for the back button
- slideVertical: if this is set to true, the slider will be vertical. Remember that you need your HTML to display accordingly.
- showControls: displays or hides the navigation links (forward and back)
- transition: the transition you want to use (see this for more details)
- duration: transition duration
- direction: direction to slide (-1: back; 1: forward)
- autoSlide: give it a number in milliseconds and voila! it slides by itself
- mouseWheelNav: mouse wheel navigation is by default disabled. It’s up to you to use it or not.
- onChange: event that triggers every time the current slide changes. This is useful for extending SlideItMoo with extra functionality ( see fancy_slider.html in download archive )
As a comparison with the previous version, this one uses the same HTML markup excepting the fact that the itemsSelector parameter ( CSS class for the slider’s items ) MUST be provided. Also, the CSS is similar to the 1.0 version. One major difference is the fact that the navigation links ( back/forward buttons ) are now added manually by you in HTML and provided to the script as CSS selectors.
For best results, when instantiating the plugin, try give it a itemWidth/itemHeight ( depending on what type on slider you use – vertical or horizontal ) value so that the display will look like you planned. Remember, the itemWidth must include the actual element width plus any margins, padding or borders the element might have.
Returning to the differences between versions, the previous version used Fx.Scroll to make the slide effect; this one uses Fx.Morph. The continuous sliding of the images is obtained by moving the elements before/after the current element reached.
Installation
Script installation is pretty simple to do. Download the script and follow the steps below:
1. Open script folder and copy files: mootools-1.2.1-core.js, mootools-1.2-more.js and slideitmoo-1.1.js to the scripts folder in your application
2. Open stylesheet folder and copy the stylesheet of the slider you want in your pages ( horizontal.css, vertical.css … )
3. In your page, between <head> and </head>, add the javascript files and the css stylesheet
<link rel="stylesheet" type="text/css" href="path_to_css/horizontal.css" /> <script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2.1-core.js"></script> <script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2-more.js"></script> <script language="javascript" type="text/javascript" src="path_to_scripts/slideitmoo-1.1.js"></script>
4. Right after that, start the script. SlideItMoo is written as a class so to start it, you need to create for each slider you have in your page a new class instance and wrap all that inside the domready window event
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:4,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5
});
}
});
</script>The example above is for a single slider. If you run 2 or more sliders in your page, add a new class instance, for example like this:
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
new SlideItMoo({here you put your first slider parameters});
new SlideItMoo({here you put your second slider parameters});
}
});
</script>5. Add the slider HTML in your pages. Basic HTML would look something like this:
<div id="SlideItMoo_outer">
<div class="SlideItMoo_back"><!--slide back button--></div>
<!-- container inside used for hiding the elements outisde the view -->
<div id="SlideItMoo_inner">
<!-- actual elements container, usually having a width bigger than the one of SlideItMoo_inner -->
<div id="SlideItMoo_items">
<!-- a single element. Duplicate this for as many times you want to hold the individual elements in slider -->
<div class="SlideItMoo_element">
Here you have the element content.
</div>
</div>
</div>
<div class="SlideItMoo_forward"><!--slide forward button--></div>
</div>Updates
August 4th 2009
- new parameter (elemsSlide) available that allows sliding of multiple elements when navigating; defaults to null. Basically, if you want the slider to slide 2 or more slides at once instead of one, set this parameter to the number of slides it should jump.
January 12th 2010
- vertical sliding available. First, set your HTML to display vertically and set itemHeight:height of individual items ( including padding, border and so on ) and slideVertical:true
- navigators ( forward/back ) no longer added by script. Instead, add them into overallContainer making their display from CSS and after add the CSS selector class to navs parameter
IE: navs:{
fwd:’.SlideItMoo_forward’,
bk:’.SlideItMoo_back’
}
- new method available resetAll(). When called, this will reset the previous settings and restart the script. Useful if you change slider content on-the-fly
- new method available to stop autoSlide ( stopAutoSlide() ). To start autoslide back, use startAutoSlide()
March 11th 2010
- solved bug that affected container resize when changing itemsVisible parameter
- solved bug that affected navigation when elemsSlide was > 1 and autoSlide was on
You can also try the SlideItMoo Wordpress plugin if you own a blog and need image sliders inside your posts or pages.
Related posts
Was this useful? Show your support.
636 comments
Hi Constantin,
Just 1 last question. If I want to merge the code you gave me into the script to have a clean HTML file, what do I have to do ?
I tried to replace :
if( this.fwd )
this.fwd.addEvent(‘click’, this.slide.pass(1, this));
if( this.bkwd )
this.bkwd.addEvent(‘click’, this.slide.pass(-1, this));
by :
this.fwd.addEvent(‘click’, function(event){
if( this.currentElement 0 )
this.slide(-1);
});
but it doesn’t work… Do you have any idea ?
Thanks.
Don’t modify the class. Move the whole window event into the class file or create a new js file and put that code in it. Either way, you’ll end up with clean HTML.
Hi Constantin,
I am interested in having more than one slider on the same page. Is there a way to do this?
Thanks
Hi Karl,
Yes, it is. See here: multiple SlideItMoo instances.
Hi Constantin,
I want to use this slider is Arabic Site where I have to start with html with dir=’rtl’
but this slider not working in this way, Can you help me
Thanks
Why don’t you use styles? Style the document’s body direction property:
body{
…..
direction: rtl;
}
And as a note, if you leave a comment here, you don’t need to e-mail me too :) ( no harm done though ). I always respond to comments and by leaving a comment you can make sure you’ll help someone else in the future.
Thanks Constantin for the reply. Actually I have to embed that slider in my current website. I tried the way you suggested. I formatted the sytle with direction:rtl; I am using the horizontal_carousel.html, I changed the style in this way using the direction property, but it also doesn’t work for me :(.
body { margin:0px; font-family:Helvetica, Arial; direction:rtl; margin:0px; background:#f8f8f8; }
You said: ….I have to start with html with dir=’rtl’….
Have you removed that too? Since you’re styling the body, there’s no need for that. Can you put a link here to an example?
yeah I removed that started with this and placed the direction:rtl; in css but even this doesn’t work for me.
html xmlns=”http://www.w3.org/1999/xhtml”
You are rite that even in arabic there is not need to specify direction but I have to embed that in my current website and here I can’t remove the dir=’rtl’ in body tag since it would effect my other contents that has to be shown in arabic. I want that slider to work in my existing environment where this is specified.
Can’t say what happens. I need to see. Please point me to an example page where you tried this and didn’t worked.
Can you please download the folder from this link and run imageslider.htm in both browsers i.e in IE and firefox, it works well in IE but doesn’t work in firefox
http://67.199.113.16/test/ImageSlider.rar
Hmm, interesting. Looks like one solution would be to set direction back to ltr on #gallery_container. Works this way, don’t know if it’s ok for you like this. Oh, and there’s an error in that example. You left only the thumbs example in that page but forgot to remove the instances from script in header. Do that, leave only the one for the thumbs gallery.
Anyway, I’ll have to take a closer look at this. By the way, why don’t you use the 1.1 version of the script?
same problem is in 1.1
Try this. Let me know if it’s any better. See stylesheet for details.
THanks alot Constantin , I try this if it works fine for me.
I need two sliders on a single page it becomes a problem due to the id in it.
See this: http://www.php-help.ro/examples/slideitmoo_1.1_multiple/
Hi and thanks for this great code!
I’m using it as an auto-scroller for a series of small thumbs.
It works great except that there is a delay before the autoscroll starts. The delay is the same as the “duration” parameter, which sets the speed.
Is there a way to make the scrolling start right after loading?
Thank you very much!
I’m using these parameters:
duration:3500, /*scroll speed*/
startIndex:0,
autoSlide: 10,
direction:-1,
transition:Fx.Transitions.linear,
Each slide stays on screen for autoSlide milliseconds. duration parameter refers to the effect duration. If it would start sliding immediately, the first slide would not be visible. Maybe I don’t understand correctly your problem. Oh, and the delay is actually duration + autoSlide but since autoSlide in your case is set to 10 milliseconds… it’s like it doesn’t even happen.
How do I change the size of the container without messing up the slide location and smooth transition from forward or back. I need it to be at 937px.
My image blocks will be 215px with a 25px padding in between each image block. I appreciate your help.
Awesome code by the way!!!
Size changes according to the number of elements set visible on itemsVisible parameter. As for dimensions, you must fill itemWidth and itemHeight. I don’t understand what the problem is, maybe you could explain a little better.
Disregard my previous question..Ive figured it out. 1+30..!!!! it all depends on the size of the item element..sweet.
i want to mootools slide show this one(http://www.php-help.ro/examples/slideitmoo_1.1_multiple/) but how to configure to use it with autoslide and stop on mouse over and mouse wheel both i mean that when page load the slide show begun and if any one want to move it withmouse wheel back or forward he can do also that and how to aligne slideshowbanner to left of page etc thnks in advance
i want a slide show like http://www.e-pound-shop.co.uk/
And what is the problem with doing that? I can’t seem to understand what’s wrong.
I am displaying two sliders in a single page. Second slider is kind of dynamic slider which mean on click of the icon in the first slider i load the second slider. The problem, is if the number of icons is less than the itemsVisible (“itemsVisible:3″ ), icons are not formated correctly. How do i dynamically change the itemVisible property?
Hi Constantin, I am not sure if you saw my issue that i posted, so try to post it again. Please dont mind. take your time.
“I am displaying two sliders in a single page. Second slider is kind of dynamic slider which mean on click of the icon in the first slider i load the second slider. The problem, is if the number of icons in the second slider is less than the itemsVisible property configured for second slider(“itemsVisible:3″ ), then icons are not formated correctly because it is expecting atleast 3 or more icons.. How do i dynamically change the itemVisible property?”
eg. If
Have you tried resetAll method? You use it after you repopulate the slider so that it takes the new content.
IE:
var slider = new SlideItMoo({...});$('something').addEvent('click', function(){
... repopulate slider with elements
slider.resetAll();
})
PS. Sorry for the delay of my answer, I had a couple of crazy weeks and they still keep coming.
Great script,
Having a bit of trouble with something though. Using the simple banner rotator, everything works fine but on the transition, the current image simply disappears as the new one slides in.
http://www.littlemoose.co.uk/lm_home/ for example… any ideas?
Nevermind, figured it out. the imgs need to be set to display:inline
Sorry for the delay, I’m very busy these days and can’t answer right away. Anyway, glad yo hear you solved your problem.
I have been looking all over for a script to do something like what is shown here: http://www.crutchfield.com/ – See the “advertisement” area that says “Polk Car Speakers, 3D TB is Here, etc”? Your script is the closest thing that I have come that is Mootools based however, is it possible to do this? The image rotation is obviously already there, the only problem I see is actually making it so that when someone clicks on an item on the side, the advertisement changes. Any help is appreciated. Thanks.
No, this script is not close to that. It’s something else. I’m currently working on something like this, hope to have it ready in a week or so, I just can’t find the time to do it right now.
Well, I could really use a script that provides a way to have list elements on the side (right or left) with the content area where the image/advertisement would show up with a way to change the URL/Link for each image/element. I would be willing to pay for it as well. If you could keep my email address close and let me know when you have something ready, I would appreciate it. I am planning on using it for two commercial websites. Thanks
Thank you SO MUCH for this. I’m trying to use this script on a home page that’s got lots of weird overrides and stuff I have to do. I asked the administrator of the system how I could work around it and he said I’d have to put all the customization in the BODY tags. Is that possible?
Also, is it possible to put all the .js in one file? That’s another workaround they want me to do. Here’s the page where I’ve got it working the way I want it to (pretty much) http://mirandaeveritt.com/hoba/home.html
And here’s the page I want it to work on: http://handsonbayarea.org/AboutUs/index.php/home_test.html
Thank you! You’re an angel!
Hi,
Sorry for the delay, you comment was marked as spam by Akismet and I just found it now.
About your questions:
Q. “I’d have to put all the customization in the BODY tags”
A. Depending on what you mean by this, yes, it is possible. I assume by customizations you mean the class instance that will start the slider. You can put that along with the mootools files before the ending body tag since you’ll use a window event to start the script.
Q. “Also, is it possible to put all the .js in one file?”
A. Yes, but if you change things to JavaScript ( make updates for example ) it will make your work a bit difficult.
If I can help with anything else, let me know.
[...] SlideItMoo It packs a banner or image slider with an overlay image display effect that resembles Lightbox. [...]
Hi!
I am trying to disable the “infinite repeat” on the items, so that this could be a simple list with a beginning and an end.
However, I am having difficulties. I appreciate any suggestions
Not possible. I have a third version in mind but haven’t had the time to develop it. Sorry about this.
Hi i’m using your script and it works very good in Firefox but when we show the script in IE 8 sometimes we got an javascript error. like
Bericht: ‘this.fwd’ is leeg of geen object
Regel: 6
Teken: 2181
Code: 0
URI: http://www.zenzjewelry.nl/scroller/script/slideitmoo-1.1.js
Bericht: Deze eigenschap of methode wordt niet ondersteund door dit object
Regel: 256
Teken: 82
Code: 0
URI: http://www.zenzjewelry.nl/scroller/script/mootools-1.2.1-core.js
I’m only guessing here but I think you missed the forward button but kept it into the class instance. Please provide a link to your implementation so I can see what’s wrong.
Hi.
The strange thing is that this error is showing random, somethimes it works 100% and then it gave these errors.
The website is http://www.zenzjewelry.nl/orgindex.html
Then click on Collectie and choose Glasbedels
The array for this slider will be filled from a database
It looks like a timeout when filling the array, it only happens in IE
Try using load instead of domready as window event and see what happens.
Replace domready with load seems to solve the problem. we will test some more but in the mean time no error yet.
Thanks
Hi.
found some similair things on the internet which say:
Internet Explorer sends this event too early and DOM is not ready yet.
This exactly what happens on our website, the writer of the article above came also with the same solution to replace domready with load.
see: http://blogs.atlassian.com/developer/2008/03/when_ie_says_dom_is_ready_but.html
thanks again
Hi i use
window.addEvent(‘domready’, function(){
/* banner rotator example */
new SlideItMoo({itemsVisible:1, // the number of thumbnails that are visible
showControls:0, // show the next-previous buttons
autoSlide:2500, // insert interval in milliseconds
currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
transition: Fx.Transitions.Bounce.easeOut,
thumbsContainer: ‘banners’,
elementScrolled: ‘banner_container’,
overallContainer: ‘banners_container’});
});
But i am getting
window.addEvent is not a function
This error .. any idea how to solve this
This error can pop up from various reasons. Please give a link to your implementation so I can take a look.
Hi Constantin,
If the itemVisible property is equal to number of elements in the container, format is messing and eventually not able to scroll. for eg., i have only 2 elements to display, and i am dynamically changing the itemVisible to 2. that is where it fails.
I also tried your example script, same error. Is it possible to fix in this scenairo?
Otherewise everything looks good to me, thanks for the script.
Hi Constantin,
I am just creating an image gallery using this wonderful script :) but am having a problem when I change the width of each image.
If I change the width value to 270px; within “#SlideItMoo_items div.SlideItMoo_element {” I end up with 2 images stacked on top of each other, although they are the correct width (if that makes sense). I have tried changing the number of elements displayed and the other width values but seem cant get it working, it is working fine with the default width of 128px. What do I need to change to make this is work.
Any advice would be appreciated.
Width is also set in script when you create an instance of SlideItMoo ( itemWidth:… ). When you change the width in CSS, change the itemWidth parameter to the same value.
Great, thats it. Thank you.
Hi Constantin,
I am pretty new to Javascript and am trying to implement the slideitmoo script to autoslide but stop scrolling on rollover..
I notice in the documentation that there is a stopAutoSlide() function… but how exactly do you use it?
Or am i trying to do something that’s not possible?
Thanks
See the example called fancy_slider.html, between lines 49 and 61. Only that instead of $(‘pause_play’) you will probably use $(‘SlideItMoo_info_outer’).
I have tried to implement ur script with these settings:
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:1,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls:1,
startIndex:5,
onChange: function(index){
}
All is working good.
Only problem is the javascript part is too much heavy like 150Kb.
My site is already loaded with big images and flash stuff.
I need script simplified to just meet my requirements.
You can email me.
Thanks
Well, yuicompressed, SlideItMoo is 6kb. Moo Core to make this work is 56kb. So you have aprox 62 KB. Whatever else you have on your website is twice the size of Moo Core+SlideItMoo so I assume your problem is elsewhere. One question: besides MooTools as a framework, are you using any other one (jQuery, Protoype etc.)? I’m asking because as you may have noticed, the significantly bigger file is the framework, the script is quite small compared to that so if you use 2 frameworks, they’ll both be at least 120 kb in size.
I have 4 files in script folder named:
mootools-1.2.1-core
mootools-1.2-more
slideitmoo-1.1
slideitmoo-1.1_full_source
I tried to remove every file 1 by 1 from my website, it stuck.
So, Can u help me to reduce the size of all the needed JS files…./
These scripts are amazing by the way.
Thanx
You need moo core, moo more and slideitmoo-1.1. The fourth file is for development purposes, in case you’re interested in modifying the code.
Thnx for ur all help.
Scripts size is now 98Kb. Still a lot. 64 + 28 + 6 = 98kb
Is there a way to reduce it further. ?
I am trying to put multiple sliders on a different page than the last one. When I do this only 1st slider work else don’t. Is there any setting or any other script for this?
Thanx a lot for quick replying.
You could use the google API to get MooTools framework (http://code.google.com/apis/ajaxlibs/documentation/#mootools). This will save your bandwidth. Except that… sorry, nothing else.
About multiple sliders on same page, style the sliders using CSS class and use id’s to create instances for each slider.
Sorry to bother u again,
I have added lightbox 2.0 on the same page with slider. The slider has stopped working.
How to fix this ?
Thanx
You probably have a JS conflict. Use firebug to check if this is true. Also, as an alternative, you could use Slimbox (http://www.digitalia.be/software/slimbox).
[...] powerful checkbox replacement • RabidRatings is a simple but eye-caching ratings system • SlideItMoo is a banner rotator, article spinner and image slider • FormCheck is a class that allows you to perform different tests on form Und hier sind noch [...]
Hi Constantin,
I’ve installed iy works great.
But I do not want to have the sliders as links, and wahen removing the <a href… it simply stops to work.
How can I sort this?
Thank you,
Carl
What exactly stops working? Please be more specific, I’m not sure I understand where the problem is.
hello,
do mootools has conflict with jquery?
Thank you.
Yes, the version you’re downloading with this script has indeed conflicts with jQuery. If you download the latest from mootools.net and replace it in this script you’ll get rid of the problem.
[...] SlideItMoo It packs a banner or image slider with an overlay image display effect that resembles Lightbox. [...]
Leave a comment