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.
