Member Avatar for rebsysue

Hi. I am just learning javascript and am making a website for my friend's photography. I've got a working slide show now where you can click next or previous to display image after image in sequence. I followed this tutorial:
http://www.webmonkey.com/tutorial/Make_a_JavaScript_Slideshow

Now I would like to also display a caption or description with each photograph. Right now I'm using an array like this:

var imageNum = 0;
imageArray = new Array();
imageArray[imageNum++] = new imageItem(imageDir + "roma072.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "roma073.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "timo1.jpg");
var totalImages = imageArray.length;

I am having trouble looking on the web for the right syntax, if there is any, for adding title information that I can output later for each image in the array. For example, within this array, how can i add that the first image, "roma072.jpg" has a title or description of "Rome, 2008"?

Any help is much appreciated.

Thank you,
Rebecca

  • 3 Contributors
  • 2 Replies
  • 76 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cubekid
Member Avatar for essential

Try this instead! If im goin to make some slideShow (or image swapping) this is what i usually do. Its up to you if you wanna try my demo. I've provided different titles for every image that will get to be swapped.

<html>
<head>
<title>Arrays and Putting title on your swapped image</title>
<script type="text/javascript">
<!--
var i = 0;

function putTitle() {
var imgArray = [];
var img = document.getElementById('swap');
var myTitle = document.getElementById('imgTitle');
if (document.images) {
/* Total n# of images to be swapped or icremented in which 4 is my incrementing value on this demo. */

   for (var x = 0; x < 4; x++) {
   imgArray[x] = new Image();
/* You must provide a valid path and a sequential n# with your images filename (e.g. image1, image2, image3, and so on...). */
   imgArray[x].src = 'image' + x + '.jpg'; } 
   if (imgArray.length > 1) {
   img.src = imgArray[i].src; 
   i++; 
   } 
  } switch(i) {
case 1 : img.title = 'Title1'; break;
case 2 : img.title = 'Title2'; break;
case 3 : img.title = 'Title3'; break;
case 4 : img.title = 'Title4'; break;
default : img.title = 'Original Title'; break; }
myTitle.innerHTML = img.title;
i = ( i == 4 ) ? 0 : i;
}

//-->
</script>
</head>
<body>
<img src="image.jpg" id="swap">
<br>
<button onclick="putTitle();">Click</button>

<!-- Let's see the title output of every image on the swapping sequence, by showing their title on the div below -->
<div id="imgTitle">Current Title Of Your Image</div>
</body>
</html>

Hope you find this usefull...

Member Avatar for cubekid

I turned the imageArray array to a 2-dimensional array

var imageNum = 0;
imageArray = new Array();

imageArray[imageNum] = new Array();

imageArray[imageNum][0] = new imageItem(imageDir + "roma072.jpg");
imageArray[imageNum][1] = "Caption1";

imageNum++;
imageArray[imageNum] = new Array();

imageArray[imageNum][0] = new imageItem(imageDir + "roma073.jpg");
imageArray[imageNum][1] = "Caption2";

imageNum++;
imageArray[imageNum] = new Array();

imageArray[imageNum][0] = new imageItem(imageDir + "timo1.jpg");
imageArray[imageNum][1] = "Caption3";

var totalImages = imageArray.length;

then, in the getPrevImage() and getNextImage() function, please revise this line:

var new_image = get_ImageItemLocation(imageArray[imageNum]);

with this

var new_image = get_ImageItemLocation(imageArray[imageNum][0]);
document.all("caption").innerText = imageArray[imageNum][1];

To display the caption, i added a span tag

<span id = "caption" name="caption"></span>

That's it. Hope this helps you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.