JavaScript - Slider Image Doesn't Display When Live

Hello,

I'm trying to find an image slider and gallery script that will let me do this:
http://www.7dma.com/clients/poncecol...er_gallery.jpg

When clicked, the bottom product thumbnails change the large product image. Smaller, right-side thumbnails let you change different color versions of the large product image.

Also, the text to the left and right will be updated in a CMS (I mention this just FYI).

If you know how to accomplish this and what script(s) to use, I'll forever be in your debt.

Thank you for taking the time to read this post.

Hi,

I ve recently come across the Advanced jQuery background image slideshow by Marco Folio. I have implemented it fine but when it goes to load an image I get a black screen for a second or two. I have about 15 images and reading around I found out that it has to do with the loading of images and that it would be better adding an image preloader to it. I have tried several pre loaders and have got the to work on their own, but not with this slider. This is the script.js

Code:

var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [  
			 {
		"title" : "",
		"image" : "1.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "2.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "3.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "4.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "5.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	},{
		"title" : "",
		"image" : "6.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "7.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "8.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "9.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}, {
		"title" : "",
		"image" : "10.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	},
	{
		"title" : "",
		"image" : "11.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	},
	{
		"title" : "",
		"image" : "12.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	},
	{
		"title" : "",
		"image" : "13.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	},
	{
		"title" : "",
		"image" : "14.jpg",
		"url" : "#",
		"firstline" : "",
		"secondline" : ""
	}
			  
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -400;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});

and this is the part of the html where it is added:

Code:

<div id="header_top">
	<div id="headerimgs">
		<div id="headerimg1" class="headerimg"></div>
		<div id="headerimg2" class="headerimg"></div>
  </div>
</div>

I would like to load 2 images on page load and then while it is displaying the 2 images to download to the browser cache the rest. Could you point me in the right direction.

Thanks

I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it?

I am using a JQuery Slider function in one of my forms that has the folowing code:

Code:

<script>
	$(function() {
		$( "#slider" ).slider({
			value:100,
			min: 0,
			max: 100,
			step: 1,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value + "% Clear" );
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
	});
</script>

And the form looks like:
Code:

<form method=POST etc...>
<div id="slider"></div>
      <span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>

Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again.

However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks!

does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?

I'm working on a website. Basic layout is up at http://adamnerland.com/onestudent/

The layout looks perfect and the image slider I'm using works in every browser I've tested except for IE 7.0 and earlier. I'm not a JavaScript programmer, so I'm not really sure how to debug this. Is it due to conflicts with my dropdown menu JavaScript? Anyone have any ideas?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
    display: none;
    width: 500px;
    height: 500px;
	}
</style>
<script type="text/javascript">
		
var img = [];
	img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };
	img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", 
			  cap: "", 
			  url: "", 
			  des: ""
			  };

for (var imgs=[], i=0; i<img.length; i++){
	imgs[i] = new Image();
	imgs[i].src = img[i].src;
		}
		
			
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;


function fade(){
	if(fadeTimer){clearInterval(fadeTimer);}
	fadeTimer = setInterval(setOpacity,speed);
		}

function setOpacity() {
	curOpac += opacStep * dirn;

	if (curOpac < 0){
		swapImage();
		curOpac = 0;
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==1) ? 0 : 1 ;
			}
		
		dirn = 1;
		fade();
		return;
			}
   
	if (curOpac > 10){
		curOpac = 10;
		clearInterval(fadeTimer);
		
		document.getElementById("autoPic").onclick = function(){
			dirn = (dirn==-1) ? 0 : -1 ;
			}
		
		dirn = -1;
		setTimeout(fade,1000);
		return;
			}


	if (imgSlider.style.opacity=="string"){
		imgSlider.style.opacity = curOpac/10;
			}
	else {
		imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
		imgSlider.style.MozOpacity = curOpac/10;
			}
		
		}


function swapImage(){
	curPic = (++curPic > img.length-1) ? 0 : curPic;
	imgSlider.src = img[curPic].src;
		}


 function prevImage(){
	
	document.getElementById("prevImage").onclick = function fade(){
		if(fadeTimer){clearInterval(fadeTimer);}
		fadeTimer = setInterval(setOpacity,speed);
			}

	function setOpacity() {
		curOpac += opacStep * dirn;
	
		if (curOpac < 0){
			swapImage();
			curOpac = 0;
			dirn = 1;
			fade();
			return;
				}
   
		if (curOpac > 10){
			curOpac = 10;
			clearInterval(fadeTimer);
			dirn = -1;
			document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
			return;
				}
	
	
		if (imgSlider.style.opacity=="string"){
			imgSlider.style.opacity = curOpac/10;
				}
		else {
			imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
			imgSlider.style.MozOpacity = curOpac/10;
				}
			
			}


function swapImage(){
	curPic = (--curPic < 0)? img.length-1 : curPic;
	imgSlider.src = img[curPic].src;
		}

	
	}

 

