[addon] How to make image rollover

What this addon do :!:
Vshare script has 3 images and you can rollover those images at mouse over.

An example is at http://alotporn.com/index.php :wink:


How install it :?:

1. Copy this code and save it with the name rotator.js

Code:

---

var thumbs=new Array();
    var stat=new Array();
    var thumb=new Array();

    function rotatethumb(i,str)
    { var loop=0;

      if (stat[str])
      {
          while ((thumbs[str][i]==0 || i>=3) && loop<100)
          { if (i>=10) { i=0; }
            else
            { i++;
            }
            loop++;
          }

          if (thumb[str][i].complete)
          {  document.getElementById(str).src=thumb[str][i].src;
            setTimeout("rotatethumb("+(i+1)+",'"+str+"')",500);
          }
          else
          {  setTimeout("rotatethumb("+i+",'"+str+"')",20);
          }
      }


    }

    function loadthumb(url,str,j)
    {  if (stat[str]) { thumb[str][j].src=url; }
    }

    function startr(str,ta,te)
    {  stat[str]=1;
      var num;
      var first=1;

      for(var j=0;j<3;j++)
      { if (thumbs[str][j]==1)
          { thumb[str][j]=new Image();
            num=j+1;
            if (first) { first=0; loadthumb(ta+num+te,str,j); }
            else { setTimeout("loadthumb('"+ta+num+te+"','"+str+"',"+j+")",j*50); }
          }
      }
      rotatethumb(0,str);
    }

    function endr(str)
    {  stat[str]=0;
    }

---

2. Upload rotator.js file to yoursite.com/js/rotator.js

3. Open templates\header.tpl
add:

Code:

---

<script language="JavaScript" type="text/javascript" src="{$baseurl}/js/rotator.js"></script>

---

4. open templates\video.tpl
Find this:

Code:

---

<td align="center">
<div class="video">
[img]{$tmburl}/1_{$answers[i].VID}.jpg[/img]

---

Replace with this:

Code:

---

<td align="center">
<SCRIPT type=text/javascript>     
stat['{$answers[i].VID}']=0; thumb['{$answers[i].VID}']=new Array(); thumbs['{$answers[i].VID}']=new Array(1,1,1);
</SCRIPT>

<div class="video">

[img]{$baseurl}/thumb/1_{$answers[i].VID}.jpg[/img]

---

That's it now go to "yoursite.com\recent\" and see the results. :wink:

Note:
Do the same thing with the index page and user profile page. The only difference is that you have to change the standards {$answers[i].VID} .


NOTE
If you do not have a quick server do not add this addon because the SQL will be very slow.

Which version is this for?

2.6 but with some changes works grate also with old versions :wink:

Yes ... Ive just worked out the changes for 2.5
Same instructions as above but...

Find this:
Code:
<td align="center">
<div class="video">
[img]{$tmburl}/1_{$answers[i].VID}.jpg[/img]

Replace with this:
Code:
<td align="center">
<SCRIPT type=text/javascript>
stat['{$answers[i].VID}']=0; thumb['{$answers[i].VID}']=new Array(); thumbs['{$answers[i].VID}']=new Array(1,1,1);
</SCRIPT>
<div class="video">

[img]{$baseurl}/thumb/1_{$answers[i].VID}.jpg[/img]


Can anyone help with doing on the thumbnails on the index page?

Awesome! Can't wait to try it. THANK YOU

:?: This works only for the videos on the "recent" page and not the stuff on the front page, correct? For it to work on the thumbs on the front page, we'd basically have to insert the same stuff into index.tpl that we did for video.tpl? I have something that works right now on the front page but I'll give Rammsteins's code a shot to see if it also works on index.tpl

May I post this mod to my skins site as a freebie (giving you full credit of course)?

For anyone having a problem accessing the .js at RAMMSTEIN's pornographic based URL due to work browser filters and the like, here's the code in txt format:

Code:

---

var thumbs=new Array();
var stat=new Array();
var thumb=new Array();

function rotatethumb(i,str)
{ var loop=0;

        if (stat[str])
        {
                while ((thumbs[str][i]==0 || i>=3) && loop<100)
                { if (i>=10) { i=0; }
                        else
                        { i++;
                        }
                        loop++;
                }

                if (thumb[str][i].complete)
                {        document.getElementById(str).src=thumb[str][i].src;
                        setTimeout("rotatethumb("+(i+1)+",'"+str+"')",500);
                }
                else
                {        setTimeout("rotatethumb("+i+",'"+str+"')",20);
                }
        }


}

function loadthumb(url,str,j)
{        if (stat[str]) { thumb[str][j].src=url; }
}

function startr(str,ta,te)
{        stat[str]=1;
        var num;
        var first=1;

        for(var j=0;j<3;j++)
        { if (thumbs[str][j]==1)
                { thumb[str][j]=new Image();
                        num=j+1;
                        if (first) { first=0; loadthumb(ta+num+te,str,j); }
                        else { setTimeout("loadthumb('"+ta+num+te+"','"+str+"',"+j+")",j*50); }
                }
        }
        rotatethumb(0,str);
}

function endr(str)
{        stat[str]=0;
}

---

Copy and paste that with notepad and save it as rotator.js Make sure you rename it to rotator.js and NOT rotator.js.txt. Make sure you remove the .txt extention.

Yeah, I was right. Insert the call to the javascript just before the call to the thumbs and replace the thumbs with the new rollover code. Change any instances of "answers" to "new_video" "recent" and "featured_video", etc. (depending on what you want to rotate) and also change the size of the images to what you had it before.

