Image Rotator/Swapper

  • (2 Pages)
  • +
  • 1
  • 2

26 Replies - 3043 Views - Last Post: 14 December 2010 - 07:25 AM

#1 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Image Rotator/Swapper

Posted 05 December 2010 - 05:49 AM

Hi Guys,

I am building a website for a friend, and she has asked me to make an image rotator on the home page, basically there will be a folder of images on the server and she wants the images to rotate on the home page. I have experience with XHTML, CSS, PHP & MySql hence why she has asked me, but Javascript is something I have always wanted to get into but never got around to, although I do have experience with C++ so the syntax is familiar to me. I have googled a number of solutions and cannot understand them, and I don't want to use code I don't understand. So... would someone be so kind as to help me with this...

so far I have:
function swap_img()
{
  /*Here I create an array to hold image paths*/
  var imgs = new Array("/images/rotating_images/meg.jpg","/images/rotating_images/student.jpg");
	
  /*An infinite loop so that images continue to swap?*/
  while(1)
  {
        /*This was just temporary to test it*/
        var time = new Date();
	/*As was this*/	
	if(time.getSeconds() == 10 || time.getSeconds() == 30 || time.getSeconds() == 60)
	{
	  document.getElementById("home_img").style.backgroundImage = imgs[Math.floor(Math.random()*imgs.length)];
	}
  }
}


Also javascript doesnt appear to be working on the home page, I have tried just document.write and some text and nothing shows?

Any help is greatly appreciated

This post has been edited by 4D1: 05 December 2010 - 05:59 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Image Rotator/Swapper

#2 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Image Rotator/Swapper

Posted 05 December 2010 - 06:50 AM

Depends how this function is called and on the HTML. What is calling swap_img()?

What you're doing, though, is calling time.getSeconds() as fast as the client's computer can. Your browser will use 100% CPU during this and you will be taken off the Christmas card list. You should look into using setInterval(..) to schedule your function to run periodically.

Your actual problem is probably that backgroundImage takes the same format string as the CSS attribute background-image - eg url(mypic.jpg). So you want something like:
    document.getElementById("home_img").style.backgroundImage = 'url(' + imgs[Math.floor(Math.random()*imgs.length)] + ')';

Was This Post Helpful? 1
  • +
  • -

#3 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 05 December 2010 - 07:02 AM

Thanks Moopet, especially for the setInterval suggestion, that is definately what I am looking for. I still can't get it working though, here is all the code, would you be so kind as to point out where I am going wrong?

js_functions.js, now has 2 functions, 1 to init arrays etc the other to actually swap the image
function init_img()
{
	var imgs = new Array("/images/rotating_images/student.jpg");
	
	setInterval("swap_img(imgs)", 5000);
}

function swap_img(imgs)
{
	document.getElementById("main").style.backgroundImage = ' url('+imgs[Math.floor(Math.random()*imgs.length)])+');';
}


index.php
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="styles/main.css" />	
		<script language="javascript" src="includes/functions/js_functions.js"></script>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="logo"><a href="index.php"><img src="images/site/cs-*********.png" alt="********* **********" /></a></div>
			<div id="contact"><img src="images/site/contact.png" alt="Contact me on 07" /></div>
			<div id="dynav"></div>
			<div id="navBar">
				<?php include('includes/navBar.php');?>
			</div>
			<div id="main"><script type="text/javascript">init_img();</script></div>
			<div id="footer"></div>
		</div>
	</body>
</html>


main.css
#main
{
	width: 880px;
	height: 450px;
	position: relative;
	float: left;
	background-image: url('../images/site/home_img.jpg');
}

This post has been edited by 4D1: 05 December 2010 - 07:15 AM

Was This Post Helpful? 0
  • +
  • -

#4 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 04:55 AM

Bump
Was This Post Helpful? 0
  • +
  • -

#5 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 05:03 AM

Oh, setInterval doesn't work like that, sorry. It evals the string you give it outside your context - so it's trying to run swap_img(imgs) with no idea what "imgs" is
function swap_img()
{
	var imgs = new Array("/images/rotating_images/student.jpg");
	document.getElementById("main").style.backgroundImage = ' url('+imgs[Math.floor(Math.random()*imgs.length)])+');';
}

