SlideItMoo v1.1 – image slider
Monday, February 23rd, 2009 in Mootools
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.
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.
401 comments
Hi.
Could you please suggest me how can i combine your older version and new version so i ll get enable/disable button which is used in older version and mover 3 images at time like new version? I have tried lots. but failed to get a proper result.
Thanks.
Please contact me directly using the contact form.
Hi ,
I used mootool slider. it is working fine. But when i include the prototype.js file then it is not working for me. But prototype.js file also need for me. Please suggest me a good answer
Only one good answer. Use either mootools or prototype based scripts. Or use some script that does what this does but is developed using prototype. Both frameworks, sorry but no.
Can I modify the slider to display much larger images, but one at a time?
Best example would probably be the homepage for Hulu.com.
Thanks.
Yes, it can be made like that. You’ll just need to set the parameters and do the styling.
Thanks – looks good with parameters changed (I was missing the one in the HTML).
Now for part 2 — how can I detect when the image changes? Is there an event that fires?
For example (again, using hulu as a guide) – if I have for example, 4 images being scrolled — and somewhere else on the page, 4 checkboxes … I want checkbox 1 to be checked when image 1 is displayed in the slider, checkbox 2 when image 2 is in the slider, etc….
No event gets fired on change but you could implement that pretty easy.
This might be a bit beyond me …but I’d be looking to add something like:
mySlidingElement.addEvent(‘complete’, function() {
doSomething();
})
In the demo, thumbsContainer is: ‘SlideItMoo_items’
Where would I place the code?
Would it be inside:
window.addEvents({
‘domready’: function(){
or elsewhere?
I just saw some sample code on the mootools.net site:
var myFx = new Fx.Slide(‘myElement’, {
mode: ‘horizontal’,
//Due to inheritance, all the [Fx][] options are available.
onComplete: function(){
alert(‘Poof!’);
}
But if, in the demo scripts, there is already a slide element being created (SlideItMoo_items) – where would I add this new code?
-Eric
Please download the script again (remember to clear cache). Implemented onChange ( use it like in the example you gave ) that returns the current element key.
Or … if I use my own controls (showControls:0) – how can I initiate a slide by clicking on another item on my page?
This variable simply displays/hides controls. It doesn’t give you the possibility to use your own controls.
So there is no way to initiate a slide on my own?
Shouldn’t there be a way to click a button and initiate a slide – instead of just having it on a timer?
For example … if I want the slider to go right to slide 3 when I click – rather than having to click the arrow 2 times to slide it?
Maybe a variation of the autoslide funtion, that takes an index and direction as parameters?
Probably it should but I haven’t had that in mind when I developed this script. On a future update, when that will happen, maybe it will have this if people ask for it. But what exactly are you trying to do? Can you show me somewhere online what you accomplished so far and what exactly you need? Don’t show me a “something like this” example. Try a clear description. If you don’t want it public, contact me from the contact form.
Hi! thanks for great software. How can i adjust the scroll delay or speed for demo 2?
The 2 values are autoSlide and duration. The first controls the delay between slides, the second controls the effect duration.
Hello! I’m using Slideitmoo and everything works fine and is great! The only problem I’ve got is that IE7 shows me an error but the application works fine all the way. Firefox goes without a problem.
I’m using:
mootools-1.2.1-core
mootools-1.2-more
slideitmoo-1.1
The IE7 error says:
Message: ‘null’ is null or is not an object
Line: 39
Character: 3
Code: 0
URI: http://www.ivancandle.com.ar/toto/slider/script/slideitmoo-1.1.js
Hope you can leand me a han on this!
Thanks in advance
Ivan
Hi Ivan,
The problem is that you copied all instances from the example page. I’ll have to change the download files to make it more self explanatory. Anyway, in slider.js, leave only this:
window.addEvents({
‘domready’: function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:4,
elemsSlide:1,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls:1,
onChange: function(index){
//alert(index);
}
});
}
});
It should do the trick. Good luck.
We’d like to used just slidemoo for a range of situations, so as well as just slide, would it be simple to implement a fade/crossfade? I expect it would just be a change to to the slide: event (line 128 ish) right? Any suggestions
Hi Trev,
May I ask what exactly you have in mind? Please give me some more details about this. Thanks.
Great!! You hit the nail right on the head!
I really really appreciate you help, buddy.
It works perfectly well now in both IE 6/7 and Firefox.
Thanks!
Ivan
Is it possible to stop the bouncing effect when it switches images? Do not like the bounce, i tried all the settings but they didnt stp bouncing
Hi Paul,
I assume you’re referring to example 2 ( Banner rotator, enter from left ). If that’s the case, you haven’t tried the transition parameter
( line 41 in downloaded example ). You can set whatever transition effect you like ( ie: transition: Fx.Transitions.Sine.easeOut ). More about transitions here.
Thank you very much
didnt want to play with bits i didnt understand, just changes some number values
but works great, thanks!
Hi
Chaps, can you please help me with this problem that I’ve been struggling with for quite some time.
I’m looking for a Javascript code(Strict-DTD), That could make an array of image elements to scroll
acroll the screen on window open.
Regards,
Mokgele
Hi Mokgele,
Can I ask you to contact me using the contact form? This discussion is strictly related to problems regarding this script. Thanks.
Greetings Constantin
Wonderfull Script.. really cool, I use the sliding image.. is it possible to remove the function that stop the animation when the cursor hover it? I’m a javascript really noob
thank you very much
No parameter for that yet implemented, sorry.
Thank you for your answer.. any chance I can comment something in the JS to prevent it?
thank you again
Yes, in slideitmoo-1.1.js, comment lines from 195 to 202. This should do the trick.
Hi Constantin,
I spoke to you a few weeks back about getting multiple versions of the slider running on one page – I eventually got it working with hard-coding – and then my PC was stolen and all my work lost (!)
So, I’m almost where I want to be again now, but having a couple of issues.
Firstly – http://www.greytrilby.com/smh/books.php – successfully has two hardcoded sliders – except that for some reason the back/forward arrows aren’t appearing – is this CSS related? Can’t see what I’m missing!
Secondly – http://www.greytrilby.com/smh/books_db.php – as far as I can see the code is practically identical to that of books.php, but the script doesn’t work at all – the only difference is that all elements/items have a number on the end of them. The CSS is matching up as far as I can tell, as is the script.
All scripts have had to be added into the head of the page so I can run the php while() loop to generate the id numbers.
I’ve spend nearly 8 hours on this now, and I just can’t see where it’s going wrong – why is the script not running?!
Please help!
DOH!
Can’t believe I missed that!
Thank you so much – working splendidly now!
Hi, great slider, even a newb like me could manage to get it working and customise it through the CSS.
One thing I couldnt figure out though…. the width… I want it to span to the right hand side of this page and include 5 or maybe 6 thumbs… I tried changing this through the JS file, but it already says ‘5′ yet 3 are still showing.
please help
Hi,
There are some problems with the way you try to implement this. First of all, item width. In your CSS you set width on #SlideItMoo_items div.SlideItMoo_element to be 128px with a right margin of 15px. This means that a single element has a width of 143px, not 158px. Second, the slider’s width is automatically set to the number of visible items. This means that if you set item width to 143px and tell it to display 3 items at once, the width will be set by javascript to 143px*3 = 429px + 50px for navigation.
Now, if you want the slider to have 750px and let’s say, display 5 elements at once, you’ll have to set the item width to 750px / 5 elements = 150px. To this, the script will add 50px for the navigation links if you choose to display them. So the total width with navigation displayed will be 800px.
I hope I managed to answer your question. If not, please let me know.
Thanks, I understand what you’re saying, but what I don’t know how to do, is change the number of elements displayed at once.. the JS file says 5, yet only 3 show up? How do I display more than 3, therefor increasing the total width?
Simply change itemsVisible to 5. But don’t do that in the js file. Do it where you create the class instance.
is it possible to apply transition to sliding set of thumbnails? i mean applying the transition to the thumbs container, rather than individual elements within?
this script applies transition to each thumb, sequentially:
var mySlide = new SlideItMoo({
overallContainer: ’slide_outer’,
elementScrolled: ’slide_inner’,
thumbsContainer: ’slide_items’,
itemsVisible:10,
elemsSlide:10,
duration:200,
itemsSelector: ‘.slide_element’,
itemWidth: 54,
transition: Fx.Transitions.Elastic.easeOut,
showControls:1});
thanks
Try grouping the elements inside containers and give parameter itemsSelector the container class instead of elements class. Should work like this.
Thank you for this great script,
Is there a way to move the arrows to centered on the bottom of the container?
Also Is it possible to move over 3 slides on click but when on auto scroll move only 1 slide.
Your the best, I’m so excited about this script.
Germane
Hi,
About the arrows, yes, check the stylesheet. About moving 3 slides on click and just one on auto, currently no. Sounds like a good idea though, when I’ll have the time I’ll try and implement that. Thank you.
How I can display Multiple Scrolls in a page . I have tried the below code
window.addEvents ({
‘domready’: function() {
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls:1,
onChange: function(index){
//alert(index);
}
});
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer1′,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls:1,
onChange: function(index){
//alert(index);
}
});
}
});
and copied SlideItMoo_outer style to SlideItMoo_outer1 , But It is not working
Hi,
Very sorry for the delay, your comment was marked as spam along with other 2 I just found. About multiple sliders, please note that overallContainer, elementScrolled and thumbsContainer are all element ids, they should be unique. In your implementation, only overallContainer is unique, make all 3 unique and everything should be fine.
Thanks much for this script!
Is there a way to have multiple thumbnail rows ? Say, I want to display 6 thumbnails in 2 rows and 3 items in each row.
EXAMPLE:
A B C
D E F
Hi Smith,
Haven’t actually tried this but it should be possible by doing some CSS changes. Basically, if you set thumb element to be a container for 2 thumbnails one in top of the other, the script will treat those containers as actual thumbnails so it should work as expected. Basically, you could stack inside each container as many thumbnails as you need as long as you tell the script that thumbnails are represented by those containers. I hope this makes sense, let me know.
Thanks much, I understand what you’re saying, but can you please send me the sample CSS and JS code for this? Do you want me to do the following? Am I correct?
EXAMPLE:
A B C
D E F
Instead of current structure.
ABC
DEF
Sorry, It looks like editor strips the div tags that I have added in my previous post. Do you want me to have div with id =”slider_element” for the rows instead of single element. Correct?
Please let me know, thanks!
Hi,
Similar error to Ivan (November 12, 2009 at 9:20 am).
Webpage error details
Message: ‘null’ is null or not an object
Line: 58
Char: 5
Code: 0
URI: http://www.idesigntoday.co.uk/index.html
I tried to correct and have this.
window.addEvents({
‘domready’: function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:3,
elemsSlide:3,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 158,
showControls:1,
onChange: function(index){
//alert(index);
}
});
}
});
similar problem to ivan ( ). an error report comes up in IE7
Message: ‘null’ is null or not an object
Line: 58
Char: 5
Code: 0
URI: http://www.idesigntoday.co.uk/
Message: ‘null’ is null or not an object
Line: 39
Char: 3
Code: 0
URI: http://www.idesigntoday.co.uk/scripts/slideitmoo-1.1.js
help!
Apply the same solution I gave to Ivan. You’re using one instance and in your page have all 3 examples.
Hi,
Sorry for the delay. Your comment was marked as spam and just found it today. I see you removed the script from your pages. Do you have an online example somewhere else? Please let me know. Can’t say from what you mentioned what the problem could be.
Hi,
First of all, thank you so much for the script, It works wonderfully well!!
In your demo page, you have multiple sliders in one page and name the id differently. I am trying to do the same, but somehow the scrip only work with the original JS command, here is my code:
window.addEvent(‘domready’,function() {
var mySmoothScroll = new SmoothScroll({ duration:700 }, window);
var myPlaySlide = new SlideItMoo({
overallContainer: ‘SlideItMoo_outer’,
elementScrolled: ‘SlideItMoo_inner’,
thumbsContainer: ‘SlideItMoo_items’,
itemsVisible:4,
elemsSlide:4,
duration:300,
itemsSelector: ‘.SlideItMoo_element’,
itemWidth: 155,
showControls:1,
});
var myWorkSlide = new SlideItMoo({
overallContainer: ‘SlideItMoo_work_outer’, //command doesn’t work after “_work” added to Classes
elementScrolled: ‘SlideItMoo_work_inner’,
thumbsContainer: ‘SlideItMoo_work_items’,
itemsVisible:4,
elemsSlide:4,
duration:300,
itemsSelector: ‘.SlideItMoo_work_element’,
itemWidth: 155,
showControls:1,
onChange: function(index){
alert(index);
}
});
});
I hope someone can help me figure this out, Thank you so much!!
Hi,
I think the porblem is with ids. You said you changed CSS classes. But overallContainer, elementScrolled and thumbsContainer are all element ids, not css classes. I assume this is your problem. If you have all this online somewhere, please post a new comment with the link. If it’s still private, contact me directly from the contact form. Very sorry for my delayed response, your comment for some reason was marked as spam, just noticed it today. Let me know.
this script is just 1A.
I added a linkcontainer to the left, witch highlights the current images, by returning the endingElem instead of currentIndex, witch you can see on
http://kundenserver.decodo.de/surrountec
but is there a way to add an event to them links in the linkcontainer to switch the current Image pack directly by clicking the mentiont link? I mean not to slide to the 3.pack by hitting the left arrow 2 times, but hitting seperate links link1, link2, link3… and directly slide to this target item?
I used this solution on a nother page http://www.phonk-derreporter.de but this was a jquery slider and i’d prefer rather your script with mootools
sorry for my bad english
Well now i solved this problem, but the slider is workin item by item.
I have 16 Items grouped by 4 Items. With the Jump menu you can jump from Items 1-4 to like 9-12. I also added a jump transmition Bounce.easeInOut but this would only bounce at each item not at the whole range of (in this case) 8 items.
So i tried to jump the distance by margin (items*range) this worked very well and looked awsom, but the Slider runs back to the second Item. It has someting to to with the rearange function i couldn’t solve. Maybe you have a cloue about that.
Many thanks from Germany
Dennis
Hi Dennis,
Don’t know if you provided an example page in a previous comment and if so, please do it again. I can’t seem to be able to recall the discussion we had (if any). Sorry for the delay, I’m very busy right now but will do my best to help out.
Later edit: I’m an idiot, you had 2 comments. About what you want to do… can’t say I have a solution. Try playing with elemsSlide. Meaning, after each click there’s a complete event that returns the current index. Using that you can calculate when navigating from the left menu how many items need to be skipped to reach the one you want. For example, if you’re on the first element and when clicking the nav you need to jump to the 5′th, you’ll have to jump 4 items. Hope this makes sense somehow. Let me know.
I am facing a problem using MooTools and the Slimbox.js. Without adding the Scriptmanager which i need to update specific panels, everything works fine. Just if i add the scriptmanager, MooTools itself (slide / acoordion) etc. works fine, just the Slimbox is not working.
Do you have something online? Probably it’s an implementation problem.
I cant see the black background while clicking on the images. how can i make the duration slow while moving th images and look smooth?
1. I cant see the black background while clicking on the images.
I assume this is related to Slimbox. Slimbox is implemented as a demo with this script. It’s the work of another developer ( awesome work by the way ) and information about it can be found here: Slimbox, lightweight Lightbox
2. how can i make the duration slow while moving th images and look smooth?
You have the duration parameter that you can play with.
Hi, thanks for your script, but how can i disable continuous navigationg in the new version? cheers!
Hi Jan,
It’s not possible to disable continuous navigation, if that is what you need you can use the other version. Sorry for this, I can’t seem to be able to make everyone happy, with the last version I had people asking for continuous navigation, with this one you ask me how to stop that
Anyway, give me some more details about what you’re trying to do and maybe I can help in some other way.
thanks for offering support, i just needed the scroller without continuous navigation, the old version seems to do the job just fine … except for the parameter how many elements to scroll
Hi,
I really appreciate your script. It´s just great !!!
Now I am trying to disable autoSlide at runtime via JavaScript and it just won’t work. There is an instance of FlowPlayer (a Flash/JS based video player) on the page and once someone hits play there, the SlideItMoo image slider is supposed to stop ‘auto sliding’, and when that person hits pause or the video ends, I´d like it to resume ‘auto sliding’.
Is there a way to get this running ? Something like SlideItMoo_object.autoSlide = false | true ?
Thanks a lot !
Let’s assume you have a single instance on page
var mySlideItMoo = new SlideItMoo({….});
Let’s say you have 2 triggers on page: one with id stop and one with id resume. To stop the slider when stop clicked, do this:
$(’stop’).addEvent(‘click’, function(){
$clear(mySlideItMoo.autoSlide);
});
… and to start it again when resume clicked:
$(‘resume’).addEvent(‘click’, function(){
mySlideItMoo.startAutoSlide();
})
That should do it.
Hi.
Wonderful slider tool. Thanks for all the work you’ve put into it.
My question is – is there a way to group the images/icons on the slider. So for example the first 3 images belong to a certain group, say Honda (the images might be specific models of a Honda). The next three images are a different group, say Toyota.
What would be a possible approach to accomplish this.
The slider works with containers. If you take a look at the third example and change the content inside each slide with related thumbnails for a certain car model ( in your case ) you’ll accomplish what you asked about. I hope this answers your question. If not, come back with more details.
Leave a comment