Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 36

Thread: [addon] How to make image rollover

  1. #21
    Join Date
    Mar 2008
    Location
    Dayton, Ohio
    Posts
    52

    Default Re: [addon] How to make image rollover

    Quote Originally Posted by JQUEST
    Great thread here. Lots of help. Thanks for the contributions.

    I have applied the code grynmoors posted about the FEATURED section.
    It worked like magic.

    I then tried the NEW VIDEO code and it worked as well...
    So I copied that code and replaced " $new_video " with " $recent " and all the images rollover!

    BUT THEN

    I noticed something that's got me bugging out:

    If I have the same video in more than 1 section (example: video in recent, featured and new)
    and I roll over one of these videos, only the 1st instance becomes animated.

    So for example, I rollover a thumb in "Featured" (lower part of page) the same video in "New" animates at the top of the page!
    Not the image I rollover!!??

    Anyone have a clue what I should edit?

    Thanks in advance.
    I do know what you mean and I have the same issue but I don't have the time to look into it more. Once or IF I find a solution I will share it here. :) Cheers

  2. #22
    Join Date
    Feb 2008
    Location
    Greece
    Posts
    235

    Default Re: [addon] How to make image rollover

    Quote Originally Posted by JQUEST
    Great thread here. Lots of help. Thanks for the contributions.

    I have applied the code grynmoors posted about the FEATURED section.
    It worked like magic.

    I then tried the NEW VIDEO code and it worked as well...
    So I copied that code and replaced " $new_video " with " $recent " and all the images rollover!

    BUT THEN

    I noticed something that's got me bugging out:

    If I have the same video in more than 1 section (example: video in recent, featured and new)
    and I roll over one of these videos, only the 1st instance becomes animated.

    So for example, I rollover a thumb in "Featured" (lower part of page) the same video in "New" animates at the top of the page!
    Not the image I rollover!!??

    Anyone have a clue what I should edit?

    Thanks in advance.
    Look the code at alotporn.com it will help you. :wink:

  3. #23
    Join Date
    May 2007
    Location
    Planet Earth
    Posts
    1,389

    Default Re: [addon] How to make image rollover

    The code that RAMMSTEIN supplied works nicely, however, I found that it doesn't work on more than one instance of the mouseover on a page at a time...that is, I haven't been able to use it on the 'new, recent AND featured' videos on the front page at the same time. At least, I can't figure out how to get it to do this...every time I tried, I got very odd results.

    Same thing happens on the user_profile page where their videos are listed. There's 2 rows of videos, new and popular, and if I try to implement this code in both sections, it breaks and I get very unexpected results.

    I don't go to smut sites so can't view the code at the site mentioned (so that I can see what they did that was different from what RAMMSTEIN has already posted and explained), but I figured out a way around it by combining RAMMSTEINS stuff with another javascript.

    COPY AND PASTE SAVE AS thumbchange1.js and upload to your js directory:

    Code:
     /*
    Copyright (c) 2007, Yahoo! Inc. All rights reserved.
    Code licensed under the BSD License:
    http://developer.yahoo.net/yui/license.txt
    version: 2.2.0
    */
    
    if(typeof YAHOO=="undefined"){var YAHOO={};}
    YAHOO.namespace=function(){var a=arguments,o=null,i,j,d;for(i=0;i<a.length;i=i+1){d=a[i].split(".");o=YAHOO;for(j=(d[0]=="YAHOO")?1:0;j<d.length;j=j+1){o[d[j]]=o[d[j]]||{};o=o[d[j]];}}
    return o;};YAHOO.log=function(msg,cat,src){var l=YAHOO.widget.Logger;if(l&&l.log){return l.log(msg,cat,src);}else{return false;}};YAHOO.init=function(){this.namespace("util","widget","example");if(typeof YAHOO_config!="undefined"){var l=YAHOO_config.listener,ls=YAHOO.env.listeners,unique=true,i;if(l){for(i=0;i<ls.length;i=i+1){if(ls[i]==l){unique=false;break;}}
    if(unique){ls.push(l);}}}};YAHOO.register=function(name,mainClass,data){var mods=YAHOO.env.modules;if(!mods[name]){mods[name]={versions:[],builds:[]};}
    var m=mods[name],v=data.version,b=data.build,ls=YAHOO.env.listeners;m.name=name;m.version=v;m.build=b;m.versions.push(v);m.builds.push(b);m.mainClass=mainClass;for(var i=0;i<ls.length;i=i+1){ls[i](m);}
    if(mainClass){mainClass.VERSION=v;mainClass.BUILD=b;}else{YAHOO.log("mainClass is undefined for module "+name,"warn");}};YAHOO.env=YAHOO.env||{modules:[],listeners:[],getVersion:function(name){return YAHOO.env.modules[name]||null;}};YAHOO.lang={isArray:function(obj){if(obj.constructor&&obj.constructor.toString().indexOf('Array')>-1){return true;}else{return YAHOO.lang.isObject(obj)&&obj.constructor==Array;}},isBoolean:function(obj){return typeof obj=='boolean';},isFunction:function(obj){return typeof obj=='function';},isNull:function(obj){return obj===null;},isNumber:function(obj){return typeof obj=='number'&&isFinite(obj);},isObject:function(obj){return typeof obj=='object'||YAHOO.lang.isFunction(obj);},isString:function(obj){return typeof obj=='string';},isUndefined:function(obj){return typeof obj=='undefined';},hasOwnProperty:function(obj,prop){if(Object.prototype.hasOwnProperty){return obj.hasOwnProperty(prop);}
    return!YAHOO.lang.isUndefined(obj[prop])&&obj.constructor.prototype[prop]!==obj[prop];},extend:function(subc,superc,overrides){var F=function(){};F.prototype=superc.prototype;subc.prototype=new F();subc.prototype.constructor=subc;subc.superclass=superc.prototype;if(superc.prototype.constructor==Object.prototype.constructor){superc.prototype.constructor=superc;}
    if(overrides){for(var i in overrides){subc.prototype[i]=overrides[i];}}},augment:function(r,s){var rp=r.prototype,sp=s.prototype,a=arguments,i,p;if(a[2]){for(i=2;i<a.length;i=i+1){rp[a[i]]=sp[a[i]];}}else{for(p in sp){if(!rp[p]){rp[p]=sp[p];}}}}};YAHOO.init();YAHOO.util.Lang=YAHOO.lang;YAHOO.augment=YAHOO.lang.augment;YAHOO.extend=YAHOO.lang.extend;YAHOO.register("yahoo",YAHOO,{version:"2.2.0",build:"127"});
    (function(){var Y=YAHOO.util,getStyle,setStyle,id_counter=0,propertyCache={};var ua=navigator.userAgent.toLowerCase(),isOpera=(ua.indexOf('opera')>-1),isSafari=(ua.indexOf('safari')>-1),isGecko=(!isOpera&&!isSafari&&ua.indexOf('gecko')>-1),isIE=(!isOpera&&ua.indexOf('msie')>-1);var patterns={HYPHEN:/(-[a-z])/i};var toCamel=function(property){if(!patterns.HYPHEN.test(property)){return property;}
    if(propertyCache[property]){return propertyCache[property];}
    while(patterns.HYPHEN.exec(property)){property=property.replace(RegExp.$1,RegExp.$1.substr(1).toUpperCase());}
    propertyCache[property]=property;return property;};if(document.defaultView&&document.defaultView.getComputedStyle){getStyle=function(el,property){var value=null;var computed=document.defaultView.getComputedStyle(el,'');if(computed){value=computed[toCamel(property)];}
    return el.style[property]||value;};}else if(document.documentElement.currentStyle&&isIE){getStyle=function(el,property){switch(toCamel(property)){case'opacity':var val=100;try{val=el.filters['DXImageTransform.Microsoft.Alpha'].opacity;}catch(e){try{val=el.filters('alpha').opacity;}catch(e){}}
    return val/100;break;default:var value=el.currentStyle?el.currentStyle[property]:null;return(el.style[property]||value);}};}else{getStyle=function(el,property){return el.style[property];};}
    if(isIE){setStyle=function(el,property,val){switch(property){case'opacity':if(typeof el.style.filter=='string'){el.style.filter='alpha(opacity='+val*100+')';if(!el.currentStyle||!el.currentStyle.hasLayout){el.style.zoom=1;}}
    break;default:el.style[property]=val;}};}else{setStyle=function(el,property,val){el.style[property]=val;};}
    YAHOO.util.Dom={get:function(el){if(!el){return null;}
    if(typeof el!='string'&&!(el instanceof Array)){return el;}
    if(typeof el=='string'){return document.getElementById(el);}
    else{var collection=[];for(var i=0,len=el.length;i<len;++i){collection[collection.length]=Y.Dom.get(el[i]);}
    return collection;}
    return null;},getStyle:function(el,property){property=toCamel(property);var f=function(element){return getStyle(element,property);};return Y.Dom.batch(el,f,Y.Dom,true);},setStyle:function(el,property,val){property=toCamel(property);var f=function(element){setStyle(element,property,val);};Y.Dom.batch(el,f,Y.Dom,true);},getXY:function(el){var f=function(el){if(el.parentNode===null||el.offsetParent===null||this.getStyle(el,'display')=='none'){return false;}
    var parentNode=null;var pos=[];var box;if(el.getBoundingClientRect){box=el.getBoundingClientRect();var doc=document;if(!this.inDocument(el)&&parent.document!=document){doc=parent.document;if(!this.isAncestor(doc.documentElement,el)){return false;}}
    var scrollTop=Math.max(doc.documentElement.scrollTop,doc.body.scrollTop);var scrollLeft=Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft);return[box.left+scrollLeft,box.top+scrollTop];}
    else{pos=[el.offsetLeft,el.offsetTop];parentNode=el.offsetParent;if(parentNode!=el){while(parentNode){pos[0]+=parentNode.offsetLeft;pos[1]+=parentNode.offsetTop;parentNode=parentNode.offsetParent;}}
    if(isSafari&&this.getStyle(el,'position')=='absolute'){pos[0]-=document.body.offsetLeft;pos[1]-=document.body.offsetTop;}}
    if(el.parentNode){parentNode=el.parentNode;}
    else{parentNode=null;}
    while(parentNode&&parentNode.tagName.toUpperCase()!='BODY'&&parentNode.tagName.toUpperCase()!='HTML')
    {if(Y.Dom.getStyle(parentNode,'display')!='inline'){pos[0]-=parentNode.scrollLeft;pos[1]-=parentNode.scrollTop;}
    if(parentNode.parentNode){parentNode=parentNode.parentNode;}else{parentNode=null;}}
    return pos;};return Y.Dom.batch(el,f,Y.Dom,true);},getX:function(el){var f=function(el){return Y.Dom.getXY(el)[0];};return Y.Dom.batch(el,f,Y.Dom,true);},getY:function(el){var f=function(el){return Y.Dom.getXY(el)[1];};return Y.Dom.batch(el,f,Y.Dom,true);},setXY:function(el,pos,noRetry){var f=function(el){var style_pos=this.getStyle(el,'position');if(style_pos=='static'){this.setStyle(el,'position','relative');style_pos='relative';}
    var pageXY=this.getXY(el);if(pageXY===false){return false;}
    var delta=[parseInt(this.getStyle(el,'left'),10),parseInt(this.getStyle(el,'top'),10)];if(isNaN(delta[0])){delta[0]=(style_pos=='relative')?0:el.offsetLeft;}
    if(isNaN(delta[1])){delta[1]=(style_pos=='relative')?0:el.offsetTop;}
    if(pos[0]!==null){el.style.left=pos[0]-pageXY[0]+delta[0]+'px';}
    if(pos[1]!==null){el.style.top=pos[1]-pageXY[1]+delta[1]+'px';}
    if(!noRetry){var newXY=this.getXY(el);if((pos[0]!==null&&newXY[0]!=pos[0])||(pos[1]!==null&&newXY[1]!=pos[1])){this.setXY(el,pos,true);}}};Y.Dom.batch(el,f,Y.Dom,true);},setX:function(el,x){Y.Dom.setXY(el,[x,null]);},setY:function(el,y){Y.Dom.setXY(el,[null,y]);},getRegion:function(el){var f=function(el){var region=new Y.Region.getRegion(el);return region;};return Y.Dom.batch(el,f,Y.Dom,true);},getClientWidth:function(){return Y.Dom.getViewportWidth();},getClientHeight:function(){return Y.Dom.getViewportHeight();},getElementsByClassName:function(className,tag,root){var method=function(el){return Y.Dom.hasClass(el,className);};return Y.Dom.getElementsBy(method,tag,root);},hasClass:function(el,className){var re=new RegExp('(?:^|\\s+)'+className+'(?:\\s+|$)');var f=function(el){return re.test(el['className']);};return Y.Dom.batch(el,f,Y.Dom,true);},addClass:function(el,className){var f=function(el){if(this.hasClass(el,className)){return;}
    el['className']=[el['className'],className].join(' ');};Y.Dom.batch(el,f,Y.Dom,true);},removeClass:function(el,className){var re=new RegExp('(?:^|\\s+)'+className+'(?:\\s+|$)','g');var f=function(el){if(!this.hasClass(el,className)){return;}
    var c=el['className'];el['className']=c.replace(re,' ');if(this.hasClass(el,className)){this.removeClass(el,className);}};Y.Dom.batch(el,f,Y.Dom,true);},replaceClass:function(el,oldClassName,newClassName){if(oldClassName===newClassName){return false;}
    var re=new RegExp('(?:^|\\s+)'+oldClassName+'(?:\\s+|$)','g');var f=function(el){if(!this.hasClass(el,oldClassName)){this.addClass(el,newClassName);return;}
    el['className']=el['className'].replace(re,' '+newClassName+' ');if(this.hasClass(el,oldClassName)){this.replaceClass(el,oldClassName,newClassName);}};Y.Dom.batch(el,f,Y.Dom,true);},generateId:function(el,prefix){prefix=prefix||'yui-gen';el=el||{};var f=function(el){if(el){el=Y.Dom.get(el);}else{el={};}
    if(!el.id){el.id=prefix+id_counter++;}
    return el.id;};return Y.Dom.batch(el,f,Y.Dom,true);},isAncestor:function(haystack,needle){haystack=Y.Dom.get(haystack);if(!haystack||!needle){return false;}
    var f=function(needle){if(haystack.contains&&!isSafari){return haystack.contains(needle);}
    else if(haystack.compareDocumentPosition){return!!(haystack.compareDocumentPosition(needle)&16);}
    else{var parent=needle.parentNode;while(parent){if(parent==haystack){return true;}
    else if(!parent.tagName||parent.tagName.toUpperCase()=='HTML'){return false;}
    parent=parent.parentNode;}
    return false;}};return Y.Dom.batch(needle,f,Y.Dom,true);},inDocument:function(el){var f=function(el){return this.isAncestor(document.documentElement,el);};return Y.Dom.batch(el,f,Y.Dom,true);},getElementsBy:function(method,tag,root){tag=tag||'*';var nodes=[];if(root){root=Y.Dom.get(root);if(!root){return nodes;}}else{root=document;}
    var elements=root.getElementsByTagName(tag);if(!elements.length&&(tag=='*'&&root.all)){elements=root.all;}
    for(var i=0,len=elements.length;i<len;++i){if(method(elements[i])){nodes[nodes.length]=elements[i];}}
    return nodes;},batch:function(el,method,o,override){var id=el;el=Y.Dom.get(el);var scope=(override)?o:window;if(!el||el.tagName||!el.length){if(!el){return false;}
    return method.call(scope,el,o);}
    var collection=[];for(var i=0,len=el.length;i<len;++i){if(!el[i]){id=el[i];}
    collection[collection.length]=method.call(scope,el[i],o);}
    return collection;},getDocumentHeight:function(){var scrollHeight=(document.compatMode!='CSS1Compat')?document.body.scrollHeight:document.documentElement.scrollHeight;var h=Math.max(scrollHeight,Y.Dom.getViewportHeight());return h;},getDocumentWidth:function(){var scrollWidth=(document.compatMode!='CSS1Compat')?document.body.scrollWidth:document.documentElement.scrollWidth;var w=Math.max(scrollWidth,Y.Dom.getViewportWidth());return w;},getViewportHeight:function(){var height=self.innerHeight;var mode=document.compatMode;if((mode||isIE)&&!isOpera){height=(mode=='CSS1Compat')?document.documentElement.clientHeight:document.body.clientHeight;}
    return height;},getViewportWidth:function(){var width=self.innerWidth;var mode=document.compatMode;if(mode||isIE){width=(mode=='CSS1Compat')?document.documentElement.clientWidth:document.body.clientWidth;}
    return width;}};})();YAHOO.util.Region=function(t,r,b,l){this.top=t;this[1]=t;this.right=r;this.bottom=b;this.left=l;this[0]=l;};YAHOO.util.Region.prototype.contains=function(region){return(region.left>=this.left&&region.right<=this.right&&region.top>=this.top&&region.bottom<=this.bottom);};YAHOO.util.Region.prototype.getArea=function(){return((this.bottom-this.top)*(this.right-this.left));};YAHOO.util.Region.prototype.intersect=function(region){var t=Math.max(this.top,region.top);var r=Math.min(this.right,region.right);var b=Math.min(this.bottom,region.bottom);var l=Math.max(this.left,region.left);if(b>=t&&r>=l){return new YAHOO.util.Region(t,r,b,l);}else{return null;}};YAHOO.util.Region.prototype.union=function(region){var t=Math.min(this.top,region.top);var r=Math.max(this.right,region.right);var b=Math.max(this.bottom,region.bottom);var l=Math.min(this.left,region.left);return new YAHOO.util.Region(t,r,b,l);};YAHOO.util.Region.prototype.toString=function(){return("Region {"+"top: "+this.top+", right: "+this.right+", bottom: "+this.bottom+", left: "+this.left+"}");};YAHOO.util.Region.getRegion=function(el){var p=YAHOO.util.Dom.getXY(el);var t=p[1];var r=p[0]+el.offsetWidth;var b=p[1]+el.offsetHeight;var l=p[0];return new YAHOO.util.Region(t,r,b,l);};YAHOO.util.Point=function(x,y){if(x instanceof Array){y=x[1];x=x[0];}
    this.x=this.right=this.left=this[0]=x;this.y=this.top=this.bottom=this[1]=y;};YAHOO.util.Point.prototype=new YAHOO.util.Region();YAHOO.register("dom",YAHOO.util.Dom,{version:"2.2.0",build:"127"});
    if(!YAHOO.util.Event){YAHOO.util.Event=function(){var loadComplete=false;var listeners=[];var unloadListeners=[];var legacyEvents=[];var legacyHandlers=[];var retryCount=0;var onAvailStack=[];var legacyMap=[];var counter=0;var lastError=null;return{POLL_RETRYS:200,POLL_INTERVAL:20,EL:0,TYPE:1,FN:2,WFN:3,OBJ:3,ADJ_SCOPE:4,isSafari:(/KHTML/gi).test(navigator.userAgent),webkit:function(){var v=navigator.userAgent.match(/AppleWebKit\/([^ ]*)/);if(v&&v[1]){return v[1];}
    return null;}(),isIE:(!this.webkit&&!navigator.userAgent.match(/opera/gi)&&navigator.userAgent.match(/msie/gi)),_interval:null,startInterval:function(){if(!this._interval){var self=this;var callback=function(){self._tryPreloadAttach();};this._interval=setInterval(callback,this.POLL_INTERVAL);}},onAvailable:function(p_id,p_fn,p_obj,p_override){onAvailStack.push({id:p_id,fn:p_fn,obj:p_obj,override:p_override,checkReady:false});retryCount=this.POLL_RETRYS;this.startInterval();},onContentReady:function(p_id,p_fn,p_obj,p_override){onAvailStack.push({id:p_id,fn:p_fn,obj:p_obj,override:p_override,checkReady:true});retryCount=this.POLL_RETRYS;this.startInterval();},addListener:function(el,sType,fn,obj,override){if(!fn||!fn.call){return false;}
    if(this._isValidCollection(el)){var ok=true;for(var i=0,len=el.length;i<len;++i){ok=this.on(el[i],sType,fn,obj,override)&&ok;}
    return ok;}else if(typeof el=="string"){var oEl=this.getEl(el);if(oEl){el=oEl;}else{this.onAvailable(el,function(){YAHOO.util.Event.on(el,sType,fn,obj,override);});return true;}}
    if(!el){return false;}
    if("unload"==sType&&obj!==this){unloadListeners[unloadListeners.length]=[el,sType,fn,obj,override];return true;}
    var scope=el;if(override){if(override===true){scope=obj;}else{scope=override;}}
    var wrappedFn=function(e){return fn.call(scope,YAHOO.util.Event.getEvent(e),obj);};var li=[el,sType,fn,wrappedFn,scope];var index=listeners.length;listeners[index]=li;if(this.useLegacyEvent(el,sType)){var legacyIndex=this.getLegacyIndex(el,sType);if(legacyIndex==-1||el!=legacyEvents[legacyIndex][0]){legacyIndex=legacyEvents.length;legacyMap[el.id+sType]=legacyIndex;legacyEvents[legacyIndex]=[el,sType,el["on"+sType]];legacyHandlers[legacyIndex]=[];el["on"+sType]=function(e){YAHOO.util.Event.fireLegacyEvent(YAHOO.util.Event.getEvent(e),legacyIndex);};}
    legacyHandlers[legacyIndex].push(li);}else{try{this._simpleAdd(el,sType,wrappedFn,false);}catch(ex){this.lastError=ex;this.removeListener(el,sType,fn);return false;}}
    return true;},fireLegacyEvent:function(e,legacyIndex){var ok=true,le,lh,li,scope,ret;lh=legacyHandlers[legacyIndex];for(var i=0,len=lh.length;i<len;++i){li=lh[i];if(li&&li[this.WFN]){scope=li[this.ADJ_SCOPE];ret=li[this.WFN].call(scope,e);ok=(ok&&ret);}}
    le=legacyEvents[legacyIndex];if(le&&le[2]){le[2](e);}
    return ok;},getLegacyIndex:function(el,sType){var key=this.generateId(el)+sType;if(typeof legacyMap[key]=="undefined"){return-1;}else{return legacyMap[key];}},useLegacyEvent:function(el,sType){if(this.webkit&&("click"==sType||"dblclick"==sType)){var v=parseInt(this.webkit,10);if(!isNaN(v)&&v<418){return true;}}
    return false;},removeListener:function(el,sType,fn){var i,len;if(typeof el=="string"){el=this.getEl(el);}else if(this._isValidCollection(el)){var ok=true;for(i=0,len=el.length;i<len;++i){ok=(this.removeListener(el[i],sType,fn)&&ok);}
    return ok;}
    if(!fn||!fn.call){return this.purgeElement(el,false,sType);}
    if("unload"==sType){for(i=0,len=unloadListeners.length;i<len;i++){var li=unloadListeners[i];if(li&&li[0]==el&&li[1]==sType&&li[2]==fn){unloadListeners.splice(i,1);return true;}}
    return false;}
    var cacheItem=null;var index=arguments[3];if("undefined"==typeof index){index=this._getCacheIndex(el,sType,fn);}
    if(index>=0){cacheItem=listeners[index];}
    if(!el||!cacheItem){return false;}
    if(this.useLegacyEvent(el,sType)){var legacyIndex=this.getLegacyIndex(el,sType);var llist=legacyHandlers[legacyIndex];if(llist){for(i=0,len=llist.length;i<len;++i){li=llist[i];if(li&&li[this.EL]==el&&li[this.TYPE]==sType&&li[this.FN]==fn){llist.splice(i,1);break;}}}}else{try{this._simpleRemove(el,sType,cacheItem[this.WFN],false);}catch(ex){this.lastError=ex;return false;}}
    delete listeners[index][this.WFN];delete listeners[index][this.FN];listeners.splice(index,1);return true;},getTarget:function(ev,resolveTextNode){var t=ev.target||ev.srcElement;return this.resolveTextNode(t);},resolveTextNode:function(node){if(node&&3==node.nodeType){return node.parentNode;}else{return node;}},getPageX:function(ev){var x=ev.pageX;if(!x&&0!==x){x=ev.clientX||0;if(this.isIE){x+=this._getScrollLeft();}}
    return x;},getPageY:function(ev){var y=ev.pageY;if(!y&&0!==y){y=ev.clientY||0;if(this.isIE){y+=this._getScrollTop();}}
    return y;},getXY:function(ev){return[this.getPageX(ev),this.getPageY(ev)];},getRelatedTarget:function(ev){var t=ev.relatedTarget;if(!t){if(ev.type=="mouseout"){t=ev.toElement;}else if(ev.type=="mouseover"){t=ev.fromElement;}}
    return this.resolveTextNode(t);},getTime:function(ev){if(!ev.time){var t=new Date().getTime();try{ev.time=t;}catch(ex){this.lastError=ex;return t;}}
    return ev.time;},stopEvent:function(ev){this.stopPropagation(ev);this.preventDefault(ev);},stopPropagation:function(ev){if(ev.stopPropagation){ev.stopPropagation();}else{ev.cancelBubble=true;}},preventDefault:function(ev){if(ev.preventDefault){ev.preventDefault();}else{ev.returnValue=false;}},getEvent:function(e){var ev=e||window.event;if(!ev){var c=this.getEvent.caller;while(c){ev=c.arguments[0];if(ev&&Event==ev.constructor){break;}
    c=c.caller;}}
    return ev;},getCharCode:function(ev){return ev.charCode||ev.keyCode||0;},_getCacheIndex:function(el,sType,fn){for(var i=0,len=listeners.length;i<len;++i){var li=listeners[i];if(li&&li[this.FN]==fn&&li[this.EL]==el&&li[this.TYPE]==sType){return i;}}
    return-1;},generateId:function(el){var id=el.id;if(!id){id="yuievtautoid-"+counter;++counter;el.id=id;}
    return id;},_isValidCollection:function(o){return(o&&o.length&&typeof o!="string"&&!o.tagName&&!o.alert&&typeof o[0]!="undefined");},elCache:{},getEl:function(id){return document.getElementById(id);},clearCache:function(){},_load:function(e){loadComplete=true;var EU=YAHOO.util.Event;if(this.isIE){EU._simpleRemove(window,"load",EU._load);}},_tryPreloadAttach:function(){if(this.locked){return false;}
    this.locked=true;var tryAgain=!loadComplete;if(!tryAgain){tryAgain=(retryCount>0);}
    var notAvail=[];for(var i=0,len=onAvailStack.length;i<len;++i){var item=onAvailStack[i];if(item){var el=this.getEl(item.id);if(el){if(!item.checkReady||loadComplete||el.nextSibling||(document&&document.body)){var scope=el;if(item.override){if(item.override===true){scope=item.obj;}else{scope=item.override;}}
    item.fn.call(scope,item.obj);onAvailStack[i]=null;}}else{notAvail.push(item);}}}
    retryCount=(notAvail.length===0)?0:retryCount-1;if(tryAgain){this.startInterval();}else{clearInterval(this._interval);this._interval=null;}
    this.locked=false;return true;},purgeElement:function(el,recurse,sType){var elListeners=this.getListeners(el,sType);if(elListeners){for(var i=0,len=elListeners.length;i<len;++i){var l=elListeners[i];this.removeListener(el,l.type,l.fn);}}
    if(recurse&&el&&el.childNodes){for(i=0,len=el.childNodes.length;i<len;++i){this.purgeElement(el.childNodes[i],recurse,sType);}}},getListeners:function(el,sType){var results=[],searchLists;if(!sType){searchLists=[listeners,unloadListeners];}else if(sType=="unload"){searchLists=[unloadListeners];}else{searchLists=[listeners];}
    for(var j=0;j<searchLists.length;++j){var searchList=searchLists[j];if(searchList&&searchList.length>0){for(var i=0,len=searchList.length;i<len;++i){var l=searchList[i];if(l&&l[this.EL]===el&&(!sType||sType===l[this.TYPE])){results.push({type:l[this.TYPE],fn:l[this.FN],obj:l[this.OBJ],adjust:l[this.ADJ_SCOPE],index:i});}}}}
    return(results.length)?results:null;},_unload:function(e){var EU=YAHOO.util.Event,i,j,l,len,index;for(i=0,len=unloadListeners.length;i<len;++i){l=unloadListeners[i];if(l){var scope=window;if(l[EU.ADJ_SCOPE]){if(l[EU.ADJ_SCOPE]===true){scope=l[EU.OBJ];}else{scope=l[EU.ADJ_SCOPE];}}
    l[EU.FN].call(scope,EU.getEvent(e),l[EU.OBJ]);unloadListeners[i]=null;l=null;scope=null;}}
    unloadListeners=null;if(listeners&&listeners.length>0){j=listeners.length;while(j){index=j-1;l=listeners[index];if(l){EU.removeListener(l[EU.EL],l[EU.TYPE],l[EU.FN],index);}
    j=j-1;}
    l=null;EU.clearCache();}
    for(i=0,len=legacyEvents.length;i<len;++i){legacyEvents[i][0]=null;legacyEvents[i]=null;}
    legacyEvents=null;EU._simpleRemove(window,"unload",EU._unload);},_getScrollLeft:function(){return this._getScroll()[1];},_getScrollTop:function(){return this._getScroll()[0];},_getScroll:function(){var dd=document.documentElement,db=document.body;if(dd&&(dd.scrollTop||dd.scrollLeft)){return[dd.scrollTop,dd.scrollLeft];}else if(db){return[db.scrollTop,db.scrollLeft];}else{return[0,0];}},regCE:function(){},_simpleAdd:function(){if(window.addEventListener){return function(el,sType,fn,capture){el.addEventListener(sType,fn,(capture));};}else if(window.attachEvent){return function(el,sType,fn,capture){el.attachEvent("on"+sType,fn);};}else{return function(){};}}(),_simpleRemove:function(){if(window.removeEventListener){return function(el,sType,fn,capture){el.removeEventListener(sType,fn,(capture));};}else if(window.detachEvent){return function(el,sType,fn){el.detachEvent("on"+sType,fn);};}else{return function(){};}}()};}();(function(){var EU=YAHOO.util.Event;EU.on=EU.addListener;if(document&&document.body){EU._load();}else{EU._simpleAdd(window,"load",EU._load);}
    EU._simpleAdd(window,"unload",EU._unload);EU._tryPreloadAttach();})();}
    YAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this.scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){}
    var onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscribeType){this.subscribeEvent=new YAHOO.util.CustomEvent(onsubscribeType,this,true);}};YAHOO.util.CustomEvent.LIST=0;YAHOO.util.CustomEvent.FLAT=1;YAHOO.util.CustomEvent.prototype={subscribe:function(fn,obj,override){if(this.subscribeEvent){this.subscribeEvent.fire(fn,obj,override);}
    this.subscribers.push(new YAHOO.util.Subscriber(fn,obj,override));},unsubscribe:function(fn,obj){if(!fn){return this.unsubscribeAll();}
    var found=false;for(var i=0,len=this.subscribers.length;i<len;++i){var s=this.subscribers[i];if(s&&s.contains(fn,obj)){this._delete(i);found=true;}}
    return found;},fire:function(){var len=this.subscribers.length;if(!len&&this.silent){return true;}
    var args=[],ret=true,i;for(i=0;i<arguments.length;++i){args.push(arguments[i]);}
    var argslength=args.length;if(!this.silent){}
    for(i=0;i<len;++i){var s=this.subscribers[i];if(s){if(!this.silent){}
    var scope=s.getScope(this.scope);if(this.signature==YAHOO.util.CustomEvent.FLAT){var param=null;if(args.length>0){param=args[0];}
    ret=s.fn.call(scope,param,s.obj);}else{ret=s.fn.call(scope,this.type,args,s.obj);}
    if(false===ret){if(!this.silent){}
    return false;}}}
    return true;},unsubscribeAll:function(){for(var i=0,len=this.subscribers.length;i<len;++i){this._delete(len-1-i);}
    return i;},_delete:function(index){var s=this.subscribers[index];if(s){delete s.fn;delete s.obj;}
    this.subscribers.splice(index,1);},toString:function(){return"CustomEvent: "+"'"+this.type+"', "+"scope: "+this.scope;}};YAHOO.util.Subscriber=function(fn,obj,override){this.fn=fn;this.obj=obj||null;this.override=override;};YAHOO.util.Subscriber.prototype.getScope=function(defaultScope){if(this.override){if(this.override===true){return this.obj;}else{return this.override;}}
    return defaultScope;};YAHOO.util.Subscriber.prototype.contains=function(fn,obj){if(obj){return(this.fn==fn&&this.obj==obj);}else{return(this.fn==fn);}};YAHOO.util.Subscriber.prototype.toString=function(){return"Subscriber { obj: "+(this.obj||"")+", override: "+(this.override||"no")+" }";};YAHOO.util.EventProvider=function(){};YAHOO.util.EventProvider.prototype={__yui_events:null,__yui_subscribers:null,subscribe:function(p_type,p_fn,p_obj,p_override){this.__yui_events=this.__yui_events||{};var ce=this.__yui_events[p_type];if(ce){ce.subscribe(p_fn,p_obj,p_override);}else{this.__yui_subscribers=this.__yui_subscribers||{};var subs=this.__yui_subscribers;if(!subs[p_type]){subs[p_type]=[];}
    subs[p_type].push({fn:p_fn,obj:p_obj,override:p_override});}},unsubscribe:function(p_type,p_fn,p_obj){this.__yui_events=this.__yui_events||{};var ce=this.__yui_events[p_type];if(ce){return ce.unsubscribe(p_fn,p_obj);}else{return false;}},unsubscribeAll:function(p_type){return this.unsubscribe(p_type);},createEvent:function(p_type,p_config){this.__yui_events=this.__yui_events||{};var opts=p_config||{};var events=this.__yui_events;if(events[p_type]){}else{var scope=opts.scope||this;var silent=opts.silent||null;var ce=new YAHOO.util.CustomEvent(p_type,scope,silent,YAHOO.util.CustomEvent.FLAT);events[p_type]=ce;if(opts.onSubscribeCallback){ce.subscribeEvent.subscribe(opts.onSubscribeCallback);}
    this.__yui_subscribers=this.__yui_subscribers||{};var qs=this.__yui_subscribers[p_type];if(qs){for(var i=0;i<qs.length;++i){ce.subscribe(qs[i].fn,qs[i].obj,qs[i].override);}}}
    return events[p_type];},fireEvent:function(p_type,arg1,arg2,etc){this.__yui_events=this.__yui_events||{};var ce=this.__yui_events[p_type];if(ce){var args=[];for(var i=1;i<arguments.length;++i){args.push(arguments[i]);}
    return ce.fire.apply(ce,args);}else{return null;}},hasEvent:function(type){if(this.__yui_events){if(this.__yui_events[type]){return true;}}
    return false;}};YAHOO.util.KeyListener=function(attachTo,keyData,handler,event){if(!attachTo){}else if(!keyData){}else if(!handler){}
    if(!event){event=YAHOO.util.KeyListener.KEYDOWN;}
    var keyEvent=new YAHOO.util.CustomEvent("keyPressed");this.enabledEvent=new YAHOO.util.CustomEvent("enabled");this.disabledEvent=new YAHOO.util.CustomEvent("disabled");if(typeof attachTo=='string'){attachTo=document.getElementById(attachTo);}
    if(typeof handler=='function'){keyEvent.subscribe(handler);}else{keyEvent.subscribe(handler.fn,handler.scope,handler.correctScope);}
    function handleKeyPress(e,obj){if(!keyData.shift){keyData.shift=false;}
    if(!keyData.alt){keyData.alt=false;}
    if(!keyData.ctrl){keyData.ctrl=false;}
    if(e.shiftKey==keyData.shift&&e.altKey==keyData.alt&&e.ctrlKey==keyData.ctrl){var dataItem;var keyPressed;if(keyData.keys instanceof Array){for(var i=0;i<keyData.keys.length;i++){dataItem=keyData.keys[i];if(dataItem==e.charCode){keyEvent.fire(e.charCode,e);break;}else if(dataItem==e.keyCode){keyEvent.fire(e.keyCode,e);break;}}}else{dataItem=keyData.keys;if(dataItem==e.charCode){keyEvent.fire(e.charCode,e);}else if(dataItem==e.keyCode){keyEvent.fire(e.keyCode,e);}}}}
    this.enable=function(){if(!this.enabled){YAHOO.util.Event.addListener(attachTo,event,handleKeyPress);this.enabledEvent.fire(keyData);}
    this.enabled=true;};this.disable=function(){if(this.enabled){YAHOO.util.Event.removeListener(attachTo,event,handleKeyPress);this.disabledEvent.fire(keyData);}
    this.enabled=false;};this.toString=function(){return"KeyListener ["+keyData.keys+"] "+attachTo.tagName+
    (attachTo.id?"["+attachTo.id+"]":"");};};YAHOO.util.KeyListener.KEYDOWN="keydown";YAHOO.util.KeyListener.KEYUP="keyup";YAHOO.register("event",YAHOO.util.Event,{version:"2.2.0",build:"127"});

    COPY AND PASTE THEN SAVE AS thumbchange2.js and upload to your js directory:

    Code:
    YAHOO.namespace("thumbchange");
    
    YAHOO.thumbchange = function () {
    	
    	var yue = YAHOO.util.Event;
    	var yud = YAHOO.util.Dom;
    	
    	function Changer(el) {
    		this.el       = el;
    		this.origsrc  = el.src;
    		this.running  = false;
    		this.runnable = true;
    		this.images   = new Array();
    		this.num_ss   = this.el.getAttribute('num');
    		
    		var result = el.src.match(/thumb\/(\d+)\.jpg$/);
    		if (result) {
    			this.video_id = result[1];
    			this.prepend_url = el.src.substr(0, el.src.search(/thumb\/(\d+)\.jpg$/));
    		} else {
    			this.runnable = false;
    		}
    	}
    	
    	Changer.prototype.start = function () {
    		yud.addClass(this.el, 'highlight-on');
    		if (this.runnable) {
    			this.running = true;
    			this.preload();
    			this.animate(1);
    		}
    	}
    	
    	Changer.prototype.stop = function () {
    		yud.removeClass(this.el, 'highlight-on');
    		if (this.runnable) {
    			this.el.src = this.origsrc;
    			this.running = false;
    		}
    	}
    	
    	Changer.prototype.preload = function () {
    		for (var i=1; i<=this.num_ss; i++) {
    			this.images[i] = new Image();
    		}
    		
    		this.load(1);
    		for (var i=2; i<=this.num_ss; i++) {
    			setTimeout((function(obj, j) { 
    				return function() { obj.load(j); }
    			})(this, i), i*100);
    		}
    	}
    	
    	Changer.prototype.load = function (num) {
    		if (this.running) {
    			this.images[num].src =  'thumb/' + num +  '_'  + this.video_id + '.jpg';
    		}
    	}
    	
    	Changer.prototype.animate = function (num) {
    		if (this.running) {
    			if (this.images[num].complete) {
    				this.el.src = this.images[num].src;
    				
    				var next = (num == this.num_ss) ? 1 : num + 1;
    				setTimeout((function(obj, i) { 
    					return function() { obj.animate(i); }
    				})(this, next), 625);			
    			} else {
    				setTimeout((function(obj, i) { 
    					return function() { obj.animate(i); }
    				})(this, num), 25);			
    			}
    		}
    	}
    	
    	return {
    		register: function (n) {
    			for (var i=1; i<=n; i++) {
    				yue.onContentReady('thumb' + i, this.hookEvents, this);
    			}			
    		},
    
    		hookEvents: function () {
    			el = this;
    			if (el.getAttribute('num') == 0) {
    				var tt = new YAHOO.widget.Tooltip("tt_" + el.id, { context:el, text: "No preview available" });
    			} else {
    				var changer = new Changer(el);
    				yue.addListener(el, 'mouseover', changer.start, changer, true);
    				yue.addListener(el, 'mouseout', changer.stop, changer, true);
    			}			
    		}
    	};
    }();
    add to header.tpl

    Code:
    <script language="JavaScript" type="text/javascript" src="{$baseurl}/js/thumbchange1.js"></script>
    <script language="JavaScript" type="text/javascript" src="{$baseurl}/js/thumbchange2.js"></script>
    <script type="text/javascript">YAHOO.thumbchange.register(50);</script>
    REPLACE THE EXISTING <IMG> FOR YOUR VIDEO THUMB WITH THIS CODE TAKING INTO CONSDERATION THE $VARIABLE THAT YOU WANT TO CHANGE (in this example, it is changing the $featured_videos variable for the FEATURED VIDEOS section in index.tpl):

    Code:
    [img]{$tmburl}/{$featured_videos[i].VID}.jpg[/img]
    SEE THIS IN ACTION AT JUMMAHFILMS where I have it rotating the http://mysite/recent, the user videos on the profile page (both the new and popular) and the new and featured videos on the front page. Feel free to take a look at the source code. The pages edited were header.tpl, index.tpl, videos.tpl, user_videos.tpl and user.tpl where I used a combination of both RAMMSTEINS code and what I just posted depending on if there was more than one instance of thumbs to mouseover on a page at a time. If there was more than one, I used RAMMSTEINS code on the first one and the code I just posted to the second one.

    The code I posted works on the index.tpl but not on video.tpl, no idea why...but for the bulk of it, I used RAMMSTEINS code but only at one instance at a time. I hope that makes sense.
    If it's not fun, stop doing it!

  4. #24
    Join Date
    Feb 2008
    Location
    Greece
    Posts
    235

    Default Re: [addon] How to make image rollover

    Quote Originally Posted by grynmoors
    The code that RAMMSTEIN supplied works nicely, however, I found that it doesn't work on more than one instance of the mouseover on a page at a time...that is, I haven't been able to use it on the 'new, recent AND featured' videos on the front page at the same time. At least, I can't figure out how to get it to do this...every time I tried, I got very odd results.
    I have tested that type of image rollover too but this not the best way for your site.
    Why. :?:
    The first image that is shown at rollover is 50kb-30kb and if you have to show more than 30 video thums per page then you will spend 1.2MB to show one page. My site was down when i used this method. :(


    Also grynmoors there is no need of "thumbchange1.js" vshare already have this file named as "yahoo-dom-event.js"

    Note if you want to use to 'new, recent AND featured' you just put a parameter before the number. Here i am using N for new videos.
    Code:
    <SCRIPT type=text/javascript>       
    stat['N{$new_video[i].VID}']=0; thumb['N{$new_video[i].VID}']=new Array(); thumbs['N{$new_video[i].VID}']=new Array(1,1,1);
    </SCRIPT>

  5. #25
    Join Date
    May 2007
    Location
    Planet Earth
    Posts
    1,389

    Default Re: [addon] How to make image rollover

    wow THANKS, I'll have to give this a shot later on as I'm about to head off to bed. I don't know much about java scripting. So, all I have to do is eliminate the reference to thumbchange1.js to it in the header and it'll still work...I don't remember exactely, but I think I tried that one time and it broke...but I might be confusing it with something else. I'll have to play with it tomorrow.

    So..if I want to use it on new, recent AND featured, where you have "n", I can put ANY variable in there? Like for Featured, I could put "f" and for recent, I'd put "r" and for New I could put "n" and all the thumbs would change? That's all I had to do this whole time?! :shock: argh.

    You know, I never thought to check the size of the thumb files...they're rather large. Thumbs shouldn't be more than 10K, is there a way to make the thumbs smaller in file size?...I should ask that in another thread since that's probably got more to do with the video conversion than what we're talking about here.

    30 videos on a page? WOW. I don't have nearly that many displaying at any given time on any of my sites.
    If it's not fun, stop doing it!

  6. #26
    Join Date
    Feb 2008
    Location
    Greece
    Posts
    235

    Default Re: [addon] How to make image rollover

    Quote Originally Posted by grynmoors
    30 videos on a page? WOW. I don't have nearly that many displaying at any given time on any of my sites.
    30 videos thumbs . I have them at http://alotporn.com/index.php

    Do you want the white version of alotporn template?

  7. #27
    Join Date
    May 2007
    Location
    Planet Earth
    Posts
    1,389

    Default Re: [addon] How to make image rollover

    I'd love to see what the skin looks like but I don't do smut sites so won't be able to have the opportunity to see what it looks like, but thanks for the generous offer anyway. My sites are really very small and I'm on shared hosting so I have to keep things to a minimum anyway (which is why I'm loving VideoSwiper right now). I have only one site that has people that actually upload anything to and even on that site the uploading is scarce.
    If it's not fun, stop doing it!

  8. #28
    Join Date
    May 2007
    Location
    Planet Earth
    Posts
    1,389

    Default Re: [addon] How to make image rollover

    I removed reference to thumbchange1.js and it broke the animation, so there is something different in thumbchange1.js from the yahoo-dom-event.js that comes with vShare.

    I tried to have your code on the NEW and FEATURED videos on the index.tpl and it wouldn't work, none of the thumbs would scroll. Not sure what I'm doing wrong.

    Here's what I did in index.tpl:

    for new videos I put

    Code:
    <SCRIPT type=text/javascript>       
    stat['N{$new_video[i].VID}']=0; thumb['N{$new_video[i].VID}']=new Array(); thumbs['N{$new_video[i].VID}']=new Array(1,1,1);
    </SCRIPT>
    and for the image:

    Code:
    [img]{$baseurl}/thumb/1_{$new_video[i].VID}.jpg[/img]
    for featured videos I put

    Code:
    <SCRIPT type=text/javascript>       
    stat['F{$featured_videos[i].VID}']=0; thumb['F{$featured_videos[i].VID}']=new Array(); thumbs['F{$featured_videos[i].VID}']=new Array(1,1,1);
    </SCRIPT>
    and for the image I put

    Code:
    [img]{$baseurl}/thumb/1_{$new_video[i].VID}.jpg[/img]
    Not sure what I did wrong.

    Right now I have the thumbchange1.js and thumbchange2.js and both the new and featured work at the same time in index.tpl using the image code:

    Code:
    [img]{$tmburl}/{$featured_videos[i].VID}.jpg[/img]
    and

    Code:
    [img]{$tmburl}/{$new_video[i].VID}.jpg[/img]
    It's not "broke" so I'm not gonna fix it.
    If it's not fun, stop doing it!

  9. #29
    Join Date
    Jul 2008
    Posts
    7

    Default Re: [addon] How to make image rollover

    how i can add more than 3 thumb for videos?

  10. #30
    Join Date
    Jan 2008
    Location
    India
    Posts
    147

    Default Re: [addon] How to make image rollover

    Quote Originally Posted by imperator
    how i can add more than 3 thumb for videos?
    still vshare allow to create only 3 thumbs

Page 3 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. [addon] Video Sitemap for VShare
    By RAMMSTEIN in forum Template Modifications
    Replies: 2
    Last Post: 01-08-2009, 01:02 AM
  2. [addon] Google Sitemap Generator
    By RAMMSTEIN in forum Template Modifications
    Replies: 5
    Last Post: 11-07-2008, 04:25 AM
  3. [addon] search system + advert
    By pepio in forum Template Modifications
    Replies: 7
    Last Post: 06-07-2008, 02:21 PM
  4. How to make image rollover?
    By RAMMSTEIN in forum Template Modifications
    Replies: 47
    Last Post: 06-03-2008, 11:06 PM
  5. **New Addon** - Flash Image Scroller
    By galnet in forum Template Modifications
    Replies: 6
    Last Post: 09-02-2007, 07:44 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •