Jump to content
Sign in to follow this  
princesohrab

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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(B){for(var a=0;a<this.tabs.length;a++){this.tabs[a].style.display=((a+1)==B)?'block':'none';if((a+1)==B){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(B)};this.rotate=function(B){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)},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=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(B){var a=this.gup(B);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(B){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)};

Share this post


Link to post
Share on other sites

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 by Ingolme

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...