Where to insert code for random sidebar image on Tumblr theme?

effulgentbeauty · 09-09-2012, 09:59 PM

I'm fairly new at this stuff and I was trying to make some small changes to a new Tumblr theme I was using, found here.

I want to make the sidebar image switch random between many graphics, using this bit of code:

Code:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

Where is the appropriate place to insert this into my theme? Every time I try the image just disappears completely. I know it has something to do with the <meta name="image:side background" content=""/> because that's the part I'm trying to adjust, right?

sunfighter · 09-10-2012, 05:07 PM

The code your using puts one (1) image on the screen That's all. It does not rotate the images, it randomly selects the image shown. It also uses document.write(), not a good thing.

This should rotate your images but you need to have the <img> tag where you want this to show. If you use a height and width (like you should) All images will inherit those dimensions. So be careful.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
</head>

<body>
<img id="pic" src="images/1.jpg" alt="" />      <!--This is where the images will be shown ID is important-->

<script type="text/javascript">
var myimages=new Array();
myimages[1]="images/1.jpg";                  /*images are normally kept in alert seperate file (images) isFinite where mine are*/
myimages[2]="images/2.png";
myimages[3]="images/3.jpg";
myimages[4]="images/4.jpg";
myimages[5]="images/5.jpg";
myimages[6]="images/6.png";
var i = 0;

setInterval(function(){show()},600);         /*this calls the function at a set interval time adjust time by changeing the 600*/

function show()
{
  i++;
  document.getElementById('pic').src = myimages[i];          /*Your displayed images*/
  if(i == 7){                                                /*this stops higher image numbers*/
    document.getElementById('pic').src = myimages[1];      /*this will give you an image while we reset the images*/
    i=1;                                                   /*not much but it does reset the images*/
    }
}
</script>
</body>
</html>