window.onload = function(){
	imgSlider = document.getElementById('imgSlides');
	imgSlider.src = img[curPic].src;
	imgSlider.style.display = 'inline';
	document.getElementById("autoPic").onclick = fade;
	 prevImage(); 

		}

</script>
</head>
<body>

<img id="imgSlides" src="" alt="" />
<br />
 <a id="prevImage" href="#">PREV</a> 
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>

</body>
</html>

I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed.

Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step)

But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem.

Can anyone explain a bit why it works in IE but not in Firefox?

HI friends.,

i am having a problem with using image slider script and pretty photo in one page.

i have hosting website at two diffrent places.
it is working fine here...http://codersonline.co.cc/sgreens-de...hp?option=unit

but giving problem at http://www.savitrygreens.com/DeMo/index.php?option=unit


really frustrated... don't know how to use noconflict method
please help..

Something similar to the navigation menu on http://www.gamewearteamsports.com/. You hover over a link and a box appears below that spreads the width of the menu itself. Friend of mine told me it was using actionscript but I have no idea how to create a drop down box (not menu). Any ideas? My friend told me Dreamweaver has the ability t create a drop down box but I have no idea.

Also does anyone know how to create an image slider similar to the one on that site? A slider that fades from one image to the next with the navigation arrows on the left and right side and the dots on top left?

hi,

on my site: http://helix3d.previewsite.co.uk/marketing.html the images slide onto the next when the numbers are clicked, I would like to have this functionality on the actual image... need a bit of help here?!

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Helix</title>
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" title="default" /><!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
        
    $('#slideshow1').after('<div id="nav1" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav1',
        befo  onBefore
    });
    $('#slideshow2').after('<div id="nav2" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav2',
        befo  onBefore
    });
    $('#slideshow3').after('<div id="nav3" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav3',
        befo  onBefore
    });
    $('#slideshow4').after('<div id="nav4" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav4',
        befo  onBefore
    });
    $('#slideshow5').after('<div id="nav5" class="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav5',
        befo  onBefore
    });
    
        function onBefore() {
        $('#title').html(this.alt);
    }
});

</script>
</head>
<body>
<div id="top">
<div id="topwrapper">
	<a href="index.html"><div id="logo">
		&nbsp;
	</div></a>
	<ul id="rightnav">
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="news.html" title="News">News</a></li>
		<li><a href="services.html" title="Services">Services</a></li>
		<li><a href="archive.html" title="Archives">Archive</a></li>
		<li><a href="finishes.html" title="Finishes">Finishes</a></li>
		<li><a href="showreel.html" title="Showreel">Showreel</a></li>
		<li><a href="contact.html" title="Contact">Contact</a></li>
	</ul>
	<nav>
		<ul>
			<li><a href="events.html" title="HELIX EVENTS">HELIX EVENTS</a></li>
			<li><a href="marketing.html" title="HELIX EXPERIENTIAL MARKETING" class="menuselected">HELIX EXPERIENTIAL MARKETING</a></li>
			<li><a href="film.html" title="HELIX FILM &AMP; TV SET CONSTRUCTION">HELIX FILM &AMP; TV SET CONSTRUCTION</a></li>
			<li><a href="exhibitions.html" title="HELIX EXHIBITIONS">HELIX EXHIBITIONS</a></li>
			<li><a href="interiors.html" title="HELIX COMMERCIAL INTERIORS">HELIX COMMERCIAL INTERIORS</a></li>
		</ul>
	</nav>
	<div class="line">&nbsp;</div>
</div>
</div>
<div id="content">
	<section id="slider">
		<div id="viewport">
			<div id="container"> 
				<div id="section-1" class="section">
				   <img src="images/hero_experiential.jpg">
				</div>
			</div>
		</div>
	</section>
	<div class="line">&nbsp;</div>
	<div id="left">
	<h1>HELIX  MARKETING</h1>
  <p>We help brands and agencies create experiences that excite, surprise and delight. Our attention to detail and fast-paced production bring your experiential marketing to life and ensure memorable, positive brand connections.</p>
	</div>
	<div id="right">
	<img src="images/quote-marketing.gif" alt="Marketing quote" />
  <ul>
  <li class="youtube"><a href="#"><img src="images/yt.png" alt="youtube" /></a></li>
  <li class="twitter"><a href="#"><img src="images/twit.png" alt="Twitter" /></a></li>
  <li class="facebook"><a href="#"><img src="images/fb.png" alt="Facebook" /></a></li>
  </ul>
  </div>
  <div class="clear">&nbsp;</div>
