AJAX

JavaScript Array syntax question

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2007

Posts: 4

Reputation: rebsysue is an unknown quantity at this point

Solved Threads: 0

rebsysue

Offline

Newbie Poster

JavaScript Array syntax question

Mar 3rd, 2009

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/Ma...ript_Slideshow

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
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;
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

Last edited by peter_budo; Mar 4th, 2009 at 7:53 pm. Reason: Code tag correction, please use [code][/code] instead of <code></code>

Rebecca Schiffman

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: JavaScript Array syntax question

Mar 4th, 2009

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.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
 
<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...

Last edited by essential; Mar 4th, 2009 at 1:08 pm.

•

Join Date: Nov 2008

Posts: 7

Reputation: cubekid is an unknown quantity at this point

Solved Threads: 0

cubekid

Offline

Newbie Poster

Re: JavaScript Array syntax question

Mar 4th, 2009

I turned the imageArray array to a 2-dimensional array

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
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;
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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var new_image = get_ImageItemLocation(imageArray[imageNum]);
var new_image = get_ImageItemLocation(imageArray[imageNum]);

with this

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var new_image = get_ImageItemLocation(imageArray[imageNum][0]);
document.all("caption").innerText = imageArray[imageNum][1];
var new_image = get_ImageItemLocation(imageArray[imageNum][0]);
document.all("caption").innerText = imageArray[imageNum][1];

To display the caption, i added a span tag

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<span id = "caption" name="caption"></span>
<span id = "caption" name="caption"></span>