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.
654 comments
Dear,
I want say if could scroll the image on two row instead only one.
Thank you and I hope I can do this.
Yes you can. To do this, put 3 under elemsSlide. From the above article:
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.
im trying to put the carousel on my website but i keep getting:
Fatal error: Smarty error: [in header.tpl line 17]: syntax error: unrecognized tag: ‘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: 202px, itemHeight: 159px, showControls:1, startIndex:5 (Smarty_Compiler.class.php, line 446) in /home/ktw016/public_html/smarty/Smarty.class.php on line 1142
is there a way to fix this? please help
well i was able to get rid of the syntax error..its because of the { since my site uses smarty templates.
but now i dont think the javascript is working..and when i click on the next or previous buttons, the slider doesnt scroll..did i set everything up correctly?
please tk a look at my site: kcmoolah.com/cash
i really need to get this working and any help would be greatly appreciated.
Yes, in Smarty you need to use {literal}{/literal} to make JavaScript code containing curly brackets. Now, about the script not working, it’s because you have an error (functions not closing correctly after you deleted the code you don’t need). You should have something like this:
window.addEvents('domready': function(){
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:5,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5,
onChange: function(index){}
});
}
);
As a note, when you comment here asking for help there’s no need to bother to e-mail me too. I always answer comments and by commenting you can help other people that have the same problem as you do. Cheers and thanks for using this script in your pages.
thanks for the answer!!
so i just tried that, but it still seems like it doesnt work. can you look at my code and see if i did anything wrong? maybe i set it up wrong somehow?
Right, mine is wrong too. This is how it should be:
window.addEvents({'domready': function(){
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:5,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5,
onChange: function(index){}
});
}
});
it still doesnt work =/
do you think i set the path to scripts correctly?
i placed the mootools-1.2.1-core.js, mootools-1.2-more.js and slideitmoo-1.1.js in my public_html so under is the path something like this:
im so confused..idk what im doing wrong =( thanks for your help though!
Wrong path for all script files, they all return 404. Just remove from path folder public_html and it will work. That folder is the root folder of your web server, you don’t need to put that in URL path to files.
Is this a wordpress website? If so, I also developed a plugin for slideitmoo, it’s here: SlideItMoo wp plugin
so like this?
its still not working. my homepage is a wordpress website, but not the prize websites, which is why im trying to get your slider to work because i want the prize websites to look similar to my homepage.
oops it wasnt showing
script language=”javascript” type=”text/javascript” src=”http://kcmoolah.com/mootools-1.2.1-core.js”
script language=”javascript” type=”text/javascript” src=”http://kcmoolah.com/mootools-1.2-more.js”
script language=”javascript” type=”text/javascript” src=”http://kcmoolah.com/slideitmoo-1.1.js”
nm, i got it!! thanks for your help by the way! your awesome!
Hello.
Last version of image slider don’t works if there is two sliders on a page.
The previous version worked well, but latest version is much better.
Please advise. Maybe I’m doing something wrong.
Even tried to download your example and making second slider inside it. Same thing. First one works, second one not working. I checked everything for several times.
I can upload my test pages if required.
A test page would be great. Put it somewhere online and I’ll take a look.
The script doesn’t work with mootools 1.3 :S
I have this error :
(Element.Styles[g] || “@”).split is not a function
I know, I’ll look into it. When will that happen, I can’t say for sure.
Is there a solution for this issue ? It seems happend with the compatibility of mootools 1.3 core. I say that because with the js file on the download section, there is no issue (and you don’t use the compatibility).
I hope my english is not too bas (I’m french) :)
You’re right, this is happening when you use Moo core 1.3 with compatibility. For the moment I can’t really tell what’s happening. Will try to figure this out and get back to you.
Up !
have you got the time (or better a solution) for that issue ?
Thanks a lot
Try it now and let me know. Sorry for the delay.
I want this slider to open the image like fancybox is it possible?
you have doen that in your demo section
Yes, it is. You need to apply the lightbox on the thumbnails. In my demo I used Slimbox. Take a look at how to install Slimbox and you’ll get the picture.
hello,
is any solution for banner slide with mootools 1.3?
thanx
Not yet, sorry.See download section.
thanks i made it…..but it does not work in chrome correctly….alll other browsers are fine
and can you tell me please how to resize the div container?
this is the url: http://mhdali.net/test/
Hi,
I’m trying to use this with slimbox in google chrome but my images wont load, but on your demo they do work with slimbox in chrome.
Any idea why this is? I’ve tried using your “common” and “load” scripts but it doesn’t help.
Please upload a demo somewhere online.
It’s a website I’ve made for someone else so once it’s live and it still doesnt work I’ll comment back here.
sMoo.stopAutoSlide();
This isn’t working—I thought this was pretty straight forward, what am I missing?
From your description I can only assume the problem is with the MooTools 1.3 version. Should work now, try it again. Didn’t noticed that with 1.3 $clear isn’t available anymore. Made the change and it looks OK now.
[...] SlideItMoo [...]
I’m working on navigation buttons for the slider, and they are functioning…however it appears that they must be within the SlideItMoo_info_outer DIV in order to work. That would be pretty much OK if they didn’t affect the layout of the slider, but for some reason even though I make them into absolutely positioned DIVs they still cause the slider to expand. Is there a reason that absolute positioning won’t work in the outer div?
Or more importantly, is there another way to call JS functions to make the slider move?
Thanks,
Phil
Thanks, i figured it out. this code on line 125 of the expanded source causes the slider to add the width of the nav buttons. However, if people do not want the nav buttons to take up space (in my example they float over the image), you can comment out the code as shown below:
var navsSize = 0;
if( this.options.showControls ){
var s1 = this.fwd.getSize();
var s2 = this.bkwd.getSize();
//var navsSize = s1.x+s2.x;
}
Maybe in a future version you could allow ’showControls’=2 to cause nav to display and function but not widen the container? if anyone wants to see my usage of the nav it is here http://www.thoughtclique.com (give me an hr or 2 to finish the site :P )
thanks again Constantin. Very impressive work.
Phil
This script really needs upgrades. Unfortunately at this moment I’m very busy with a WP plugin but as soon as I get that done my full attention will turn to the scripts here. Thanks for the heads up and for the nice words.
Hi, first of all i’d like to say that SlideItMoo is a great plugin! I’ve got a question tho…Is it possible to make the slider stop when it goes to the last element or the first element? I want to make it stop cycling the same products
The is a way to stop the slider on the last element. The script has an onChange event that you can use for this purpose. Here’s a short example on how to use it:
var mySlider = new SlideItMoo({... various params here...
onChange: function(index){
if(index == mySlider.elements.length-1){
mySlider.stopAutoSlide();
}
}
});
not using autoslide, how can you get the slide to use slide across the items defined. say if they are 10 items, the slide will stop going forward at 10 and not go go back past item 1? thx!
I think I have a working variation… can you please let me know if this is a valid solution? many thanks!
in the .js file, I added a new continuousNavigation parameter to the options:
Implements: [Events,Options],
options: {
….
….
startIndex: null,
continousNavigation: true /* allow elements to be continuous */
/*onChange: $empty*/
then in the slide function added:
slide: function( direction ){
if(this.started) return;
this.direction = direction ? direction : this.direction;
var currentIndex = this.currentIndex();
/*only slide outside initial scope if continouse navigation enabled */
if(!this.options.continousNavigation){
if(direction = -1 && currentIndex >= (this.totalElements-1)) return;
if(direction = 1 && currentIndex > 1) return;
}
and useage:
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: 150,
showControls:1,
startIndex:0,
continousNavigation: 0,
onChange: function(index){}
});
}
});
Hmm, this is a good idea. Have you tested it? Can you place an example somewhere online?
hello!
Somehow I’m not able to put more than one sliders on one page.
I copied SlideItMoo with the exact same parameters, but it’s not working?
BTW: Really, really great plugin!
THX, Max
window.addEvents({
‘domready’: function(){
new SlideItMoo({here you put your first slider parameters});
new SlideItMoo({here you put your second slider parameters});
}
});
Hi!
Great slider!
Could you please advice on the usage of the resetAll() functions. I’m having problems calling it…
Thanks a lot!
Max
Should work something like this:
var mySlider = new SlideItMoo({...});// do the reset when element #something is clicked
$('something').click(function(){ mySlider.resetAll(); })
Hello,
actually I’m having problems when assigning the pictures on-the-fly via AJAX.
Could you help me with this please?
Thx, I really appreciate it!
Max
Let’s say you use json request. This should do the trick:
...var mySlider = new SlideItMoo({...});
var jsonRequest = new Request.JSON(url:'some_url.html', onSuccess(response){
// inject or remove elements here based on whatever response you get
mySlider.resetAll();
})
If you still have problems, make an online demo and leave the link here.
actually found a bug on the slide logic, should be:
if(!this.options.continousNavigation){
if(direction = -1 && currentIndex >= (this.totalElements-1)) return;
if(direction = 1 && currentIndex >= (this.totalElements-2)) return;
}
I’ve installed your mootools plugin in a joomla module. Everythings works GREAT…. But i’ve been having 1 issue.
If you hover over an element while it is in motion the slider starts bugging. the onhover stop event no longer tiggers it just keeps going, the next and back buttons get overrided but the auto run. and some times it will scroll more than 1 group at a time. it might slide 2-3 groups before stopping.
Once the bug is triggered it just stays bugged until the page is refreshed.
I managed to reduce the error by removing margins and turning them into paddings. i had a margin space between my 2 elements at first. if you left the mouse in between it would trigger this issue with margin. the padding helps.
any ideas how i can solve this? thanks in advance for the help!!
Can I see this online? Can’t tell what’s going on.
http://jerenovici.net/ bottom on the page the product scroller 2 elements at a time
oh and is it normal that when i hit the bck or next button the scroller would switch direction.
the autoscroll uses the same direction that was used last basicly.
how do i prevent this
The switching direction is inconsisten. It doesnt always switch directions… the main page (the one i linked) seems to not have that issue as often as a diffrent page witch has 3 scrollers instances running. i can’t show that page yet its still on my dev server. (progressive site launch)
but the page with 3 scrollers have that problem like 100%. you hit back or next and the direction for the auto play is changed to the last direction used. I may be able to show you this soon… like monday possibly if i still have the issue then. Its a minor bug but i need it fixed.
im pretty much using the same code on the main page and this 3 scroller page.
Thanks again for your time, very much appreciated.
I’m trying to use the continousNavigation option, but don’t works fine.
Certainly stop the scroll when you’re on the first element, but don’t slide the correct number of elements (15 in my example) and add some elements to the end (showing the first ones again) until get 15 elements.
Somebody know how to use this fantastic option by JH?
P.D: Sorry my poor english ;-)
After a lot of hours, i have the solution:
if(!this.options.continousNavigation){
if(direction == -1 && currentIndex >= (this.totalElements-1)) return;
if(direction == 1 && currentIndex >= (this.totalElements-this.options.elemsSlide+1)) return;
}
And works fine ;-)
Thank’s a lot for all!
/**
SlideItMoo v1.1 – Image slider
(c) 2007-2010 Constantin Boiangiu
MIT-style license.
Changes from version 1.0
- added continuous navigation
- changed the navigation from Fx.Scroll to Fx.Morph
- added new parameters: itemsSelector: pass the CSS class for divs
- itemWidth: for elements with margin/padding pass their width including margin/padding
Updates ( August 4th 2009 )
- added new parameter ‘elemsSlide’. When this is set to a value lower that the actual number of elements in HTML, it will slide at once that number of elements when navigation clicked. Default: null
- added onChange event that returns the index of the current element
Updates ( 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()
**/
var SlideItMoo = new Class({
Implements: [Events,Options],
options: {
overallContainer: null,/* outer container, contains fwd/back buttons and container for thumbnails */
elementScrolled: null, /* has a set width/height with overflow hidden to allow sliding of elements */
thumbsContainer: null, /* actual thumbnails container */
itemsSelector: null, /* css class for inner elements ( ie: .SlideItMoo_element ) */
itemsVisible:5, /* number of elements visible at once */
elemsSlide: null, /* number of elements that slide at once */
itemWidth: null, /* single element width */
itemHeight: null, /* single element height */
navs:{ /* starting this version, you’ll need to put your back/forward navigators in your HTML */
fwd:’.SlideItMoo_forward’, /* forward button CSS selector */
bk:’.SlideItMoo_back’ /* back button CSS selector */
},
slideVertical: false, /* vertical sliding enabled */
showControls:1, /* show forward/back controls */
transition: Fx.Transitions.linear, /* transition */
duration: 800, /* transition duration */
direction: 1, /* sliding direction ( 1: enter from left/top; -1:enter from right/bottom ) */
autoSlide: false, /* auto slide – as milliseconds ( ie: 10000 = 10 seconds ) */
mouseWheelNav: false, /* enable mouse wheel nav */
startIndex: null,
continousNavigation: true
/*onChange: $empty*/
},
initialize: function(options){
this.setOptions(options);
/* all elements are identified on CSS selector (itemsSelector) */
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements 0 && this.options.startIndex < this.elements.length ){
for( var t = 1; t this.options.itemsVisible )
this.startAutoSlide();
},
/* resets the whole slider in case content changes */
resetAll: function(){
$(this.options.overallContainer).removeProperty(’style’);
$(this.options.elementScrolled).removeProperty(’style’);
$(this.options.thumbsContainer).removeProperty(’style’);
this.stopAutoSlide();
if( $defined( this.fwd ) ){
this.fwd.dispose();
this.bkwd.dispose();
}
this.initialize();
},
/* sets the containers width to leave visible only the specified number of elements */
setContainersSize: function(){
var overallSize = {};
var scrollSize = {};
var thumbsSize = {};
if( this.options.slideVertical ){
//overallSize.height = this.options.itemsVisible * this.elementHeight + 50 * this.options.showControls;
scrollSize.height = this.options.itemsVisible * this.elementHeight;
thumbsSize.height = this.totalElements * (this.elementHeight + 10);
}else{
/* if navigation is enabled, add the width to the overall size */
var navsSize = 0;
if( this.options.showControls ){
var s1 = this.fwd.getSize();
var s2 = this.bkwd.getSize();
var navsSize = s1.x+s2.x;
}
overallSize.width = this.options.itemsVisible * this.elementWidth + navsSize;
scrollSize.width = this.options.itemsVisible * this.elementWidth;
thumbsSize.width = this.totalElements * (this.elementWidth + 10);
}
$(this.options.overallContainer).set({
styles : overallSize
});
$(this.options.elementScrolled).set({
styles : scrollSize
});
$(this.options.thumbsContainer).set({
styles : thumbsSize
});
},
/* adds forward/back buttons */
addControls: function(){
if( !this.options.showControls || this.elements.length 1), calculate the ending element */
if(!this.options.continousNavigation){
if(direction == -1 && currentIndex >= (this.totalElements-1)) return;
if(direction == 1 && currentIndex >= (this.totalElements-this.options.elemsSlide+1)) return;
}
if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
this.endingElem = this.currentElement;
for(var i = 0; i = this.totalElements ) this.endingElem = 0;
if( this.endingElem = this.totalElements-1 ? 0 : this.currentElement + this.direction;
break;
/* backwards */
case -1:
elemIndex = this.currentElement == 0 ? this.totalElements – 1 : this.currentElement + this.direction;
break;
}
return elemIndex;
},
/* starts auto sliding */
startAutoSlide: function(){
this.startIt = this.slide.bind(this).pass(this.direction|1);
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
this.elements.addEvents({
‘mouseenter’:function(){
$clear(this.autoSlide);
this.isRunning = false;
}.bind(this),
‘mouseleave’:function(){
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
}.bind(this)
})
},
/* stops auto sliding */
stopAutoSlide: function(){
$clear(this.autoSlide);
$clear(this.startIt);
this.isRunning = false;
this.elements.removeEvents();
}
})
Hi,
may you can help:
I use as thumbnail:
some text and stuff
and config:
…
itemsSelector: ‘.thumbnail’,
…
Slider works fine, but stops TWICE a thumbnail, first on .thumbnail and second on the inner-Div.
I expected the .thumbnail as exact on item. What can I do?
w/regards
Michael
sry, the HTML-Code was deleted, look here to see, what I mean.
http://212.223.182.183/index.php/orthopaedie-37.html
w/regards
Michael
From what I see you’re using version 1.0 of this script. The problem you have is because you placed 2 anchors inside each thumbnail div. The script (the version you’re using) selects all anchor elements from your gallery container and uses them for sliding the content. Try to remove one of the links and leave only a single one (preferably the one on your image) and see what happens. Also, I would suggest that you upgrade to version 1.1 (available above, before comments section).
ok, found the problem, version was wrong, now with 1.2 there´s a new problem, the slide automatically goes to autoSlide after the first click on forward-button. It never stop, even autoSlide to 0 or to 2000 makes no difference.
window.addEvent(‘domready’, function() {
sl=new SlideItMoo({itemsVisible:4,
overallContainer: ‘gallery_container’
thumbsContainer: ‘thumbs’,
elementScrolled: ‘thumb_container’,
itemsSelector: ‘.thumbnail’,
showControls: 1,
elemsSlide:1,
duration:400,
transition: Fx.Transitions.Bounce.easeOut
});
});
Can you place a demo online?
Sure, here you are:
http://212.223.182.183/index.php/orthopaedie-37.html
The version you’re using is an earlier one. It has a bug when you set elemsSlide to 1. Try to download the latest version from above and replace the one you have with this one.
Hi, no way, now it says: Error: this.fwd is null
Kind of complicated…
OK, navigation-buttons must added by hand now and this stuff:
navs:{
fwd:’.SlideItMoo_forward’,
bk:’.SlideItMoo_back’
}
has to be added to configuration. Works now.. thanks a lot
w/regards
Michael
Yes, had to make those two buttons optional because users requested that. Glad to hear you managed to make it work. If you need help with anything else, let me know.
I found a little problem with the continousNavigation :-(
I’ll try to repair it as soon as possible and I’ll publish the full code again ;-)
If somebody what to help me, the problem is get when you go to the end of elements, go back to the first one, and when you try to go to the next group of elements, in my case 15 by 15, the slider goes to the last one.
Thanks a lot for all.
The solution:
if(!this.options.continousNavigation){
if(direction == -1 && currentIndex >= (this.totalElements-1) || direction == 1 && currentIndex >= (this.totalElements-this.options.elemsSlide+1))
{
this.endingElem = null;
return;
}
}
Full code:
/**
SlideItMoo v1.1 – Image slider
(c) 2007-2010 Constantin Boiangiu
MIT-style license.
Changes from version 1.0
- added continuous navigation
- changed the navigation from Fx.Scroll to Fx.Morph
- added new parameters: itemsSelector: pass the CSS class for divs
- itemWidth: for elements with margin/padding pass their width including margin/padding
Updates ( August 4th 2009 )
- added new parameter ‘elemsSlide’. When this is set to a value lower that the actual number of elements in HTML, it will slide at once that number of elements when navigation clicked. Default: null
- added onChange event that returns the index of the current element
Updates ( 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()
**/
var SlideItMoo = new Class({
Implements: [Events,Options],
options: {
overallContainer: null,/* outer container, contains fwd/back buttons and container for thumbnails */
elementScrolled: null, /* has a set width/height with overflow hidden to allow sliding of elements */
thumbsContainer: null, /* actual thumbnails container */
itemsSelector: null, /* css class for inner elements ( ie: .SlideItMoo_element ) */
itemsVisible:5, /* number of elements visible at once */
elemsSlide: null, /* number of elements that slide at once */
itemWidth: null, /* single element width */
itemHeight: null, /* single element height */
navs:{ /* starting this version, you’ll need to put your back/forward navigators in your HTML */
fwd:’.SlideItMoo_forward’, /* forward button CSS selector */
bk:’.SlideItMoo_back’ /* back button CSS selector */
},
slideVertical: false, /* vertical sliding enabled */
showControls:1, /* show forward/back controls */
transition: Fx.Transitions.linear, /* transition */
duration: 800, /* transition duration */
direction: 1, /* sliding direction ( 1: enter from left/top; -1:enter from right/bottom ) */
autoSlide: false, /* auto slide – as milliseconds ( ie: 10000 = 10 seconds ) */
mouseWheelNav: false, /* enable mouse wheel nav */
startIndex: null,
continousNavigation: true
/*onChange: $empty*/
},
initialize: function(options){
this.setOptions(options);
/* all elements are identified on CSS selector (itemsSelector) */
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements 0 && this.options.startIndex < this.elements.length ){
for( var t = 1; t this.options.itemsVisible )
this.startAutoSlide();
},
/* resets the whole slider in case content changes */
resetAll: function(){
$(this.options.overallContainer).removeProperty(’style’);
$(this.options.elementScrolled).removeProperty(’style’);
$(this.options.thumbsContainer).removeProperty(’style’);
this.stopAutoSlide();
if( $defined( this.fwd ) ){
this.fwd.dispose();
this.bkwd.dispose();
}
this.initialize();
},
/* sets the containers width to leave visible only the specified number of elements */
setContainersSize: function(){
var overallSize = {};
var scrollSize = {};
var thumbsSize = {};
if( this.options.slideVertical ){
//overallSize.height = this.options.itemsVisible * this.elementHeight + 50 * this.options.showControls;
scrollSize.height = this.options.itemsVisible * this.elementHeight;
thumbsSize.height = this.totalElements * (this.elementHeight + 10);
}else{
/* if navigation is enabled, add the width to the overall size */
var navsSize = 0;
if( this.options.showControls ){
var s1 = this.fwd.getSize();
var s2 = this.bkwd.getSize();
var navsSize = s1.x+s2.x;
}
overallSize.width = this.options.itemsVisible * this.elementWidth + navsSize;
scrollSize.width = this.options.itemsVisible * this.elementWidth;
thumbsSize.width = this.totalElements * (this.elementWidth + 10);
}
$(this.options.overallContainer).set({
styles : overallSize
});
$(this.options.elementScrolled).set({
styles : scrollSize
});
$(this.options.thumbsContainer).set({
styles : thumbsSize
});
},
/* adds forward/back buttons */
addControls: function(){
if( !this.options.showControls || this.elements.length = (this.totalElements-1) || direction == 1 && currentIndex >= (this.totalElements-this.options.elemsSlide+1))
{
this.endingElem = null;
return;
}
}
/* if multiple elements are to be skipped (elemsSlide > 1), calculate the ending element */
if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
this.endingElem = this.currentElement;
for(var i = 0; i = this.totalElements ) this.endingElem = 0;
if( this.endingElem = this.totalElements-1 ? 0 : this.currentElement + this.direction;
break;
/* backwards */
case -1:
elemIndex = this.currentElement == 0 ? this.totalElements – 1 : this.currentElement + this.direction;
break;
}
return elemIndex;
},
/* starts auto sliding */
startAutoSlide: function(){
this.startIt = this.slide.bind(this).pass(this.direction|1);
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
this.elements.addEvents({
‘mouseenter’:function(){
$clear(this.autoSlide);
this.isRunning = false;
}.bind(this),
‘mouseleave’:function(){
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
}.bind(this)
})
},
/* stops auto sliding */
stopAutoSlide: function(){
$clear(this.autoSlide);
$clear(this.startIt);
this.isRunning = false;
this.elements.removeEvents();
}
})
Anybody else having problems getting slideitmoo with buttons working with Internet Explorer 9?
Have you tried the version using MooTools 1.3?
Got some errors on line 226 with the split function of Mootools.
Looked it up in the docs. The HASH function used in SlideItMoo is decrapcated.
I rewrote some code:
(line 222 – 224)
var s = { };
if( this.options.slideVertical ) { s = Object.merge({‘margin-top’: ‘0′ }); }
else { s = Object.merge({‘margin-left’: ‘0′ }); }
Thank you Jason, I’ll look into it and make the changes.
You should also change this:
(line 173-181)
var s = new Hash();
var fxDist = 0;
if( this.options.slideVertical ){
s.include(‘margin-top’, -this.elementHeight);
fxDist = this.direction == 1 ? -this.elementHeight : 0;
}else{
s.include(‘margin-left’, -this.elementWidth);
fxDist = this.direction == 1 ? -this.elementWidth : 0;
}
to:
var s = { };
var fxDist = 0;
if( this.options.slideVertical ){
s = Object.merge({‘margin-top’:-this.elementHeight});
fxDist = this.direction == 1 ? -this.elementHeight : 0;
}else{
s = Object.merge({‘margin-left’:-this.elementHeight});
fxDist = this.direction == 1 ? -this.elementWidth : 0;
}
I’ve found better solution for this problem – all source below:
/**
SlideItMoo v1.1 – Image slider for MooTools 1.3
(c) 2007-2010 Constantin Boiangiu
MIT-style license.
Changes from version 1.0
- added continuous navigation
- changed the navigation from Fx.Scroll to Fx.Morph
- added new parameters: itemsSelector: pass the CSS class for divs
- itemWidth: for elements with margin/padding pass their width including margin/padding
Updates ( August 4th 2009 )
- added new parameter ‘elemsSlide’. When this is set to a value lower that the actual number of elements in HTML, it will slide at once that number of elements when navigation clicked. Default: null
- added onChange event that returns the index of the current element
Updates ( 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()
**/
var SlideItMoo = new Class({
Implements: [Events,Options],
options: {
overallContainer: null,/* outer container, contains fwd/back buttons and container for thumbnails */
elementScrolled: null, /* has a set width/height with overflow hidden to allow sliding of elements */
thumbsContainer: null, /* actual thumbnails container */
itemsSelector: null, /* css class for inner elements ( ie: .SlideItMoo_element ) */
itemsVisible:5, /* number of elements visible at once */
elemsSlide: null, /* number of elements that slide at once */
itemWidth: null, /* single element width */
itemHeight: null, /* single element height */
navs:{ /* starting this version, you’ll need to put your back/forward navigators in your HTML */
fwd:’.SlideItMoo_forward’, /* forward button CSS selector */
bk:’.SlideItMoo_back’ /* back button CSS selector */
},
slideVertical: false, /* vertical sliding enabled */
showControls:1, /* show forward/back controls */
transition: Fx.Transitions.linear, /* transition */
duration: 800, /* transition duration */
direction: 1, /* sliding direction ( 1: enter from left/top; -1:enter from right/bottom ) */
autoSlide: false, /* auto slide – as milliseconds ( ie: 10000 = 10 seconds ) */
mouseWheelNav: false, /* enable mouse wheel nav */
startIndex: null
/*onChange: $empty*/
},
initialize: function(options){
this.setOptions(options);
/* all elements are identified on CSS selector (itemsSelector) */
this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
this.totalElements = this.elements.length;
if( this.totalElements 0 && this.options.startIndex <= this.elements.length ){
for( var t = 1; t this.options.itemsVisible )
this.startAutoSlide();
},
/* resets the whole slider in case content changes */
resetAll: function(){
$(this.options.overallContainer).removeProperty(’style’);
$(this.options.elementScrolled).removeProperty(’style’);
$(this.options.thumbsContainer).removeProperty(’style’);
this.stopAutoSlide();
if( typeOf( this.fwd ) !== null ){
this.fwd.dispose();
this.bkwd.dispose();
}
this.initialize();
},
/* sets the containers width to leave visible only the specified number of elements */
setContainersSize: function(){
var overallSize = {};
var scrollSize = {};
var thumbsSize = {};
if( this.options.slideVertical ){
//overallSize.height = this.options.itemsVisible * this.elementHeight + 50 * this.options.showControls;
scrollSize.height = this.options.itemsVisible * this.elementHeight;
thumbsSize.height = this.totalElements * (this.elementHeight + 10);
}else{
/* if navigation is enabled, add the width to the overall size */
var navsSize = 0;
if( this.options.showControls ){
var s1 = this.fwd.getSize();
var s2 = this.bkwd.getSize();
var navsSize = s1.x+s2.x;
}
overallSize.width = this.options.itemsVisible * this.elementWidth;
scrollSize.width = this.options.itemsVisible * this.elementWidth;
thumbsSize.width = this.totalElements * (this.elementWidth + 10);
}
$(this.options.overallContainer).set({
styles : overallSize
});
$(this.options.elementScrolled).set({
styles : scrollSize
});
$(this.options.thumbsContainer).set({
styles : thumbsSize
});
},
/* adds forward/back buttons */
addControls: function(){
if( !this.options.showControls || this.elements.length 1), calculate the ending element */
if( this.options.elemsSlide && this.options.elemsSlide>1 && this.endingElem==null ){
this.endingElem = this.currentElement;
for(var i = 0; i = this.totalElements ) this.endingElem = 0;
if( this.endingElem = this.totalElements-1 ? 0 : this.currentElement + this.direction;
break;
/* backwards */
case -1:
elemIndex = this.currentElement == 0 ? this.totalElements – 1 : this.currentElement + this.direction;
break;
}
return elemIndex;
},
/* starts auto sliding */
startAutoSlide: function(){
this.startIt = this.slide.bind(this).pass(this.direction|1);
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
this.elements.addEvents({
‘mouseenter’:function(){
clearInterval(this.autoSlide);
this.isRunning = false;
}.bind(this),
‘mouseleave’:function(){
this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
this.isRunning = true;
}.bind(this)
})
},
/* stops auto sliding */
stopAutoSlide: function(){
clearInterval(this.autoSlide);
clearInterval(this.startIt);
this.isRunning = false;
this.elements.removeEvents();
}
})
Leave a comment