<div class="dashedlinetop">&nbsp;</div>
		<div id="box1">
			<h1>01</h1>
			<h2>V Hand</h2>
			<p>We were contracted by Speed Communications PR to turn ideas from the creative team at The Game Changer into reality. The concept was a giant hand over 30 ft tall making the V for Virgin sign, designed to look as if it had burst up through the ground.</p>
			<ul>
	      <li><strong>Key people:</strong></li>
				<li>Client: Virgin Business Media.<br>
				  Agency : Speed Communications.<br>
				  Creative : The Game Changer<br>
			    Location : Canary Wharf</li>
			</ul>
		  <div id="casestudy1"><a href="case-study-virgin.html">CASE STUDY</a></div>
	        <div id="slideshow1" class="pics">
	            <img src="images/marketing/virgin1.jpg" alt="1"/>
	            <img src="images/marketing/virgin2.jpg" alt="2"/>
	           	<img src="images/marketing/virgin3.jpg" alt="3"/>
	            <img src="images/marketing/virgin4.jpg" alt="4"/>
	            <img src="images/marketing/virgin5.jpg" alt="5"/>	        </div>
  </div>
	<div class="dashedlinebottom">&nbsp;</div>
	<div class="dashedlinetop">&nbsp;</div>
		<div id="box2">
			<h1>02</h1>
			<h2>Cat Walk</h2>
			<p>We were commissioned by Mischief PR to design, manufacture and project manage the installation of the world's first car mounted fashion catwalk. We scoured London for priceless shoot locations normally off limits and organised logistics to enable a super fast, film shoot set up.</p>
			<ul>
	      <li><strong>Key people:</strong></li>
				<li>Client : Vauxhall.<br>
				  Agency : Mischief PR.<br>
				  Creative : Dan Glover.<br>
			    Location : St Paul's Cathedral</li>
			</ul>
			
			<div id="slideshow2" class="pics">
	            <img src="images/marketing/carwalk1.jpg" alt="1"/>
	            <img src="images/marketing/carwalk2.jpg" alt="2"/>
	           	<img src="images/marketing/carwalk3.jpg" alt="3"/>
	            <img src="images/marketing/carwalk4.jpg" alt="4"/>
	            <img src="images/marketing/carwalk5.jpg" alt="5"/>	        </div>
  </div>
	<div class="dashedlinebottom">&nbsp;</div>
	<div class="dashedlinetop">&nbsp;</div>
		<div id="box3">
			<h1>03</h1>
			<h2>Tower of Terror</h2>
			<p>As the centre piece of the European launch of the Disney's new Tower Of Terror ride in Paris, Cow PR commissioned us to design and build a full seized replica model of a lift car from the ride. The twist was that the lift had to look as if it had crash landed!</p>
			<ul>
	      <li><strong>Key people:</strong></li>
				<li>Client : Disney<br>
				  Agency : Cow PR<br>
				  Creative : Claire Myddleton<br>
			    Location : Leicester Square</li>
			</ul>
			
			<div id="slideshow3" class="pics">
	            <img src="images/marketing/tot1.jpg" alt="1"/>
	            <img src="images/marketing/tot2.jpg" alt="2"/>
	           	<img src="images/marketing/tot3.jpg" alt="3"/>
	            <img src="images/marketing/tot4.jpg" alt="4"/>
	            <img src="images/marketing/tot5.jpg" alt="5"/>	        </div>
  </div>
	<div class="dashedlinebottom">&nbsp;</div>
	<div class="dashedlinetop">&nbsp;</div>
		<div id="box4">
			<h1>04</h1>
			<h2>Ice Age 3</h2>
			<p>The set for this experiential brief; for 20th Century Century Fox's Ice 3 movie launch, was designed in house by Brian Dowling. The experience included an chilled Ice Cave and a jungle equipped with rock faces, real plants, a bridge, a lake and heated humidified air. </p>
			<ul>
	      <li><strong>Key people:</strong></li>
				<li>Client.: 20th Century Fox.<br>
				  Agency : Designwerk<br>
				  Creative : Scott and Ed<br>
			    Location : CWOA</li>
				
			</ul>
			
			<div id="slideshow4" class="pics">
	            <img src="images/marketing/ice1.jpg" alt="1"/>
	            <img src="images/marketing/ice2.jpg" alt="2"/>
	           	<img src="images/marketing/ice3.jpg" alt="3"/>
	            <img src="images/marketing/ice4.jpg" alt="4"/>
	            <img src="images/marketing/ice5.jpg" alt="5"/>	        </div>
  </div>
	<div class="dashedlinebottom">&nbsp;</div>
	<div class="dashedlinetop">&nbsp;</div>
		<div id="box5">
			<h1>05</h1>
			<h2>Hanging gardens of paddington</h2>
			<p>When Mischief PR wanted to create "The Hanging Gardens of Paddington" for the launch of boutique Hotel Indigo there was only one company on the call sheet. We devised a plan to cantilever the giant basket 40ft above the street, the story went global, the launch was a huge success.</p>
			<ul>
	      <li><strong>Key people:</strong></li>
				<li>Client : International Hotel Group<br>
				  Agency : Mischief PR<br>
				  Creative : Dan Glover<br>
			    Location : Paddington</li>
				
			</ul>
			
			<div id="slideshow5" class="pics">
	            <img src="images/marketing/basket1.jpg" alt="1"/>
	            <img src="images/marketing/basket2.jpg" alt="2"/>
	           	<img src="images/marketing/basket3.jpg" alt="3"/>
	            <img src="images/marketing/basket4.jpg" alt="4"/>
	            <img src="images/marketing/basket5.jpg" alt="5"/>	        </div>
  </div>
	<div class="dashedlinebottom">&nbsp;</div>
	<footer>
	<ul>
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="events.html" title="Events Design">Events Design</a></li>
		<li><a href="marketing.html" title="Marketing Design">Marketing Design</a></li>
		<li><a href="film.html" title="Film &amp; Set Design">Film &amp; Set Design</a></li>
		<li><a href="exhibitions.html" title="Exhibition Design">Exhibition Design</a></li>
		<li><a href="interiors.html" title="Commercial Interior Design">Commercial Interior Design</a></li>
		<li><a href="#" title="Sitemap">Sitemap</a></li>
		<li><a href="contact.html" title="Contact Helix Ltd">Contact Helix Ltd</a></li>
		<li><a href="news.html" title="Latest Helix News">Latest Helix News</a></li>
		<li><a href="careers.html" title="Careers">Careers</a></li>
	</ul>
	<!--<div class="copyright">&copy;2011 Helix </div> -->
