PDA

View Full Version : Resolved Attach txt array to image array???



03SF06
03-07-2009, 04:02 PM
Hello,

So I have found this wonderful script that works very nicely, it displays a new image on the 'next' or 'previous' button, (in a div called "MainImage") however, I am trying to add a function that will load a line of text in a div (called "xdiv") describing the picture.

<script language="JavaScript">
<!--
// Use the following variable to specify
// the number of images
var NumberOfImages = 3

var img = new Array(NumberOfImages)
img[0] = "image.jpg"
img[1] = "image1.jpg"
img[2] = "image2.jpg"



var imgNumber = 0

function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["MainImage"].src = img[imgNumber]
}

function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["MainImage"].src = img[imgNumber]
}

//-->
</script>


this is what triggers it in the body:
<a href="javascript:PreviousImage()"><p><< previous project</p></a>
<a href="javascript:NextImage()"><p>next project >></p></a>

again, this script works like a charm, but I can't seem to even find a script that will call a different line of text on an event... so I am not even sure if I am trying to do something that is impossible?

I have no problem using something like an external text file attaching the name to the picture, I just have no idea how to attach it... It would be even better if I can attach some links to the text as well, or make the image clickable, but for now, I just want text to be displayed.

(oh and I have been playing with this a while, this is something that I just tried to see if it would work but it doesn't,)

<script language="JavaScript">
<!--
// Use the following variable to specify
// the number of images
var NumberOfDes = 3

var txt = new Array(NumberOfDes)
txt[0] = "text1"
txt[1] = "tetx2"
txt[2] = "tetx3"



var txtNumber = 0

function NextDescription()
{
txtNumber++
if (txtNumber == NumberOfDes)
txtNumber = 0
document.write["xDiv"].src = txt[txtNumber]
}

function PreviousDescription()
{
txtNumber--
if (txtNumber < 0)
txtNumber = NumberOfDes - 1
document.write["xDiv"].src = txt[txtNumber]
}

//-->
</script>

And even if it was close, how do I tie this in on the eventhandler?

Thanks for your time!

magicyte
03-07-2009, 04:48 PM
Depends on if the <div>'s called "xdiv" in its "name" or "id". Supposing you gave <div> the id "xdiv":


<script type="text/javascript">
var NumberOfImages = 3; // obviously number of images desired

var img = new Array(NumberOfImages);
img[0] = "image.jpg";
img[1] = "image1.jpg";
img[2] = "image2.jpg";

var txt = new Array(NumberOfImages);
txt[0] = "Text for image 1 here.";
txt[1] = "Text for image 2 here.";
txt[2] = "Text for image 3 here.";

var imgNumber = 0;

function NextImage() {
imgNumber++;
if (imgNumber == NumberOfImages) {
imgNumber = 0;
}
document.images["MainImage"].src = img[imgNumber];
document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
}

function PreviousImage() {
imgNumber--;
if (imgNumber < 0) {
imgNumber = NumberOfImages - 1;
}
document.images["MainImage"].src = img[imgNumber];
document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
}
</script>

Hmm... Yes- that should do.

03SF06
03-07-2009, 05:21 PM
so... the pictures still rotate properly but there's no text appearing in the div with the id "xdiv"...

magicyte
03-07-2009, 05:26 PM
Please post a link to the page on your site that contains the problematic script so we can check it out. This helps us help you.Try this:
<script type="text/javascript">
var NumberOfImages = 3; // obviously number of images desired

var img = new Array(NumberOfImages);
img[0] = "image.jpg";
img[1] = "image1.jpg";
img[2] = "image2.jpg";

var txt = new Array(NumberOfImages);
txt[0] = "Text for image 1 here.";
txt[1] = "Text for image 2 here.";
txt[2] = "Text for image 3 here.";

var imgNumber = 0;

function NextImage() {
imgNumber++;
if (imgNumber == NumberOfImages) {
imgNumber = 0;
}
document.images["MainImage"].src = img[imgNumber];
document.getElementById("xdiv").innerHTML = txt[imgNumber];
}

function PreviousImage() {
imgNumber--;
if (imgNumber < 0) {
imgNumber = NumberOfImages - 1;
}
document.images["MainImage"].src = img[imgNumber];
document.getElementById("xdiv").innerHTML = txt[imgNumber];
}
</script>

03SF06
03-07-2009, 05:38 PM
Awesome! That did the trick! thanks a bunch!

magicyte
03-07-2009, 05:40 PM
(Note that "innerHTML" is considered bad practice - I tried using firstChild.nodeValue, but apparently it didn't work. I have no idea as to why...)


Awesome! That did the trick! thanks a bunch!

No problem. :)