Jump to content

I need help with a random header image script

Zipman

By Zipman
in JavaScript

 Share

Recommended Posts

Zipman Newbie

Zipman

Posted
Posted

Hi, I'm gonna create a tumblr site and want the header image (same size) to change every time someone reload the site. I need a random header script for 3 images that works with a tumblr theme. I don't know anything about Javascript, so it would be awesome if someone can explain in a simple way where to add the script into the tumblr code and other things for the random header image to work? Will be very happy if someone can help me with this.

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted

You can do it with any server side language without using JS, which probably is easier. you need to get the directory where images are. you will get images in array and can use random functions to get a image from them and then you hav eto just insert the img tag with src pointed to that image location.

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted

the blog is implementing js which will work too. what i was saying to implement it in php like server side. js implementetion wont work if js is disabled or not available. so i would avoid that which i can be acheived in server side trivialy. which part you did not understand?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Using document.write is not really a good idea as it is very problematic, better option is to use getByElementId() 

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var imageArray = new Array('../images/jq1.jpg','../images/jq2.jpg','../images/jq3.jpg','../images/jq4.jpg');window.onload=function(){var randnum=Math.floor((Math.random()*imageArray.length-1)+1);banner = document.getElementById("banner");banner.style.backgroundImage= "url('"+imageArray[randnum]+"')";}/*--*//*]]>*/</script><style type="text/css">#banner {width:724px; height: 324px; background: url(../images/jq1.jpg) no-repeat 0 0; margin:0 auto;}</style></head><body><div id="banner"></div></body></html>

Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted

Ok, thanks! Don't understand so much of this and wonder if you know what to replace in this code for it to work with tumblr? I know I have to change the banner size and image URL in this code. I'm gonna use 3 header images for my tumblr site, but in this code I see 4 images. Sorry if I sound stupid, but it's not so easy to understand when I don't know how to write code.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
var imageArray = new Array('../images/jq1.jpg','../images/jq2.jpg','../images/jq3.jpg','../images/jq4.jpg');

shows relative path to images stored in array as though you were using<img src="../images/jq1.jpg" ><img src="../images/jq2.jpg" ><img src="../images/jq3.jpg" ><img src="../images/jq4.jpg" >replace relative paths in array with your own images relative paths, if you wish to use 3 images only! remove the last

var imageArray = new Array('../images/jq1.jpg','../images/jq2.jpg','../images/jq3.jpg');

var randnum=Math.floor((Math.random()*imageArray.length-1)+1);

imageArray.length is used to identify the number of images stored in array, the rest produces a random number from 0 to 3 imageArray[0] = '../images/jq1.jpg'imageArray[1] = '../images/jq2.jpg'imageArray[2] = '../images/jq3.jpg'imageArray[3] = '../images/jq4.jpg'which is stored in the variable randnum, if randnum = 0 (always start from 0) show 1st image, 1 show 2nd and so on...the image ref is then applied to elements background image whose id ref equals 'banner' 

banner = document.getElementById("banner");banner.style.backgroundImage= "url('"+imageArray[randnum]+"')";

Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted (edited)

Ok. Not sure, but should the image link be between the apostrophe marks? '../images/jq1.jpg' I have the images on a photo site. For the images relative paths, should I choose Direct link, HTML code or IMG code from the photo site? Should it be a image link here? (../images/jq1.jpg) What's this? <!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"> Should I put the whole code below <head> or <body> in tumblr?

