Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,300
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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>


  •  

    Posting Permissions

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