Jump to content

slideshow not working


learnerdeveloper

Recommended Posts

Found a video on youtube about slideshow, but it is not working only 1 photo appears on the screen but not the rest and slideshow doesn't work.

 

here is the youtube video i followed:

 

Here is my code i put in my html file document page:

 

<script type="text/javascript">Var image1 = new image()image1.src="thailand village.jpg"Var image2 = new image()image2.src="_MG_1994.jpg"Var image3 = new image()image3.src=".jpg"Var image4 = new image()image4.src="print3.jpg"Var image5 = new image()image5.src="Philippines Boracay.jpg"Var image6 = new image()image6.src="school transpot cycle rickshaw in old delhi2.jpg"Var image7 = new image()image7.src="local home in Jaisalmer town.jpg"Var image8 = new image()image8.src="DSCN5053.jpg"Var image9 = new image()image9.src=".jpg"Var image10 = new image()image10.src="DSCN5048.jpg"Var image11 = new image()image11.src="DSCN5023.jpg"Var image12 = new image()image12.src="DSCN4948.jpg"Var image13 = new image()image13.src="DSCN3870.jpg"Var image14 = new image()image14.src="DSCN3845.jpg"Var image15 = new image()image15.src="DSCN3844.jpg"Var image16 = new image()image16.src="DSCN3835.jpg"Var image17 = new image()image17.src="DSCN3833.jpg"Var image18 = new image()image18.src="DSCN3832.jpg"Var image19 = new image()image19.src="DSCN3778.jpg"Var image20 = new image()image20.src="DSCN3764.jpg"Var image21 = new image()image21.src="DSCN2596.jpg"Var image22 = new image()image22.src="DSCN2131.jpg"Var image23 = new image()image23.src="Agra.1.jpg"Var image24 = new image()image24.src="8250095229_b29953c3a0_b.jpg"Var image25 = new image()image25.src="girl.jpg"Var image26 = new image()image26.src="_MG_3094.jpg"Var image27 = new image()image27.src="_MG_3030.jpg"Var image28 = new image()image28.src="_MG_2485.jpg"Var image29 = new image()image29.src="8248131413_b9d468acf0_c.jpg"Var image30 = new image()image30.src="_MG_2418.jpg"Var image31 = new image()image31.src="_MG_2343.jpg"Var image32 = new image()image32.src="_MG_2325.jpg"Var image33 = new image()image33.src="_MG_1914.jpg" </script> <style> body{background-color:blue; margin: 0 auto; text-align:center} </style><link rel="stylesheet" href="style_folio.css"> </head> <body> <img src="thailand village.jpg" name="slideshow" alt="imageslideshow"> <script type="text/javascript"> var numberImage = 1 function myslide() { document.images.slideshow.src=eval("image" +numberImage+".src") If(numberImage < 33 ) numberImage = numberImage + 1 else numberImage = 1 SetTimeout("myslide()", 4500) } myslide() </script>

Edited by learnerdeveloper
Link to comment
Share on other sites

It will work in quotes, but if you want to remove the quotes you also have to remove the parentheses, because setTimeout takes a function reference, not the return value of the function.

Link to comment
Share on other sites

thank you guys. This site is wonderful so much help from everyone :)

 

Var should all be lowercase as in var.

I put all the var as lowercase (showing up properly as i am doing this in notepad++) and put that 'I' for Image()as uppercase.

 

But my slideshow still dosen't work, it stays on one image and doesn't move show any other photos.

 

Any help please.

 

5ad2b3400347954.jpg

 

57db3e400350778.jpg

Edited by learnerdeveloper
Link to comment
Share on other sites

Reduce images to 3 in total, then test it, match sure images.src equal file name exactly matching uppercase and lowercase file name and extension. Make sure images are in same folder as html page.If still a problem, press f12 and look for script tab, reload/refresh and make note of any error messages that appears.

Link to comment
Share on other sites

Try...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><link rel="stylesheet" href="style_folio.css"><style>body{ background-color:blue; margin: 0 auto; text-align:center}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = slideshow;var img = [];img[0] = new Image();img[0].src = "DSCN5048.jpg";img[1] = new Image();img[1].src ="DSCN5023.jpg";img[2] = new Image();img[2].src = "DSCN4948.jpg";img[3] = new Image();img[3].src = "DSCN3870.jpg";img[4] = new Image();img[4].src = "DSCN3845.jpg";img[5] = new Image();img[5].src = "DSCN3844.jpg";var numberImage = 1;function slideshow() {  document.getElementById('slide').src = img[numberImage].src;  document.getElementById('slide').alt = img[numberImage].src +' not found';  numberImage++;  if(numberImage >= img.length){    numberImage = 0;  }   setTimeout(slideshow, 4500);}</script></head><body><img src="DSCN5048.jpg" id="slide" alt="imageslideshow"/></body>    </html>
Link to comment
Share on other sites

Might be better not to repeat new Image() all the time, concentrate on src array, and alt array ( if required) and create array of new Image() objects at end with for loop.

        <script type="text/javascript">            var imageObj=[];            var imgSrc = [];            window.onload = slideshow;            imgSrc[0] = "images/img1_L.jpg";            imgSrc[1] = "images/img2_L.jpg";            imgSrc[2] = "images/img3_L.jpg";            for (i = 0; i < imgSrc.length; i++)            {                imageObj[i] = new Image();                imageObj[i].src = imgSrc[i];            }            var numberImage = 0;            function slideshow() {                document.getElementById('slide').src = imgSrc[numberImage];                document.getElementById('slide').alt = imgSrc[numberImage] + ' not found';                numberImage++;                if (numberImage >= imgSrc.length) {                    numberImage = 0;                }                setTimeout(slideshow, 4500);            }        </script>
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
×
×
  • Create New...