Edited by Zipman
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited) 
Ok. Not sure, but should the image link be between the apostrophe marks? [color=#008800]'../images/jq1.jpg'[/color]

Yes!

I have the images on a photo site. For the images relative paths, should I choose Direct link, HTML code or IMG code from the photo site? Should it be a image link here? (../images/jq1.jpg)
direct link addres to images go in array, AND the first image in the array should also be reference below in css to show as default 
#banner {width:724px; height: 324px; background: url(myVeryFirstDirectLinkImage.jpg) no-repeat 0 0; margin:0 auto;}

What's this? 

<!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">

this defines the doctype for a new page, you do not require this, all you require is html within your page of 

<div id="banner"> </div>

JavaScript

<script type="text/javascript">/*<![CDATA[*//*---->*/var imageArray = new Array('../images/jq1.jpg','../images/jq2.jpg','../images/jq3.jpg','../images/jq4.jpg');window.onload=function(){ var randnum=Math.floor((Math.random()*imageArray.length-1)+1); banner = document.getElementById("banner"); banner.style.backgroundImage= "url('"+imageArray[randnum]+"')"; } /*--*//*]]>*/</script>

placed in the <head>...</head>, if possible, OR placed in external js file and link to it in <head>...</head>, OR in the body of the document, maybe in the 

<div id="banner"> </div>

Itself! as long as direct links are correct within the array, and javascript is NOT disabled, it will work!

Edited by dsonesuk
Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted

Yay, random image works, thank you!!! But the image is too high up, it should be between the top row and the search box. You can see it here http://bit.ly/O55bWz . Do you know how to solve it? By default the site shows a logo with the name of the site, in this case Site-Test (temporary name). You couldn't get rid of it unless you replaced it with a new image, but I solved it by adding a transparent image there, so now you can't see it, otherwise it would have been 2 images there.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You never, repeat never! have more than 1 of <html></html>, <body></body>,<head></head> within a page, and you never insert 'meta', 'title', 'style' tags within the body of the page, so all of these you inserted should be removed 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#banner {width:920px; height: 100px; background: url(http://i1242.photobucket.com/albums/gg526/zip34x/image1.png) no-repeat 0 0; margin:0 auto;}</style></head><body>

with 

<style type="text/css">#banner {width:920px; height: 100px; background: url(http://i1242.photobucket.com/albums/gg526/zip34x/image1.png) no-repeat 0 0; margin:0 auto;}</style>

inserted in a singular, unique <head>...</head> element of the document, OR into a css file that is linked to

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

As far as i can make out it is still there, and you have a div element inside the <head>...</head> element 

<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe id="_atssh816" title="AddThis utility frame" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" src="//ct2.addthis.com/static/r07/sh090.html#"></iframe></div>

which is not allowed, and as long as these are still present i can not suggest anything to correct the the problem, as these may be causing the problem.

Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted (edited)

Have I managed to remove it now? You mean this and should I remove it? 

and you have a div element inside the <head>...</head> element

<div id="banner"> </div>

Is this for the image position?

<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"> <iframe id="_atssh816" title="AddThis utility frame" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" src="//ct2.addthis.com/static/r07/sh090.html#"></iframe></div>

I appreciate your help, thanks again!

Edited by Zipman
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

It also looks like your page is missing the <html> and <head> tags. You have the doctype and then everything that should go in the head, but no <html> or <head> tags. Then shortly after the head ends and the body starts you have a meta tag, a title tag, and a style tag that should be in the head instead of the body.

Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted (edited)
link still shows what i have told you to fix in post12, post#14, not going any further until these are sorted.
I have changed it now, but the problem is still there. If I did it wrong, can you explain in a different way. For example, which row number I should move the code to, it will be easier to understand then, I think. fixcode.jpg I don't know what to do with this? 
<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;">[/color]  <iframe id="_atssh816" title="AddThis utility frame" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" src="//ct2.addthis.com/static/r07/sh090.html#"></iframe></div>

site-test

Edited by Zipman
Link to comment
Share on other sites
Guest So Called

Guest So Called

Posted
Posted (edited)

Move </HEAD> to just before <BODY>. (I presume you have <HTML> <HEAD> and other tags before the part you quoted.)

Edited by So Called
Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted (edited)

I have bought this theme and don't know why they were missing. I have added them to the code.

It also looks like your page is missing the <html> and <head> tags. You have the doctype and then everything that should go in the head, but no <html> or <head> tags.
I'm not sure exactly what code you mean, can you show it?
Then shortly after the head ends and the body starts you have a meta tag, a title tag, and a style tag that should be in the head instead of the body.
Edited by Zipman
Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted
Search the code for "meta" or "title", you'll find a meta tag, a title tag, and a style tag that are inside the body (after the "<body>" tag), and they should be in the head instead.
Can you tell which row number that I should move to head?kod2.jpg
Link to comment
Share on other sites
Zipman Newbie

Zipman

Posted
  • Author
Posted

No, only for the words meta, title and style. Did I understand your question correctly? I have learned a little code but not enough to understand what I'm doing. I usually check out what different things mean but it's not always I understand it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...