New videos is 80 x 60 for example and the code posted by Rammstein has them at 133 x 100 (...you'll want to change the size of the images to reflect the thumb size you really want on pages other than "recent").

Here's what the "new videos" section of MY index.tpl looks like where I got that part to work to give you an idea of how to do this. (note the colors of the mouseover in the first 2 lines reflects the colors of my site, you may need to adjust that to suit your site).

Code:

---

{section name=i loop=$new_video}
<td width="25%" align="center" onmouseout="this.style.backgroundColor='#ffffff';" onmouseover="this.style.backgroundColor='#ffffff';">


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




<a href="{$baseurl}/view/{$new_video[i].VID}/{$new_video[i].seo_name}/">[img]{$baseurl}/thumb/1_{$new_video[i].VID}.jpg[/img]
{$new_video[i].title|truncate:30:"...":true}</a>


</td>

{if $smarty.section.i.index == 4}</tr><tr valign="top">{/if}
{if $smarty.section.i.index == 9}</tr><tr valign="top">{/if}
{if $smarty.section.i.index == 14}</tr><tr valign="top">{/if}

{/section}

---

When I get this section working for the featured videos, I'll post that too. The above code is for the entire SECTION to make it a bit easier to find (at least for me, I find that easier).

does anyone know how to increase the number of thumbnails created for a video? Looks like only a few are made. Thanks

This is for FEATURED VIDEOS (index.tpl)
To make things a tad easier (at least for me anyway), I decided to give the code for the entire SECTION.
FEATURED VIDEOS

>>>>>>>>>>>>>>>>>FIND:

Code:

---

{section name=i loop=$featured_videos}
<div class="featured_block">
        <table width="100%"  border="0" cellspacing="11" cellpadding="0">
        <tr>
        <td width="120" valign="top">
        [img]{$tmburl}/1_{$featured_videos[i].VID}.jpg[/img]
        </td>
        <td valign="top" align="left">
    <p class="video_title">
    {$featured_videos[i].title}
    </p>
    <div class="video_description">
        {if $featured_videos[i].featuredesc ne ""}{$featured_videos[i].featuredesc}
        {/if}{$featured_videos[i].description}
        </div>
   

    <div class="video_tags">
        [img]{$baseurl}/templates/images/tags.gif[/img]{insert name=video_keyword assign=keyword vid=$featured_videos[i].VID}
        {section name=j loop=$keyword}
        {$keyword[j]}
        {/section}

---

>>>>>>>>>>>>>>>>REPLACE:

Code:

---

{section name=i loop=$featured_videos}
<div class="featured_block">
        <table width="100%"  border="0" cellspacing="11" cellpadding="0">
        <tr>
        <td width="120" valign="top">
        <SCRIPT type=text/javascript>     
stat['{$featured_videos[i].VID}']=0; thumb['{$featured_videos[i].VID}']=new Array(); thumbs['{$featured_videos[i].VID}']=new Array(1,1,1);
</SCRIPT>
        [img]{$baseurl}/thumb/1_{$featured_videos[i].VID}.jpg[/img]
        </td>
        <td valign="top" align="left">
    <p class="video_title">
    {$featured_videos[i].title}
    </p>
    <div class="video_description">
        {if $featured_videos[i].featuredesc ne ""}{$featured_videos[i].featuredesc}
        {/if}{$featured_videos[i].description}
        </div>
   

    <div class="video_tags">
        [img]{$baseurl}/templates/images/tags.gif[/img]{insert name=video_keyword assign=keyword vid=$featured_videos[i].VID}
        {section name=j loop=$keyword}
        {$keyword[j]}
        {/section}

---

I am receiving a PHP error using that code.

remove any spaces between the lines, when I did a copy and paste from the .txt that I put it in and then copied and pasted to the forums, it added in linebreaks between the lines of code. I'll fix it. Just remove the linebreaks between the code and it will work.

UPDATE: Above code has been modified to remove the faulty linebreaks between the code.

oh ok thank you. I should have seen that though it was late and I was tired. Thanks for fixing it.

I sould have seen it too. Sorry about that! I don't use the "recently viewed" box, so if someone wants to post the code for that...pretty much it's the same thing as above for the new videos, just change the wording from "answers" in the original code to whatever it is that you want to have thumb changes for. ;)

Quote:

---

Originally Posted by CliftonH

does anyone know how to increase the number of thumbnails created for a video? Looks like only a few are made. Thanks

---

You might want to ask that by starting another thread since the subject doesn't relate to this one, and also try searching the forums to see if anything comes up...'cos I did and found this: viewtopic.php?f=12&t=3154

you the man. :)

Thanks but actually, I'm the grandma. LOL

Quote:

---

Originally Posted by grynmoors

Thanks but actually, I'm the grandma. LOL

---

You are an older woman? :)

Older? How about we use the term "mature".... LOL

haha fair enough. I am 25 and don't run into many women in this development biz.

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.

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

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:

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.

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>

---

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.

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?

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.

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.

how i can add more than 3 thumb for videos?

Quote:

---

Originally Posted by imperator

how i can add more than 3 thumb for videos?

---

still vshare allow to create only 3 thumbs

cannot do anything?

At this time in history, vShare only creates 3 thumbs. So far, no body has been able to figure out how to make more than 3, and it would probably be better to post about this topic in a NEW forum post, as this thread doesn't relate to the question you are asking. This thread is about "how to make image rollover", not "how to make more thumbs"

People who know, would not be looking at this thread to help you.

Try posting a NEW thread or asking for the "more thumbs" ability to be built into vShare as a "Feature Request".

ok man, sorry for OT

works perfect, thanks

Quote:

---

Originally Posted by RAMMSTEIN

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?

---

Can you supply me the white version of your template?

I have deleted the white temp.. sorry :(