Javascript captions in gallery

[louisaivy]

Hi all, i am new to javascript and i am trying to create a pure html/css/javascript image gallery. I am stuck with trying to get captions to appear when either the play button is pressed or when the thumbnails are clicked..
Here is my javascript:


// JavaScript Document

var imgNum = 0;

function next()//everytime the big image is clicked it changes
{
document.getElementById("slide").src = "Assets/images/big/"+imgNum+".jpg";

imgNum++;
}

function changeImage(evt,el)//changes the big image each time a thumbnail is clicked
{
evt.preventDefault(evt);//fail gracefully when javascript is turned off.
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/"+el+".jpg";
}

var i = 0, imageSorce = new Array(), preload = new Array();//add an array to cycle through the images
imageSorce[0]="Assets/images/big/0.jpg";
imageSorce[1]="Assets/images/big/1.jpg";
imageSorce[2]="Assets/images/big/2.jpg";
imageSorce[3]="Assets/images/big/3.jpg";
imageSorce[4]="Assets/images/big/4.jpg";
imageSorce[5]="Assets/images/big/5.jpg";
imageSorce[6]="Assets/images/big/6.jpg";
imageSorce[7]="Assets/images/big/7.jpg";

for (var j=0; j<imageSorce.length;j++)
{
preload[j] = new Image;
preload[j].src = imageSorce[j];
}
function mode(param)
{
smode=param;
}

function startSlideshow()
{
if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("stop").disabled="";
document.getElementById("slide").src=imageSorce[i];
i++;
setTimeout("startSlideshow()",5000);
}

else if(smode=="stop")
{
document.getElementById("stop").disabled="disabled";
document.getElementById("play").disabled="";
document.getElementById("play").value="";
}
if(i==imageSorce.length)
{
i=0;
}
}


var caption = new Array();
caption[0]="caption1"
caption[1]="caption2"
caption[2]="caption3"
caption[3]="caption4"

var aryImages = new Array();
aryImages[0] = "Assets/images/big/0.jpg";
aryImages[1] = "Assets/images/big/1.jpg";
aryImages[2] = "Assets/images/big/2.jpg";
aryImages[3] = "Assets/images/big/3.jpg";

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}


function swap(imgIndex) {
document['imgMain'].src = aryImages[imgIndex];
TheText = caption[imgIndex];
document.getElementById('captionarea').innerHTML=TheText;
}





and here is my html:



<div id="gallery">
<img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
<span id="captionarea"></span>

<br />
</div>
<div id="button">

<input id="play" class="play" type="button" value="" onClick="mode('play');startSlideshow();" />

<input id="stop" class="stop" type="button" value="" disabled="disabled" onclick="mode('stop');startSlideshow();" />


</div>

<div id="thumb">

<ul class="thumbnail">


<li><a href="Assets/images/big/0.jpg" onClick="changeImage(event,'0');"><img class="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
<li><a href="Assets/images/big/1.jpg" onClick="changeImage(event,'1');"><img class="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
<li><a href="Assets/images/big/2.jpg" onClick="changeImage(event,'2');"><img class="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
<li><a href="Assets/images/big/3.jpg" onClick="changeImage(event,'3');"><img class="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
<li><a href="Assets/images/big/4.jpg" onClick="changeImage(event,'4');"><img class="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
<li><a href="Assets/images/big/5.jpg" onClick="changeImage(event,'5');"><img class="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
<li><a href="Assets/images/big/6.jpg" onClick="changeImage(event,'6');"><img class="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
<li><a href="Assets/images/big/7.jpg" onClick="changeImage(event,'7');"><img class="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>

</ul>
</div><!-- thumb-->




</div><!--gallery-->






I realise i have probably gone about the javscript in the hardest way possible but its a learning curve.. is any body able to help me with the caption side of things?

[rangana]

Hi Louis,

Good day!

Did you tried adding the highlighted:


function changeImage(evt,el)//changes the big image each time a thumbnail is clicked
{
evt.preventDefault(evt);//fail gracefully when javascript is turned off.
var elem = document.getElementById("slide");
elem.src = "Assets/images/big/"+el+".jpg";
document.getElementById('captionarea').innerHTML=caption[el];
}

[louisaivy]

Hi

Thanks for that, it now shows the captions when i click on a thumbnail image which is fantastic. How would i now be able to get it so when the play button is pressed and the images are cycling through to also show the correct caption? At the moment when you press play it just shows "caption 1" and doesn't change at all..

Thanks

[rangana]

Try this:


if(smode=="play")
{
document.getElementById("play").disabled="disabled";
document.getElementById("stop").disabled="";
document.getElementById("slide").src=imageSorce[i];
document.getElementById('captionarea').innerHTML=caption[i];
i++;
setTimeout("startSlideshow()",5000);
}

[louisaivy]

:D thanks heaps, while i have you here can you see any reason why some times i have to press the stop button first before i press the start button to make the slideshow work?

[rangana]

It would be best to know how this "sometimes" is happening. Any particular behavior where slideshow won't start if you press "Play"?

Also, can you please show us the link to where the code is running or zip it here for review for us to reproduce it properly.


Thanks!

[louisaivy]

hi i can't upload the zip file from here, i will post the link when i have uploaded it to rapidshare so you can download it.
When you first load the page and press play nothing happens after the designated 3 seconds if you then press stop and then play again it works correctly. Also ive just noticed that the captions work most of the time but it also says 'undefined' sometimes like its getting confused somewhere, but i cannot figure out why its doing it as its just random.

[louisaivy]

Hi i don't know if you have an account but here is a link to my zip file:
http://www.4shared.com/file/_SIUYRGW/Gallery.html

[rangana]

Please try to change:
disabled="disabled";

to: disabled=true; ...and change disabled=''; to disabled=false; in your JS.

[louisaivy]

Thanks for all your help with this :D