</footer>
</div> <!-- end content -->
</body>
</html>

Hey.

I am looking for a gallery/image slider script that looking like this image/or does the same as the image below:


Something like that or similar if anyone knows a link to one or knows the code please help.

Thanks for reading.

Mark.

Does anyone know the code/script that is used for the image slider and the category switcher (where it says Our Games) as seen on http://en.popmog.com/games? I have no idea how to create something similar on my own site.

I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me:

http://bedrockstoneanddesign.com/

It only happens in FireFox.....

any help is appreciated. thanks

Hi, can someone look at my code and tell me why the animated GIF doesn't display? It is a rollover button and it's done in javascript. The mouseover file is profileani.gif. The image displays but it doesn't do the animation. The site is http://www.creationindex.com/indextest22.html If you just move the mouse around on the screen you'll see the rollover. Thank you.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slayeroffice Image Slider (altered)</title>
<script>

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

for(var image=[], p=0; p<img.length; p++){
	image[p] = new Image();
	image[p].src = img[p];
	}

var current = 0;

window.onload = function so_init() {
	if(!document.getElementById || !document.createElement){
		return;
		}

	 for(var q=0; q<img.length; q++){
		imgs = document.createElement("img");
		imgs.src = img[q];
		img[q].style.display = "none";
		document.getElementById("imageContainer").appendChild(imgs.cloneNode(true)); 
		}
	
	for(i=1;i<img.length;i++){
		img[i].xOpacity = 0;
		}
	img[0].style.display = "block";
	img[0].xOpacity = .99;
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1] ? current+1 : 0; 
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05; 
	nOpacity+=.05;

	img[current].xOpacity = cOpacity;
	img[nIndex].xOpacity = nOpacity;

	img[nIndex].style.display = "block";
	setOpacity(img[current]); 
	setOpacity(img[nIndex]);
	
	if(cOpacity<=0) {
		img[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} 

	else {
		setTimeout(so_xfade,100);
	}
}

function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}


</script>
<style>
#imageContainer {
	height:309px;
}

#imageContainer img {
	width:500px;
	height:309px;
	position:absolute;
	top:0; left:0;
}
</style>
</head>
<body>
<div id="imageContainer">
 <!--
		<img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />
		<img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />
		<img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />
		<img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" />
--> 
</div>
</body>
</html>

The script works if the images are stored within the HTML but
when I try to store them in the JS array, it fails.
Is there any way to store the images in JS with this script?