Re-writing this script in oder for it to work on multiple div on the same page

[princesohrab]

Hi all, I am using this product rotator and I am trying to make it work with various product on the same page. Is it possible to have multiple image rotators on a page? I'm doing a site that I would love to use this on, but when I add the second one, only the first one works, the rest doesn't.. Is there a way around it? I have tried adding different: id:'productImages, productImages-2, productImages-3',But still only the first one works. Can anyone please help with the re-writing of this script.Your help would be greatly appreciatedThank You -----------------------------------------------------------------------<script type="text/javascript"> $(document).ready(function(){ }); var tabber1 = new Yetii({ id: 'productImages', interval:3 }); </script>--------------------------------------------------------------------------Example can be seen and downloaded at http://www.dreamweavertutorial.co.uk/dreamweaver/video/product-image-rotator-zoomer-dreamweaver-part2.htm I have also tried using ----var $IR = jQuery.noConflict();------ but in vain

[Ingolme]

You should have the code inside the document.ready handler. Why not just make a second instance of the rotator?

<script type="text/javascript">$(document).ready(function(){  	var tabber1 = new Yetii({		 id: 'productImages',		 interval:3	});	var tabber2 = new Yetii({		 id: 'somethingElse',		 interval:3	});});</script>

[princesohrab]

Hey Foxy Mod, I just tried it but still only the first one works again,

[princesohrab]

should anything be changed here--------------------------------------------------------- /*Yetii - Yet (E)Another Tab Interface Implementation,version 1.5,http://www.kminek.pl/lab/yetii/,Copyright © Grzegorz Wojcik,Code licensed under the BSD License: http://www.kminek.pl/bsdlicense.txt*/function Yetii(){this.defaults={id:null,active:1,interval:null,wait:null,persist:null,tabclass:'tab',activeclass:'active',callback:null,leavecallback:null};this.activebackup=null;for(var h in arguments[0]){this.defaults[h]=arguments[0][h]};this.getTabs=function(){var b=[];var a=document.getElementById(this.defaults.id).getElementsByTagName('*');var c=new RegExp("(^|\\s)"+this.defaults.tabclass.replace(/\-/g,"\\-")+"(\\s|$)");for(var d=0;d<a.length;d++){if(c.test(a[d].className))b.push(a[d])}return b};this.links=document.getElementById(this.defaults.id+'-nav').getElementsByTagName('a');this.listitems=document.getElementById(this.defaults.id+'-nav').getElementsByTagName('li');this.show=function({for(var a=0;a<this.tabs.length;a++){this.tabs[a].style.display=((a+1)==?'block':'none';if((a+1)=={this.addClass(this.links[a],this.defaults.activeclass);this.addClass(this.listitems[a],this.defaults.activeclass+'li')}else{this.removeClass(this.links[a],this.defaults.activeclass);this.removeClass(this.listitems[a],this.defaults.activeclass+'li')}}if(this.defaults.leavecallback&&(b!=this.activebackup))this.defaults.leavecallback(this.defaults.active);this.activebackup=b;this.defaults.active=b;if(this.defaults.callback)this.defaults.callback(};this.rotate=function({this.show(this.defaults.active);this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;var a=this;if(this.defaults.wait)clearTimeout(this.timer2);this.timer1=setTimeout(function(){a.rotate(},b*1000)};this.next=function(){this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;this.show(this.defaults.active)};this.previous=function(){this.defaults.active--;if(!this.defaults.active)this.defaults.active=this.tabs.length;this.show(this.defaults.active)};this.gup=function({b=b.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var a="[\\?&]"+b+"=([^]*)";var c=new RegExp(a);var d=c.exec(window.location.href);if(d==null)return null;else return d[1]};this.parseurl=function({var a=this.gup(;if(a==null)return null;if(parseInt(a))return parseInt(a);if(document.getElementById(a)){for(var c=0;c<this.tabs.length;c++){if(this.tabs[c].id==a)return(c+1)}}return null};this.createCookie=function(b,a,c){if©{var d=new Date();d.setTime(d.getTime()+(c*24*60*60*1000));var f="; expires="+d.toGMTString()}else var f="";document.cookie=b+"="+a+f+"; path=/"};this.readCookie=function({var a=b+"=";var c=document.cookie.split(';');for(var d=0;d<c.length;d++){var f=c[d];while(f.charAt(0)==' ')f=f.substring(1,f.length);if(f.indexOf(a)==0)return f.substring(a.length,f.length)}return null};this.contains=function(b,a,c){return b.indexOf(a,c)!=-1};this.hasClass=function(b,a){return this.contains(b.className,a,' ')};this.addClass=function(b,a){if(!this.hasClass(b,a))b.className=(b.className+' '+a).replace(/\s{2,}/g,' ').replace(/^\s+|\s+$/g,'')};this.removeClass=function(b,a){b.className=b.className.replace(new RegExp('(^|\\s)'+a+'(?:\\s|$)'),'$1');b.className.replace(/\s{2,}/g,' ').replace(/^\s+|\s+$/g,'')};this.tabs=this.getTabs();this.defaults.active=(this.parseurl(this.defaults.id))?this.parseurl(this.defaults.id):this.defaults.active;if(this.defaults.persist&&this.readCookie(this.defaults.id))this.defaults.active=this.readCookie(this.defaults.id);this.activebackup=this.defaults.active;this.show(this.defaults.active);var e=this;for(var g=0;g<this.links.length;g++){this.links[g].customindex=g+1;this.links[g].onclick=function(){if(e.timer1)clearTimeout(e.timer1);if(e.timer2)clearTimeout(e.timer2);e.show(this.customindex);if(e.defaults.persist)e.createCookie(e.defaults.id,this.customindex,0);if(e.defaults.wait)e.timer2=setTimeout(function(){e.rotate(e.defaults.interval)},e.defaults.wait*1000);return false}}if(this.defaults.interval)this.rotate(this.defaults.interval)};

[Ingolme]

Hmm, I don't know what "Yetii" is, but you should look at documentation from the website you got it from. It looks like the code I gave you complies with their documentation. Don't forget to create the proper HTML elements and classes.

Edited October 4, 2012 by Ingolme

[princesohrab]

yetii is the plugin nameI got it fromhttp://www.dreamweavertutorial.co.uk/dreamweaver/video/product-image-rotator-zoomer-dreamweaver-part2.htm

[princesohrab]

you can download it from there too..theres a link that the bottom of the video

[princesohrab]

I changed it to the correct div element too.. each with a different name but im doomed.. just cant figure it out

[Ingolme]

Read this page: http://www.kminek.pl/lab/yetii/

[princesohrab]

i found thishttp://www.kminek.pl/lab/yetii/

[princesohrab]

Read this page: http://www.kminek.pl/lab/yetii/

lol.. just bumped into it too.. thanks.. ill have a read

[princesohrab]

they dont have an explanation of how to implement multiple rotator on the pageDid u read it at all? found anything? pls let me know.. My head is gonna explode in a bit

[princesohrab]

I've done it.. Thanks for all the support guys.. All the IDs and Classes had to be different from each other.. The script you said at the beginning was right.. And I've also found a newer yetii with more controls..