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
Related posts
Was this useful? Show your support.
285 comments
Hello
Is it possible too see an Example where only the Demo3 from your Demosite is running ?
I treid to integrate that in my Files…It works, but i get some Problems with IE.
Message: ‘null’ is null or is not an object
Line: 39
Character: 3
Code: 0
URL: website/script/slideitmoo-1.1.js
There is also an Example from >”Ivan”…But if i change this like “Constantin” said…it is not running anymore
Now it looks like 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);
}
});
},
‘load’: function(){
/* info rotator example */
new SlideItMoo({overallContainer: ‘SlideItMoo_info_outer’,
elementScrolled: ‘SlideItMoo_info_inner’,
thumbsContainer: ‘SlideItMoo_info_items’,
itemsVisible:1,
itemsSelector: ‘.info_item’,
itemWidth:233,
showControls:0,
autoSlide: 3000,
transition: Fx.Transitions.Sine.easeIn,
duration: 1800,
direction:1});
}
});
Greetings from Switzerland
CB
Hi CB,
I promised long time ago I’ll do this ( a file for each example ). Please try later today to download the example again, I’ll update the files today. Oh, and Constantin is me, and more funnier, CB too ( Constantin Boiangiu )
Later edit:
It’s done. Try and download the script again. Remember to clear cache before doing so.
Ηι.Ι haven’t found an example of how to add two different moo slides in the same page with
different images in each slide.Is this possible and how?
Thanks in advance
Yes, it is. Use the same CSS for each one but change ID. After that, simply create 2 different instances of SlideItMoo for each of your sliders.
Hello from Austria,
this script is one of a kind. It provides almost boundless possibilities. Many thanks for that!
Kind regards, Markus
Hi Markus,
Many thanks, happy to hear you find this script useful. About the “boundless possibilities”, I’m thinking to start a gallery to showcase various implementations for this script. If you come up with something interesting, please let me know.
Thank you, Constantin
I am thinking to use it as a kind of content-slider (e.g. for featured articles) and as image-viewer on my personal website. I’ve been very busy the last weeks, so I haven’t had time to do this yet. If i’m done with that, i will post a link.
Kind regards, Markus
[...] 20. SlideItMoo [...]
Hi Constantin
Thanks for the good job. It works well in IE, Firefox, however, in Opera 10 when you click on a thumb the pictures dont appear. A window-container appears at the right size of the picture expected but not the picture itself. Any idea to solve this? Cheers
Hi Erik,
After you click on a thumb, it’s Slimbox’s turn. Slimbox is a different script, a lightbox script actually that you can find here: Slimbox. You might find answer to your question there.
Hi Constantin,
Thanks for your answer. It seems that it’s a problem with lightbox and not the slide. I still don’t know where does it come from but I try to fix it. Cheers
Hi,
Is there a way that the slider can be configured dynamically? What I mean is that once the slider is loaded with initial images, I want to be able to:
1. Change the number of images/elements inside the div tags based on user selection (i.e. dropdown)
2. Stop the auto slide if number of new images number visible (fixed at 5)
3. Resume the auto slide if number of new images > number visible (fixed at 5)
4. Use SlideItMoo with Update Panel in .NET
Thanks
Hi Vince,
How exactly do you see that happening? I’m asking because I assume you don’t want the page to reload. If page reload is an option, based on what you put inside the slider, it will work. Meaning, if after selecting a certain option from our dropdown the page reloads and the HTML gets updated accordingly with new images and number of images, the script will run based on that updated content.
Hi Constantin,
Yes, it will work if the whole page is reloaded. But here I am talking about partial page reload/refresh, kind of AJAX calls. Similar to how the CAPTCHA area (at the bottom of this comments form) is updated when you click its reload button.
You probably know .NET? In .NET, there are controls like Update Panels where only a portion of the page is reloaded. What I want to do is having the images/divs inside an update panel, once user specifies what/how images are displayed, that update panel will be updated via AJAX call. Based on the new images, I would like to re-initialize the slider. If there are fewer images than the number of slides visible, I want to stop the auto slide and hide the control buttons. If there are more images, I would like to resume the auto slide and show the control buttons.
I would like to be able to do these:
1. SlideItMoo.stop(); //stop the slider from auto sliding, back and forward will still work if visible
2. SlideItMoo.reload(); //load the slider with images (could be newly updated or old ones) from the container
3. Anything else needed to allow SlideItMoo to resume its process based on options already set (autoSlide, duration, direction…)
Thanks
Hi Vince,
I see now. Stop method could be implemented. For update though, it’s a different story. Currently, the script takes your current HTML markup and works on that. It doesn’t generate anything, it simply modifies what’s already in your page. It could be done but it will need time to develop and test. A good idea though, you got me thinking and probably it will get implemented but I can’t do it right now so if you need this ASAP, I’m sorry to say but I’m not available for the moment. Anyway, thanks for the suggestion, I’ll see when I get the time to do it and e-mail you when it’s done if you want me to.
Hey Constantin,
Yeah, if you have it updated, just shoot me an email.
Thanks for a great tool!
Hello, Is there a way to disable continuous scrolling in v1.1? Thanks!
Yes, set autoSlide to false and it should work.
Sorry, I didn’t mean the auto scrolling. What I’m referring to is say you slide to the last item in a list, I would like it to stop without looping back around to the first item.
Thanks again for your help.
Sorry but this is not possible. At least, not yet.
I’ve implemented a little modification that allow the fwd and back controls to be parametric.
Controls class names are now parameters and also the positioning of the controls are leaved to the CSS (commented out the dinamic style change in setContainersSize that increment the container dimension to give room for controls).
This modification give to the designer the ability to position controls where he need.
If you whant I can send my code … but I’m pretty sure you can do better
Thanks for this suggestion. I totally agree with you about the navs so I implemented this into the script.
Is there any easy way to add the forward and back button functions from Example 1 to the banner rotator (Example 2)?
Yes, set display navigation parameter to true.
Also, is there any way to pause the rotation after an image is clicked? (I’m using Slimbox to play a video and the continued rotation drains CPU and makes the video lag)
Currently no, that’s not an option.You can use startAutoSlide() and stopAutoSide() to start and stop the slider.Sorry, one more question. Any pointers as to why it might work in Safari but not Firefox?
http://www.lightandheat.net
Check the code in your page where you create the slideitmoo instance. You have a syntax error after line direction:-1});
Great script! Congrats!!
But the only thing that i miss is the option to disable the “continuous navigation”.
Moving to the last item in a list, I want to stop without looping back around to the first item.
this can be changed ?
Many Thanks!
Hi Jack,
Thanks. About disabling continuous navigation, it can’t be done. The first version of this script did this, this one doesn’t.
Great script!
Wondering how to add numbers for each banner so you can jump ahead or back to any banner instead of just next/prev navigation. Also this would give users a preview of how many banners there are to see. Is this possible?
Also wondering, will this work on IE6?
First question: not possible, sorry. For second question ( IE6 related ), haven’t tested with these new changes in IE6, but it worked just fine and the updates I made aren’t that heavy. If someone has the chance to test it and report back, I’ll appreciate the effort.
Hi Constantin,
Just want to say Thanks! Thanks a lot. You’re doing a great job. Keep it up.
Regards,
Raman Sharma
Hi., it’s an excellent script, Congratulations.
I’m trying to use this script in a website along with an accordion-tabs from jquery but it give me some problems, I think that one of the script of mootools is causing that behavior, but I don’t know in wich part exactly.
Did you know something about that?
Any suggestion?
These 2 frameworks conflict with each other. You can either use jQuery.noConflict() or MooTools dollar safe. For MooTools, you’ll probably have to download Moo Core again.
Thank you very much for your suport, it really save my life.
The option that I use was JQuery.noConflict and work perfect,.
Thanks again and Congratulations.
Glad to be of help and thank you for using this script.
Hi – wondering if it is possible to get or post a link for the source code for this example?
http://www.php-help.ro/examples/slideitmoo_1.1_multiple/
Many thanks.
Or maybe the source for this one? It would really help me to see how you have inserted multiple instances of the banner rotator. I just can’t seem to get that to work! I’ve made sure the overallcontainer, scrolled element and thumbs container are unique as is the items selector in the JS.
http://www.php-help.ro/examples/slideitmoo_1.1/
Hi Dan,
You can simply see the page source and get everything. Anyway, I think it’s better if you upload what you’ve done so far somewhere online and post the link here so I can take a look at it and tell you what’s wrong. It will work quicker this way.
Hi Constantin,
You removed the currentElement option from v1 to v1.1 – I notice in the initialise function you now set currentElement = 0 (line 42) – I have tried playing with this option but things get messed up – is it possible to recreate this option?
I’ll have to take a look. Sorry for the delay of my answer, Akismet thought your message was spam and I just noticed it.
Later edit:
This changed from currentElement to startIndex. See the horizontal_carousel.html example from the download files.
In your horizontal_carousel.html example, I added
autoslide: 5000,
transition: Fx.Transitions.Back.easeIn,
It caused the slides to autoslide, however, it will not obey the 5 seconds as I specified. Is it possible that your implementation has a small bug in it? If I change
itemsVisible: 1
elemsSlide: 1
Everything is okay again.
Error solved, sorry about this. As a note, this was happening because of an undefined value I haven’t noticed when I did the last update. Also, the resizing error got solved too, same problem there as the one above.
One more thing, when I change the number of slides in horizontal_carousel.html from 3 to something else, it does not do the autoresizing, I found the reason to be in
setContainersSize, this.options.navs.width is not defined.
I haven’t figured out on how to change that, any help would be greatly appreciated.
You’re right. Don’t know how I missed that but they will get fixed in a couple of days. Thank you for reporting these errors. If you find anything else to be wrong with this script, please let me know. As a note, after I make the updates, if you like I can contact you so you can get the new files. Let me know and thanks again.
Yes, please.
Is it possible to have slider verticle?
Yes, check the examples. There’s a file in there called vertical_carousel.html
I really like the samples and they work well, they do exactly what I was looking for.
However I have been playing around the horizontal carousel sample, for some reason when I change or add images, it will display fine on the first load, but then if I hit F5, the images I have changed will be broken.
Any idea why?
Can’t really understand what you’re trying to say. Can you please upload an example somewhere online and post the link here? Thank you.
It was because I was not running the page on a webserver, just out of a directory.
I moved to my webserver and the problem no longer exists.
Now I have been experimenting with different size images(all the same, but not 128×128, actually 141×200), trying to make it work correctly.
It seems as tho i need all the sizes just right for it show and slide correctly. I have been trying to workout the formulas required for each size starting with the image width (i):
itemWidth = i + 30
innerWidth = (itemsVisible * itemWidth)
outerWidth = inner + backWidth + forwardWidth
But using these sizes, I somehow get 4.5 images shown, even tho I have only 3 set in itemsVisible.
Also when sliding the movement is not smooth, but jerky.
Can I see this somewhere? Can’t really say why you’re experiencing this.
Hi Constantin, I would like to load multiple sliders in a page. However not all in one shot.
1. First i load the first slider (which works pretty good)
2. On click of any of the image in the first slider, i would like to display a second slider with new images on it – again using ajax. Dynamically inject the div here.. based on the image in the first slider 2nd slider needs to update the images dynamically. Is it possible using the your script. i am trying to do with 1.0 version, it is not working. When i try to inject the div, its is not dipslaying the second slider properly(not formated). Please let me know if you have any advices on this one.
Well, if you say you want to use Ajax, on click, have it return the whole display for the second slider. After the response gets loaded, start a new SlideItMoo instance for the newly injected HTML and you’re done.
Thanks constantin, it worked and thanks for your nice tool..
Is there a way to stop the sliding when we reach the last element in the slider or disable to the right/left arrow once we reach the last element in the slider?. I remember first version atleast stop sliding when it reaches the last element and i dont see that in new version(1.1).
Sorry Praveen, that’s not available anymore. Yes, the first version worked like that but that version was developed differently. This one is continuous because people asked for that. I hope you can understand me when I say that I do my best to make everyone happy but can’t always be successful.
Hi Constantin.
Thanks again for this great script.
I have a problem, I had working perfectly the horizontal carousel until yesterday, when I was checking all the work to ensure that all is complete, but for some reason the carousel is the only thing that is not working. The question is, how can i show my code? I really don’t know where is the problem and I checked everything (I guess…) that had change recently.
Sorry for all the troubles.
Forget all that I said, I found the problem.
For some reason it was missing a css file for the carousel.
Sorry for bother you Constantin, and thank you so much for your support
Hi!
Is there a way to add more control options like up,slideTo1,slideTo2,slideTo3,down?
Can you please be a little more specific?
I have 5 elements and slideItMoo lets me put Forward and Backward buttons to control the slide.(control:1)
And i want more buttons that lets me slide on a specific element.
Not control:1, showControls:1
Oh, I got it now. Sorry, you can’t do that. All you can do is start with a specific element or slide multiple elements. Sorry about this.
This is exactly what ive been after, i just need to do 1 thing and i havent figured it out. Can i change the amount of rows visible? I want to have say 2 or 3 rows, they will still all scroll at once, just rather then 1 row, i need to show more images. Thanks!
Hi Dexter,
No, you can’t, but you don’t have to. Let’s take the horizontal carousel example. There, you have outer, inner and items containers. Inside #SlideItMoo_items you have each element ( .SlideItMoo_element ). In that example, each element displays a single thumbnail but the thing is that you can put in there whatever you want. For example, 3 thumbnails displayed one on top of the other
You’ll only have to do some CSS styling to fit everything in and you’re done. If you need more info about this, let me know.
Leave a comment