How do I add a text array to a existing Image gallery [Archive]

Kobus Mans

05-05-2009, 02:33 AM

Hello All

OK, I am very new at this so please forgive me if I say something stupid :P

I am trying to create a dynamic text field that need to match a image that I am loading using an image array. But have no idea how to have the two arrays sync up.

In short I am creating a gallery, each image has a short description associated with it. Right now the gallery works great but I need to add the text. does anyone know how to do this? I am completely lost and have been banging my head against the table all day.

This is s sample of the script I have for the image array... not sure it this will help...
[CODE] var pickArray = new Array();

pickArray[1] = new Image();
pickArray[1].src = "images/port_0000_LayerComp1.jpg";
pickArray[2] = new Image();
pickArray[2].src = "images/port_0001_LayerComp2.jpg";
pickArray[3] = new Image();
pickArray[3].src = "images/port_0002_LayerComp3.jpg";

imageNumber = 1
totalImages = 3

function changeSlide(direction) {
imageNumber = imageNumber + direction
if (imageNumber < 1) {
imageNumber = totalImages;
}
if (imageNumber > totalImages) {
imageNumber = 1;
}
document.Photo.src = pickArray[imageNumber].src;
}
[CODE]
Does anyone know how I should proceed from here on out? or even where to begin?

essential

05-10-2009, 05:18 PM

Here's a basic example on how to deal on this current issue:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Template</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
background-color : #f0f0f0;
border : none;
color : #405060;
font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
height : auto;
min-height : 600px;
min-width : 800px;
text-align : center;
vertical-align : baseline;
width : auto; }
h2 {
background-color : #ccc;
border-bottom : 1px solid #708090;
border-top : 1px solid #708090;
font : 700 160% "Bernard MT Condensed";
line-height : 2ex;
margin-top : 0;
min-height : 2ex;
padding : .100em 0em .100em 1em;
white-space : nowrap; }
div {
border : none;
margin : 0%;
padding : 0%; }
div#main {
margin : 0% auto;
text-align : left;
height : 100%;
overflow : hidden;
width : 98%;
}
table {
border : 1px solid #ccc;
border-collapse : collapse;
width : 100%;
height : 200px;
table-layout : fixed;
text-align : left }
td, th {
padding : .700em;
width : 50%; }
div.tube {
border : 1px solid #ccc;
height : 600px;
margin : 1% auto 1% auto;
padding : 1.200em; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var picArray, counter, changeSlide;

var imageObj, imagePath, imageNum;

counter = 0;

picArray = {
imageObj : [ ],
imagePath : [ ],

// Details about your images must go here
//
imageText : [ "Some details about image1", "Some details about image2", "Some details about image3" ] };

imageSlide = function( imageNum ) {
(( counter === imageNum ) ? counter = 0 : counter );
if ( document.images ) {
for ( var x = 0; x < imageNum; x++ ) {
picArray.imagePath[ x ] = ( "images/port_000" + x + "_LayerComp" + x + ".jpg" );
picArray.imageObj[ x ] = new Image();
picArray.imageObj[ x ].src = picArray.imagePath[ x ];
} // Initial counting will start at ZERO
// so the first picture we be ( ./images/port_0000_LayerComp0.jpg )
(( document.getElementById ) ? document.getElementById("myImage").src = picArray.imageObj[ counter ] : document.images.myImage.src = picArray.imageObj[ counter ] );
(( document.getElementById ) ? document.getElementById("imgDetails").innerHTML = picArray.imageText[ counter ] : document.all.imgDetails.innerHTML = picArray.imageTex[ counter ] );
counter++;
}
};

// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2>JavaScript DEMO: Image Gallery with Synchronized Text</h2>
<table frame="box" rules="none" summary="JavaScript Live DEMO">
<tr><th><img id="myImage" src="./images/port_0000_LayerComp0.jpg" alt="Image Gallery" /></th><td><span id="imgDetails">This will perform picture slide's including detail's about the image.</span></td></tr>
<tr><td colspan="2"><button id="nxt" name="nxt" onclick="imageSlide( 3 /* Set initial value here, for the images you want to load. */)">view next »</button></td>
</tr>
</table>

</div>
</div>
</body>
</html>
Hope it helps...