[addon] How to make image rollover

**RAMMSTEIN** · 05-26-2008, 08:51 AM

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.

**garybrun** · 05-26-2008, 09:17 AM

Which version is this for?

**RAMMSTEIN** · 05-26-2008, 11:02 AM

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

**garybrun** · 05-26-2008, 11:20 AM

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?

**grynmoors** · 05-27-2008, 09:10 PM

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

**grynmoors** · 05-27-2008, 09:32 PM

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

**grynmoors** · 05-27-2008, 11:10 PM

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

**CliftonH** · 05-28-2008, 01:40 AM

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

**grynmoors** · 05-28-2008, 02:29 AM

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}

**CliftonH** · 05-28-2008, 03:07 AM

I am receiving a PHP error using that code.

Thread: [addon] How to make image rollover

Thread Tools

Display