Sorry, I missunderstood what you where reffering to with "class" - I understood you to mean the mootools class whereas I now realize that you where referring to the css class.
However I still don't understand your problem. Using the code on the demo url it is referring to 3 different containers (each with their own classes and ids etc) The only thing that you need to change (apart from the div ids and estetic changes) is modify the elemsSlide:3, option. Maybe if you could post your complete code (just the source code, no php stuff) or an url it would help clarify what the problem is. Chris On 21 oct, 14:05, Deepali <[email protected]> wrote: > Hello Chris, > > Thanks for your reply. yes, what you are saying is correct. but as i > have pasted here the JS code for move the images 3 by 3. > > and here is code for move the image 1 by 1 > > window.addEvents({ > 'domready': function(){ > /* thumbnails example , div containers */ > new SlideItMoo({ > overallContainer: > 'SlideItMoo_outer', > elementScrolled: > 'SlideItMoo_inner', > thumbsContainer: > 'SlideItMoo_items', > itemsVisible:1, > itemsSelector: > '.SlideItMoo_element', > itemWidth: 658, > showControls:1}); > }, > 'load': function(){ > /* banner rotator example */ > new SlideItMoo({overallContainer: > 'SlideItMoo_banners_outer', > elementScrolled: > 'SlideItMoo_banners_inner', > thumbsContainer: > 'SlideItMoo_banners_items', > itemsVisible:1, > itemsSelector: > '.banner', > showControls:0, > autoSlide: 3000, > transition: > Fx.Transitions.Bounce.easeOut, > duration: 1800, > direction:-1}); > > /* info rotator example */ > new SlideItMoo({overallContainer: > 'SlideItMoo_info_outer', > elementScrolled: > 'SlideItMoo_info_inner', > thumbsContainer: > 'SlideItMoo_info_items', > itemsVisible:1, > itemsSelector: > '.info_item', > itemWidth:557, > showControls:0, > autoSlide: 5000, > transition: > Fx.Transitions.Sine.easeIn, > duration: 1800, > direction:1}); > } > }); > > Now the point is as you said everything is same excepts the number > which i want to move. but on the same page how i can combine this code > which will work for both the numbers? thats why i was trying to change > the class names of my div's and defined it again into the css. but its > not working. > > Could you please tell me how can i combine my JS code? and do i need > to change the CSS as well? > > On Oct 21, 3:50 pm, cbolson <[email protected]> wrote: > > > Hi again, > > You don't need to change the classname, that is the whole point (or at > > least part of it) of classes, one class can be called multiple times > > and altered according to the "options". > > You just need to change the name of the elements that you want to > > slide in each instance. > > > If you look at the code that you have pasted or on the url that you > > have included, you will see that there are 3 instances of the scroller > > on the same page - all referencing the same class (SlideItMoo). > > Also each instance is slightly different in how it works, one of the > > differences being exactly what you are asking here. Ie. they move > > different numbers of elements with each slide. > > > On the home page for the url it has this text: > > > "Updates ( August 4'th 2009): > > new parameter elemsSlide. If you want your slider to navigate multiple > > elements when forward/back buttons cliked, set this to the number of > > elements you want it to slide at once" > > > Isn't this exactly what you are after? > > > Sorry if I have misunderstood you. > > > Chris > > > On 21 oct, 09:34, Deepali <[email protected]> wrote: > > > > Hello, > > > > i am using this image slider > > > >http://www.php-help.ro/examples/slideitmoo_1.1/ > > > > but now i want to use it twice on the same page with slight difference > > > is, for one div i want to move images one by one and the for another > > > one images should move three by three. > > > > Because i am using the same application i have tried to change its > > > class name. but at time only one thing works. > > > > here its JS code > > > > <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:3, > > > elemsSlide:3, > > > duration:300, > > > itemsSelector: > > > '.SlideItMoo_element', > > > itemWidth: 158, > > > showControls:1}); > > > }, > > > 'load': function(){ > > > > /* banner rotator example */ > > > new SlideItMoo({overallContainer: > > > 'SlideItMoo_banners_outer', > > > elementScrolled: > > > 'SlideItMoo_banners_inner', > > > thumbsContainer: > > > 'SlideItMoo_banners_items', > > > itemsVisible:1, > > > itemsSelector: > > > '.banner', > > > showControls:0, > > > autoSlide: 3000, > > > transition: > > > Fx.Transitions.Bounce.easeOut, > > > duration: 1800, > > > direction:-1}); > > > > /* info rotator example */ > > > new SlideItMoo({overallContainer: > > > 'SlideItMoo_info_outer', > > > elementScrolled: > > > 'SlideItMoo_info_inner', > > > thumbsContainer: > > > 'SlideItMoo_info_items', > > > itemsVisible:1, > > > itemsSelector: > > > '.info_item', > > > itemWidth:557, > > > showControls:0, > > > autoSlide: 5000, > > > transition: > > > Fx.Transitions.Sine.easeIn, > > > duration: 1800, > > > direction:1}); > > > } > > > }); > > > </script> > > > > my question is what i need to change with the both classes as well as > > > js function so they ll work fine on te same page? is it kind of > > > conflict or something occurring on the page? > > > > please help me. > > > > Thnaks in advance.
