Good morning Chris, As you have explained i was trying to change my div ids. but when i keep both the JS on the page its not working. And you are suggestiong that i need to change only elemsSlide:3 ,but if i ll keep same div ids then how JS will come to know that for which div it has to move slider 3 by 3 and for which it should move 1 by 1 ?
Here is my source code. actually i have taken different page only(not php code) so please put this test.html code into slideitmoo-v11-image- slider's downloaded folder so you ll get the images. so basically i want to show two sliders here, one ll move 1 by 1 images and another ll move 3 by 3 images. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="stylesheet/ styles_mootools.css" /> <script language="javascript" type="text/javascript" src="script/ mootools-1.2.1-core.js"></script> <script language="javascript" type="text/javascript" src="script/ mootools-1.2-more.js"></script> <script language="javascript" type="text/javascript" src="script/ slideitmoo-1.1.js"></script> <script language="javascript" type="text/javascript"> window.addEvents({ 'domready': function(){ /* thumbnails example , div containers */ new SlideItMoo({ overallContainer: 'SlideItMoo_outer_rv', elementScrolled: 'SlideItMoo_inner_rv', thumbsContainer: 'SlideItMoo_items_rv', itemsVisible:3, elemsSlide:3, duration:300, itemsSelector: '.SlideItMoo_element_rv', itemWidth: 158, showControls:1}); }, 'load': function(){ /* banner rotator example */ new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer_rv', elementScrolled: 'SlideItMoo_banners_inner_rv', thumbsContainer: 'SlideItMoo_banners_items_rv', 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_rv', elementScrolled: 'SlideItMoo_info_inner_rv', thumbsContainer: 'SlideItMoo_info_items_rv', itemsVisible:1, itemsSelector: '.info_item', itemWidth:557, showControls:0, autoSlide: 5000, transition: Fx.Transitions.Sine.easeIn, duration: 1800, direction:1}); } }); </script> <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: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}); } }); </script> </head> <body> <div id="container"> <div id="SlideItMoo_outer"> <div id="SlideItMoo_inner"> <div class="SlideItMoo_element"> <strong>1: Address</strong> <a href="gallery/full/address_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/address_128.png" /></ a> Nam porta tellus ac urna </div> <div class="SlideItMoo_element"> <strong>2: Ads</strong> <a href="gallery/full/ads_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/ads_128.png" /></a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element"> <strong>3: Calendar</strong> <a href="gallery/full/calendar_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/calendar_128.png" /></ a> Vestibulum eleifend scelerisque purus </div> <div class="SlideItMoo_element"> <strong>4: Comment</strong> <a href="gallery/full/comment_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/comment_128.png" /></ a> Felis nulla iaculis lacus </div> <div class="SlideItMoo_element"> <strong>5: Home</strong> <a href="gallery/full/home_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/home_128.png" /></a> Quisque neque. Donec quam ante, pulvinar vitae </div> <div class="SlideItMoo_element"> <strong>6: Mail</strong> <a href="gallery/full/mail_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/mail_128.png" /></a> Suspendisse sodales turpis. Aliquam lectus </div> <div class="SlideItMoo_element"> <strong>7: News</strong> <a href="gallery/full/news_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/news_128.png" /></a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element"> <strong>8: RSS</strong> <a href="gallery/full/rss2_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/rss2_128.png" /></a> Nam porta tellus ac urna </div> <div class="SlideItMoo_element"> <strong>9: Search</strong> <a href="gallery/full/search_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/search_128.png" /></ a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element"> <strong>10: Sign</strong> <a href="gallery/full/sign_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/sign_128.png" /></a> Vestibulum eleifend scelerisque purus </div> </div> </div> <div id="SlideItMoo_outer_rv"> <div id="SlideItMoo_inner_rv"> <div id="SlideItMoo_items_rv"> <div class="SlideItMoo_element_rv"> <strong>1: Address</strong> <a href="gallery/full/address_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/address_128.png" /></a> Nam porta tellus ac urna </div> <div class="SlideItMoo_element_rv"> <strong>2: Ads</strong> <a href="gallery/full/ads_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/ads_128.png" /></a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element_rv"> <strong>3: Calendar</strong> <a href="gallery/full/calendar_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/calendar_128.png" /></a> Vestibulum eleifend scelerisque purus </div> <div class="SlideItMoo_element_rv"> <strong>4: Comment</strong> <a href="gallery/full/comment_512.png" rel="lightbox[galerie]" target="_blank"> <img src="gallery/thumb/comment_128.png" /></a> Felis nulla iaculis lacus </div> <div class="SlideItMoo_element_rv"> <strong>5: Home</strong> <a href="gallery/full/home_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/home_128.png" /></a> Quisque neque. Donec quam ante, pulvinar vitae </div> <div class="SlideItMoo_element_rv"> <strong>6: Mail</strong> <a href="gallery/full/mail_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/mail_128.png" /></a> Suspendisse sodales turpis. Aliquam lectus </div> <div class="SlideItMoo_element_rv"> <strong>7: News</strong> <a href="gallery/full/news_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/news_128.png" /></a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element_rv"> <strong>8: RSS</strong> <a href="gallery/full/rss2_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/rss2_128.png" /></a> Nam porta tellus ac urna </div> <div class="SlideItMoo_element_rv"> <strong>9: Search</strong> <a href="gallery/full/search_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/search_128.png" /></a> Praesent pellentesque eros nec nisl </div> <div class="SlideItMoo_element_rv"> <strong>10: Sign</strong> <a href="gallery/full/sign_512.png" rel="lightbox [galerie]" target="_blank"> <img src="gallery/thumb/sign_128.png" /></a> Vestibulum eleifend scelerisque purus </div> </div> </div> </body> </html> right now sliders are not working. please look after this code and help me. Thanks. On Oct 21, 11:04 pm, cbolson <[email protected]> wrote: > 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, > > > > > > ... > > read more »
