Login | Iscriviti | FAQ
Anonymous

Lesson 17

+ Rispondi al messaggio

4 messaggi Pagina 1 di 1


Lesson 17

da Catriona » mer gen 16, 2013 1:44 pm

Hi, I have completed the script for the photogallery and ckecked and double checked the code and ensured my image path and array is correct, but it does not move from the 1st image - any idea why?

Thanks

Catriona
Avatar utente

Catriona

  • Messaggi: 13
  • Iscritto il: mer nov 07, 2012 10:56 am

Lesson 17

da Catriona » gio gen 17, 2013 10:28 am

Here's the code

<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<style type="text/css">
#gallery
{
Width:427px;
height:320px;
margin: 0 auto;
border:2px solid #ccc;
}
</style>
</head>
<body>
<h1>Lesson 17: My Photo Gallery</h1>

<div id="gallery">

<img src="1a.jpg" id="Photo gallery image" id="photo" />
<input type="button" id="btnStart" value="Restart gallery" />
<input type="button" id="btnStop" value="Stop gallery" />

</div>

<script type="text/javascript" src="lesson17.js"></script>


</body>
</html>


//Global variables: a reference to the
//photo currently displayed on the page,
var curImage = document.getElementById("photo");
//a variable to store the timer,
var galleryStarter;
//a variable to store a true/false value indicating
//to the program whether the gallery is on or off,
var isGalleryOn = true;
//an array containing 4 strings representing the filepaths
//to the image files in the images folder,
var images = ["1a.jpg", "2a.jpg", "3a.jpg", "4a.jpg"];
//an empty array that will be filled with 4 preloaded
//image objects: the src property of these image objects will correspond
//to the filepaths contained in the images[] array,
var preloadedImgs = [];
//a variable that works as our counter to
//advance from one image to the next. It starts at 0.
var counter = 0;
/***********************************************/

//Init() starts with the image preloading routine.
//First fill the preloadingImgs[] arrays with a
//number of image objects corresponding to the length
//of the images[] array:
function init()

{

for (var i = 0; i < images.length; i++)

{

preloadedImgs[i] = new Image();

}

//now assign the value of the strings contained in the
//images[] array to the src property of each image object
//in the preloadedImgs[] array, using one more loop:
for (var i = 0; i < preloadedImgs.length; i++)

{

preloadedImgs[i].src = images[i];

}

//now, assign event handlers to the 2 buttons
//to restart and stop the gallery:
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
btnStart.onclick = startGallery;
btnStop.onclick = stopGallery;
//Finally, check the isGalleryOn flag is true. If it is
//call the function that starts the gallery:
if (isGalleryOn)

{

startGallery();

}

}

/************************************************/

//Assign the init() function to the onload event
onload = init;

/************************************************/

//startGallery() contains the functionality
//to extract the photos from the preloadedImgs[] array
//for display and to set the timer in motion:
function startGallery()

{

//extract the image filepath using the counter
//variable as array and assign it to the src
//property of the curImage variable:
curImage.src = preloadedImgs[counter].src;
//advance the counter by 1:
counter ++;
//if the counter has reached the length of the
//preloadedImgs[] array, take it back to 0, so the
//photo gallery redisplays the images from the start:
if (counter == preloadedImgs.length)

{

counter = 0;

}

//set the timer using this same function as one
//of the arguments and 2000 (2 milliseconds) as the other argument.
galleryStarter = setTimeout("StartGallery()", 2000);
//signal that the gallery is on to the rest of the program:
isGalleryOn = true;

}

/******************************************************/

//stopGallery() uses clearTimeout()
//to stop the gallery
function stopGallery()

{

clearTimeout(galleryStarter);
//signal that the gallery has stopped to the
//rest of the program:
isGalleryOn = false;

}
Avatar utente

Catriona

  • Messaggi: 13
  • Iscritto il: mer nov 07, 2012 10:56 am

Re: Lesson 17

da Catriona » ven gen 18, 2013 9:44 am

haha ok, CSS is just formatting though is'nt it. I've tried the folder thing and still nothing - I'll just have to keep going at it!!!!
Avatar utente

Catriona

  • Messaggi: 13
  • Iscritto il: mer nov 07, 2012 10:56 am

Re: Lesson 17

da Catriona » ven gen 18, 2013 2:22 pm

Done it! Tt works now. I viewed the source code on the sample gallery link given under the lesson. There is not a space between counter++ to move the images along. But in the lesson code there is a space, would this be the reason??!! I have sorted my folders aswell so that may have helped aswell.

Cat
Avatar utente

Catriona

  • Messaggi: 13
  • Iscritto il: mer nov 07, 2012 10:56 am


+ Rispondi al messaggio

Pagina 1 di 1