THIS ONLY WORKS WITH FIREFOX!
But will give you a good idea of how this kind of thing works. See if you can find a better one that works in FF and IE and let us know!
---Copy and paste this code into a txt document:
Code:
/***** M U L T I S W A P ***** scripterlative.com modified for vShare by webgeek-design.com ** DO NOT EDIT BELOW HERE OR REMOVE PROGRAMMER CREDITS***/
function ImageSwap(imgRef, period)
{
this.period=period;
this.timer=null;
this.index=0;
this.theElem=document.getElementById(imgRef);
this.defSrc=this.theElem.src;
this.imgData=[];
for(var i=2,j=0; i<arguments.length; i++,j++)
{
this.imgData[j]=new Image();
this.imgData[j].src=arguments[i];
}
this.trigElem = (this.theElem.parentNode.tagName=='A' ? this.theElem.parentNode : this.theElem);
this.trigElem.onmouseout=this.trigElem.onblur=(function(obj){ return function()
{ clearInterval(obj.timer);
obj.theElem.src=obj.defSrc;
obj.index=0;
}})(this);
this.trigElem.onmouseover=this.trigElem.onfocus=(function(obj){return function()
{
obj.trigElem.onmouseout();
obj.timer=setInterval( (function(inst){return function(){inst.swap()}})(obj), obj.period);
}})(this);
this.swap=function(/*73637269707465726C61746976652E636F6D*/)
{
if(this.index==this.imgData.length)
this.index=0;
this.theElem.src=this.imgData[ this.index++ ].src;
}
}
/** End **/
---Save as ImageSwap.js and close. Make sure the extention is .js and not something else. If it says .txt on it, rename it so that it says ImageSwap.js!
---Open templates/header.tpl
---Look for:
Code:
<script language="JavaScript" type="text/javascript" src="{$baseurl}/js/myjavascriptajax.js"></script>
---Add below that:
Code:
<script language="JavaScript" type="text/javascript" src="{$baseurl}/js/ImageSwap.js"></script>
---Save and close header.tpl
---Open templates/index.tpl
---Look for:
Code:
[img]{$tmburl}/1_{$new_video[i].VID}.jpg[/img]
---Replace with:
Code:
[img]{$tmburl}/1_{$new_video[i].VID}.jpg[/img]
---Add below that:
Code:
<script type='text/javascript'>
new ImageSwap ('new', 800, '{$tmburl}/2_{$new_video[i].VID}.jpg','{$tmburl}/3_{$new_video[i].VID}.jpg','{$tmburl}/1_{$new_video[i].VID}.jpg');
</script>
---Look for:
Code:
[img]{$tmburl}/1_{$recent[i].VID}.jpg[/img]
---Replace with:
Code:
[img]{$tmburl}/1_{$recent[i].VID}.jpg[/img]
---Add below that:
Code:
<script type='text/javascript'>
new ImageSwap ('recent', 800, '{$tmburl}/2_{$recent[i].VID}.jpg','{$tmburl}/3_{$recent[i].VID}.jpg','{$tmburl}/1_{$recent[i].VID}.jpg');
</script>
---Save and close your index.tpl
---Upload ImageSwap.js to the js directory
---Upload header.tpl and index.tpl to the templates directory
---Done! Visit your vShare site and see that it works.
AS ALWAYS, RENAME YOUR ORIGINAL FILES BEFORE UPLOADING SO THAT IF THIS DOESN'T WORK LIKE YOU EXPECTED YOU CAN REVERT BACK TO YOUR ORIGINAL FILES!
Now, you'll notice the number 800 in this code...that is the timer for the image cycle. You can speed it up or slow it down...the higher the number, the slower the images will cycle eg:to make it go really fast, set it to 100.
Enjoy!
Bookmarks