Image Slideshow. Confused..
Hello, I was wondering if anyone could help with this issue I'm having. I need to create an HTML based website which rotates images every x seconds; however I need to use java to code it. Presently I have
var dimages=new Array();
var numImages=7;
dimages[0]=new Image();
dimages[0].src="big1.jpg";
dimages[1]=new Image();
dimages[1].src="big2.jpg";
dimages[2]=new Image();
dimages[2].src="big3.jpg";
dimages[3]=new Image();
dimages[3].src="big4.jpg";
dimages[4]=new Image();
dimages[4].src="big5.jpg";
dimages[5]=new Image();
dimages[5].src="big6.jpg";
dimages[6]=new Image();
dimages[6].src="big7.jpg";
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
if (target)
{
document.myImage.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 2000);
}
else
{
setTimeout("swapPicture()", 500);
}
}
}
This doesn't work at all though, and I assume it's something silly. I don't actually know what to put here though if (document.images) I know it will be .images But i'm not entirely sure about the documents part. I get no errors, but I also get no slideshow :)
Thanks!
[1928 byte] By [
Petras2007] at [2007-11-20 11:15:07]
# 1 Re: Image Slideshow. Confused..
You mean JavaScript, not Java. That code seems a bit bulky and much of a waste. Try the following code. I wrote it off the top of my head, so there might be a few mistakes, but it looks right.
<img src="big1.jpg" id="theChanger" alt="" />
<script type="text/javascript">
var theImagesArray = ["big1.jpg", "big2.jpg", "big3.jpg", "big4.jpg", "big5.jpg"];
var theImages = [];
for(i = 0; i < theImagesArray.length; i++){
theImages[i] = new Image();
theImages[i].src = theImagesArray[i];
}
var curIndex = 1;
function changeImage(){
var theImage = document.getElementById('theChanger');
theImage.src = theImages[curIndex].src;
curIndex++;
if(curIndex == theImages.length){curIndex = 0;}
}
setInterval("changeImage()", 2000);
</script>
# 2 Re: Image Slideshow. Confused..
Hey, all seems good; however it doesn't seem to like the </script>
As a side note, this is being done through dreamweaver. I changed the script to ...
<img src="big1.jpg" id="theChanger" alt="" />
<script type="text/javascript">
var theImagesArray = ["big1.jpg", "big2.jpg", "big3.jpg", "big4.jpg", "big5.jpg","big6.jpg","big7.jpg"];
var theImages = [];
for(i = 0; i < theImagesArray.length; i++){
theImages[i] = new Image();
theImages[i].src = theImagesArray[i];
}
var curIndex = 1;
function changeImage(){
var theImage = document.getElementById('theChanger');
theImage.src = theImages[curIndex].src;
curIndex++;
if(curIndex == theImages.length){curIndex = 0;}
}
setInterval("changeImage()", 2000);
/script
Nothing really significant changed. The script layout is far superior then my previous one; however I still get the same issue of no picture rotation. This is my entire script (if that helps at all)
<!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>Jennifer's Gallery</title>
<script language="javascript">
image1 = new Image();
image1.src = "images/big1.jpg";
caption1 ="Beautiful Lake";
image2 = new Image();
image2.src = "images/big2.jpg";
caption2 ="Chester The Hamster";
image3 = new Image();
image3.src = "images/big3.jpg";
caption3 ="Nice Day at the cottage";
image4 = new Image();
image4.src = "images/big4.jpg";
caption4 ="Oliver oh so cute";
image5 = new Image();
image5.src = "images/big5.jpg";
caption5 ="Amazing sunset";
image6 = new Image();
image6.src = "images/big6.jpg";
caption6 ="Brute The Dog";
image7 = new Image();
image7.src = "images/big7.jpg";
caption7 ="Chu-chu train";
<img src="big1.jpg" id="theChanger" alt="" />
<script type="text/javascript">
var theImagesArray = ["big1.jpg", "big2.jpg", "big3.jpg", "big4.jpg", "big5.jpg","big6.jpg","big7.jpg",];
var theImages = [];
for(i = 0; i < theImagesArray.length; i++){
theImages[i] = new Image();
theImages[i].src = theImagesArray[i];
}
var curIndex = 1;
function changeImage(){
var theImage = document.getElementById('theChanger');
theImage.src = theImages[curIndex].src;
curIndex++;
if(curIndex == theImages.length){curIndex = 0;}
}
setInterval("changeImage()", 2000);
/script
function changeImage(img,cap) {
document.getElementById('bigimage').src = eval(img+".src");
document.getElementById('captions').innerHTML = cap;
}
count=1;
function slideShowNext() {
count++;
if(count>7) {
count=1;
}
document.getElementById('bigimage').src = eval ("image"+count+".src");
document.getElementById('captions').innerHTML = eval("caption"+count);
}
function slideShowPrevious() {
count--;
if(count<1) {
count=7;
}
document.getElementById('bigimage').src = eval ("image"+count+".src");
document.getElementById('captions').innerHTML = eval("caption"+count);
}
</script>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main"><img src="images/background_web.gif" alt="background" width="1024" height="768" /></div>
<div id="bigphoto"><img src="images/big1.jpg" name="bigimage" width="415" height="311" id="bigimage"></div>
<div id="captions">Beautiful Site</div>
<div id="links"><a href="#" onClick="slideShowPrevious()">Previous</a> <a href="#" onClick="slideShowNext()">Next</a></div>
<div id="thumbs">
<table width="604" border="0" align="center" cellpadding="6">
<tr>
<td width="100" height="134"><a href="#" onclick="changeImage('image1','Beautiful Lake')"><img src="images/thumb1.jpg" width="127" height="95" border="0"/></a></td>
<td width="100"><a href="#" onclick="changeImage('image2','Chester The Hamster')"><img src="images/thumb2.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image3','Nice Day at the cottage')"><img src="images/thumb3.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image4','Oliver oh so cute')"><img src="images/thumb4.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image5','Amazing sunset')"><img src="images/thumb5.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image6','Brute The Dog')"><img src="images/thumb6.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image7','Chu-chu train')"><img src="images/thumb7.jpg" width="127" height="95" border="0" /></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
# 3 Re: Image Slideshow. Confused..
Please remember to use [code] tags when posting code. I edited your previous posts to add them. Use them in the following manner.
[code]your code goes here[/code]
Hey, all seems good; however it doesn't seem to like the </script>
As a side note, this is being done through dreamweaver. I changed the script to ...
/script
This is completely invalid. It must be </script>. To put it any other way does not close the <script> tag. Remember that Dreamweaver is not good with JavaScript, it throws errors a lot.
Nothing really significant changed. The script layout is far superior then my previous one; however I still get the same issue of no picture rotation.
I tested mine before posting and it works perfectly. Copy and paste my code straight into your HTML and then preview it. There is no reason it should not work unless you have JavaScript disabled, or you have other JavaScript on your page which uses the same variable names.
Also, the type attribute is required on the script tag. You can also use language, but you must have the type in order for it to be valid.
<script type="text/javascript">
# 4 Re: Image Slideshow. Confused..
Thank you for editing it. I'll use that next time :). When I added the </script> back..it tossed all of the java code to the top of my webpage as though I was just typing it all in. This only happens when I close the script though.
<script type="text/javascript">
looks fine
it's the
</script>
which tosses the error.
Perhaps I'm overlooking something?
*I'm going to seperate my page into two different pages. If your code work for you, it should work for me. I just need to try another approach I think :) (an it didnt work heh)*
# 5 Re: Image Slideshow. Confused..
it's the </script> which tosses the error.
Like I said, Dreamweaver has issues with JavaScript. If you ignore the error, and just preview/save/view the page, all should work perfectly fine. Have you tried that?
# 6 Re: Image Slideshow. Confused..
Well, it's not really an error though. It's just printing the script as though it's text across the top of my website. Aside from that, I tried what you suggested and it didn't work. I'm starting to think dreamweaver isn't very dependable. Any other suggests? Maybe i'm putting the code in the wrong spot? Sorry for all the questions.
# 7 Re: Image Slideshow. Confused..
Maybe i'm putting the code in the wrong spot?
That is completely correct. After I looked a second time at your code, I noticed you have this in the <head> tag. You will notice that I have put HTML in the first line of my code. You cannot have HTML DOM tags in the head of the HTML document.
Copy and paste my exact code into the <body> tag. How does that work for you?
# 8 Re: Image Slideshow. Confused..
I tried to rearrange the code, and it still didnt work. I hope i'm not intruding by requesting this, but could you do a quick rearrange (the way it should look)?
# 9 Re: Image Slideshow. Confused..
Before I rearrange it for you, take out that extra comma at the end of the theImagesArray array. You can't have an extra comma unless you have an extra value to put.
# 10 Re: Image Slideshow. Confused..
I removed the comma and still the same persistant issue. :|
# 11 Re: Image Slideshow. Confused..
The following works perfectly fine to me. I added two comments where the changer begins and ends. You can copy and paste exactly that code to move it where you want it.
<!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>Jennifer's Gallery</title>
<script language="javascript">
image1 = new Image();
image1.src = "images/big1.jpg";
caption1 ="Beautiful Lake";
image2 = new Image();
image2.src = "images/big2.jpg";
caption2 ="Chester The Hamster";
image3 = new Image();
image3.src = "images/big3.jpg";
caption3 ="Nice Day at the cottage";
image4 = new Image();
image4.src = "images/big4.jpg";
caption4 ="Oliver oh so cute";
image5 = new Image();
image5.src = "images/big5.jpg";
caption5 ="Amazing sunset";
image6 = new Image();
image6.src = "images/big6.jpg";
caption6 ="Brute The Dog";
image7 = new Image();
image7.src = "images/big7.jpg";
caption7 ="Chu-chu train";
function changeImage(img,cap) {
document.getElementById('bigimage').src = eval(img+".src");
document.getElementById('captions').innerHTML = cap;
}
count=1;
function slideShowNext() {
count++;
if(count>7) {
count=1;
}
document.getElementById('bigimage').src = eval ("image"+count+".src");
document.getElementById('captions').innerHTML = eval("caption"+count);
}
function slideShowPrevious() {
count--;
if(count<1) {
count=7;
}
document.getElementById('bigimage').src = eval ("image"+count+".src");
document.getElementById('captions').innerHTML = eval("caption"+count);
}
</script>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- BEGIN CHANGER -->
<img src="big1.jpg" id="theChanger" alt="" />
<script type="text/javascript">
var theImagesArray = ["big1.jpg", "big2.jpg", "big3.jpg", "big4.jpg", "big5.jpg", "big6.jpg", "big7.jpg"];
var theImages = [];
for(i = 0; i < theImagesArray.length; i++){
theImages[i] = new Image();
theImages[i].src = theImagesArray[i];
}
var curIndex = 1;
function changeImage(){
var theImage = document.getElementById('theChanger');
theImage.src = theImages[curIndex].src;
curIndex++;
if(curIndex == theImages.length){curIndex = 0;}
}
setInterval("changeImage()", 2000);
</script>
<!-- END CHANGER -->
<div id="wrapper">
<div id="main"><img src="images/background_web.gif" alt="background" width="1024" height="768" /></div>
<div id="bigphoto"><img src="images/big1.jpg" name="bigimage" width="415" height="311" id="bigimage"></div>
<div id="captions">Beautiful Site</div>
<div id="links"><a href="#" onClick="slideShowPrevious()">Previous</a> <a href="#" onClick="slideShowNext()">Next</a></div>
<div id="thumbs">
<table width="604" border="0" align="center" cellpadding="6">
<tr>
<td width="100" height="134"><a href="#" onclick="changeImage('image1','Beautiful Lake')"><img src="images/thumb1.jpg" width="127" height="95" border="0"/></a></td>
<td width="100"><a href="#" onclick="changeImage('image2','Chester The Hamster')"><img src="images/thumb2.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image3','Nice Day at the cottage')"><img src="images/thumb3.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image4','Oliver oh so cute')"><img src="images/thumb4.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image5','Amazing sunset')"><img src="images/thumb5.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image6','Brute The Dog')"><img src="images/thumb6.jpg" width="127" height="95" border="0" /></a></td>
<td width="100"><a href="#" onclick="changeImage('image7','Chu-chu train')"><img src="images/thumb7.jpg" width="127" height="95" border="0" /></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
# 12 Re: Image Slideshow. Confused..
Still nothing. Perhaps I should just call it a day? After using your exact code it disables my botton bar of clickable images (which isnt a big deal if I could get the main pictures to change on their own lol :P). Any other suggestions? What am I doing wrong heh.
Also, might i ask what program you're using to view this in?
# 13 Re: Image Slideshow. Confused..
Also, might i ask what program you're using to view this in?
I write all my code by hand because I hate Dreamweaver with a passion, and dislike GoLive. As for browsers, it worked in Safari, Firefox, and IE for me.