setInterval("swap_img()", 5000);


should do the trick

This post has been edited by moopet: 06 December 2010 - 05:03 AM

Was This Post Helpful? 0
  • +
  • -

#6 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 06:05 AM

Hi moopet,

Thanks for your help so far, will this not re-initialise the array each time?

This post has been edited by 4D1: 06 December 2010 - 06:06 AM

Was This Post Helpful? 0
  • +
  • -

#7 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 06:34 AM

Yes, but it's not a problem - it gets de-allocated as soon as the function ends and is pretty trivial for the browser to do. It's just a quick way of getting it working. You could do more thorough, genericised code but it's harder to explain and probably not worth it.
Was This Post Helpful? 0
  • +
  • -

#8 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 06:41 AM

Ok thanks, I think the reason I am having so many problems and not being able to work around them myself is becuase the function doesnt appear to be getting called at all

function swap_img()
{
    alert("Function is running");
    var imgs = new Array("/images/rotating_images/student.jpg");

    document.getElementById("main").style.backgroundImage = ' url('+imgs[Math.floor(Math.random()*imgs.length)])+');';
}


I changed the code to this to see if it was being called and it seems it is not... Is there something wrong with this:

<div id="main"><script type="text/javascript">setInterval("swap_img()", 1000);</script></div>


No message box appears

This post has been edited by 4D1: 06 December 2010 - 06:42 AM

Was This Post Helpful? 0
  • +
  • -

#9 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Image Rotator/Swapper

Posted 06 December 2010 - 04:37 PM

usually when JS fails to execute, it has syntax errors. Consider this bit in your code:
imgs[Math.floor(Math.random()*imgs.length)])


It has a mismatched Parentheses at the end.
Was This Post Helpful? 1
  • +
  • -

#10 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 07 December 2010 - 04:05 AM

Ahhh so it does, thanks, I thought it would have ran upto the error, but I guess not.
Was This Post Helpful? 0
  • +
  • -

#11 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 07 December 2010 - 07:12 AM

Hi Moopet & forest51690,

Sorry to be a pest, you where absolutely right forest and the function now runs, however it is not doing what I expected. It did append style="" inline to <div id=""> but did not fill the style in??? I assumed this may have been becuase I am using an external style sheet, so I altered the <div id="main"> to include an inline background style in the hope that it would ammend this style, but it didn't. While I have learned that if javascript doesnt run it is probably a syntax error which will save me hours in the future, I would really like to get this running... Is it the DOM structure that is wrong???

I thought because it did append a style="" to the main div I could use:
document.getElementById("main").style = 'background-image: url('+imgs[Math.floor(Math.random()*imgs.length)]+');';


But that didnt work and the original .backgroundImage way dosnt either, I am sure this is probably some oversight on my part but if someone can help me correct I will hoepfully learn from it.
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,033
  • Joined: 08-June 10

Re: Image Rotator/Swapper

Posted 07 December 2010 - 07:35 AM

.style is a stylesheet object and you only can change its properties. look at the code 4D1 provided. alternately you can use .style’s .cssText property:
document.getElementById("main").style.cssText = 'background-image: url(…);'

Was This Post Helpful? 0
  • +
  • -

#13 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 07 December 2010 - 07:40 AM

View PostDormilich, on 07 December 2010 - 06:35 AM, said:

.style is a stylesheet object and you only can change its properties. look at the code 4D1 provided. alternately you can use .style’s .cssText property:
document.getElementById("main").style.cssText = 'background-image: url(…);'


Sorry Dormilich dont quite get what you mean, are you saying look at the code provided somewhere else? Or my own code?
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,033
  • Joined: 08-June 10

Re: Image Rotator/Swapper

Posted 07 December 2010 - 08:05 AM

yepp, I did. the code example 4D1 posted in post #8.
Was This Post Helpful? 0
  • +
  • -

#15 4D1  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 225
  • Joined: 22-October 09

Re: Image Rotator/Swapper

Posted 07 December 2010 - 09:29 AM

Dormilich, I am 4D1 and the code I used there isnt working...
Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2