function not changing global var???

[lpetri]

Hi,
I have searched the previous threads, tried everything I can, but to no avail. I am really a PHP programmer and am trying to get some javascript going. Hopefully you can help me!

I have a successful onclick image swap going for a photo album. Click on the thumbnail to show the image in the 'big image place'. I also want to add a 'back' and 'forward' link to move through the pics so I figured I'll just use the same sort of onclick for these.

http://www.pranatechdesigns.com/tra...anrepublic20061001&searchyr=2006&searchcntry=

I have added a function to the thumbnail onlick to set the variable 'slideback' (and later will also set slideforwasrd) which I will then use in my onlick for the 'back' and 'forward' links.

My thumbnail code that all seems to work fine:
$photos.= '<a onclick="changeImages(\'mainphoto\', \'/travel/images/photos/'.$path.'/'.$$img.'\');showText(\'caption\',\''.$$cap.'\',\'selected\',\''.$i.'\');setSlidetext(\''.$i.'\');">';

Code to print out the back link (right now I'm just trying to print out the number, but if I can get that going it will actually be part of an onclick just like the one above):
THIS WORKS but is not sufficient - just a test to make sure the function worked:
$photorows.= '<span id="backbutton"></span>
&nbsp;<span id="selected">1</span> of 20 photos&nbsp;';

THIS DOESN'T WORK:
$photorows.= '<script type="text/javascript">document.write(slideback)</script>
&nbsp;<span id="selected">1</span> of 20 photos&nbsp;';

Functions:
<SCRIPT language="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
<?php echo $preload; ?>
preloadFlag = true;
}
}

var defaultText = "&nbsp;";
function showText(section,txt)
{
for (var i=0; i<showText.arguments.length; i+=2) {
document.getElementById(showText.arguments).innerHTML = showText.arguments[i+1];
}
}

var slideback;
function setSlidetext(picnum)
{
if (picnum == 1)
{
document.getElementById("backbutton").innerHTML = "&nbsp;&nbsp;";
}

if (picnum > 1)
{
slideback = picnum-1;
document.getElementById("backbutton").innerHTML = slideback; **I added this to test if the function works, it does
}
}
// -->
</SCRIPT>

So the main question I think is this: Why isn't the var slideback acting as a global?? If as a test I set slideback="test" before function setSlidetext, then it will print out as such in my back button area. The function does not change the value of it. Ugh.

Or if I can simply send the value of global var in my onlick so that I can use it in my backbutton onlick I should be golden too.

I hope this makes sense. Thanks in advance for your expertise!!!

 

[trollacious]

How about showing the HTML your PHP outputs?

Lee

 

[lpetri]

Sure, here is the html. Hope this helps. Sorry if I'm not to clear.

Two of the thumbnails:
<a onclick="changeImages('mainphoto', '/travel/images/photos/dominicanrepublic20061001/01room.jpg','mainphotoport', '/travel/images/spacer.gif');showText('caption','Room included fresh flowers, jet tub, welcome champagne, and beers stocked daily in the fridge','selected','1');setSlidetext('1');"><img src="/travel/images/photos/dominicanrepublic20061001/thumbnails/01room.jpg" height="75" width="100" align="center" alt="This photo has not finished loading." border="0" vspace="5"></a>

<a onclick="changeImages('mainphoto', '/travel/images/photos/dominicanrepublic20061001/02apool.jpg','mainphotoport', '/travel/images/spacer.gif');showText('caption','Lounging on the pool shelf w/ swim-up bar just under the bridge. (view from our room)','selected','2');setSlidetext('2');"><img src="/travel/images/photos/dominicanrepublic20061001/thumbnails/02apool.jpg" height="75" width="100" align="center" alt="This photo has not finished loading." border="0" vspace="5"></a>

The 'back' link that does not work (it prints 'undefined'):
<script type="text/javascript">document.write(slideback)</script>
&nbsp;<span id="selected">1</span> of 20 photos&nbsp;

Functions are as above in previous post.

Thanks!

 

[trollacious]

I looked at the URL you provided and did a View->Source. You don't assign a value to the variable slideback until after the first function call, yet you document.write() the value of the variable when the page loads, before a value is assigned.

Lee

 

[lpetri]

Darn, I thought I had it after your input. I moved the document.write(slideback) down to the end of the page to test it out. It has to be after the onlick that sets it,, is that right? But shoot, still undefined. If you look at the URL again, you can see it at the bottom of the page just after the thumbnails.

Thanks for your time. I really do appreciate it.

 

[trollacious]

You still aren't calling the setSlidetext function before you document.write the value to the page. You have a lot of places where the function will be called IF someone clicks on something, but no function call is made before a mouse click. Why don't you initialize slideback like this:

var slideback='  ';
function setSlidetext(picnum)
{...

Lee

 

[lpetri]

Ah, gotcha. I had tried something similar before, but with no results. I just put

var slideback='test text'; 
function setSlidetext(picnum)
{...

as you suggested ('test text' so we can see the output). But how come when a thumbnail is clicked the value is still 'test text'? I feel so ignorant. I can actually code in PHP but javascript has me stumped.

 

[trollacious]

You have no <span> named backbutton, which is where you're trying to write the previous picture number.

Lee

 

[lpetri]

Yeah, I know, I had that in earlier for testing to make sure the function worked. I should have commented out

document.getElementById("backbutton").innerHTML = slideback;

It's really the document.write that I need to work so I can use it to define which image to show in the new onclick I would like to make. I just want to make an onclick similar to the one that the thumbnails have, but as a 'back button' or link as the case may be. The image names are stored in variables called $image1, $image2, etc. I figured I could use the value of <b>slideback</b> to determine which variable to use.

For instance something like this:

$imgname='image<script type="text/javascript">document.write(slideback)</script>.jpg';
$backlink='<a onclick="changeImages(\'mainphoto\', \'/travel/images/photos/dominicanrepublic20061001/'.$$imgname.'\');...

 

[trollacious]

document.write used on a web page that's been written will blow away the entire page and leave only the text of the item just written to the page. You were correct to work with the innerHTML, and you can add a button or link or whatever you want to that.

Lee

 

[lpetri]

So if I could ask you one more question then.

I had tried putting together a string to show up in that <span id="slideback"></span> using document.getElementById("backbutton").innerHTML = slideback;

It went something like this (although this is a bit rough)

var slideback=' ';
function setSlidetext(picnum)
{
    slideback="<a onclick=\"changeImages(\'mainphoto\', \'/travel/images/photos/dominicanrepublic20061001/'.$image";
    slideback += picnum-1;
    slideback +=".jpg...

So forget the fact that I'm sure my backslashes are not correct, I did a lot of testing and if I just had <a href= it was fine but as soon as I changed it to <a onclick it no longer worked. So is there a simple solution to constructing this bit of code to have an onclick show up on my <span id="slideback"></span>?

Again, hope that makes sense. I'll leave you alone soon.

 

[trollacious]

Your page really isn't set up to perform the things you want to do. You have all your captions hardcoded in rather than in arrays, and your photos are all separate variables rather than in an array. I would suggest making a Javascript array of objects that would include the Image() and caption for each photo, then changing image and caption source using slideback as your array index.

Using your page source, I started to make some changes for you to use, but the function doesn't change the caption or the photo index at the top.

function backonepic()
{
var numpics = 20;
var thisimage = document.images['mainphoto'].src;
slideback--;
if (slideback < 1) slideback = numpics;
document.images['mainphoto'].src = window['alt' + slideback].src;
}

and

<a href="" onclick="backonepic(); return false;"><- Back</a> &nbsp; &nbsp; &nbsp; &nbsp;<span id="selected">1</span> of 20 photos

Lee

 

[lpetri]

You are so awesome. I'll play with this a bit and will probably have to ask you for an opinion or two as I go along if you don't mind.

Right now all my image names and captions are being output in the html using php variables since they are coming from a database but I'm sure I can easily(?) dump them into an array to be used in the javascipt.

Okay, I can't thank you enough. I'll work on this tonight or tomorrow and will hopefully get something going.
Have a great evening!

 

[trollacious]

If you generate something like:

var pics = new Array(), pi=0;
//php code to generate the next examples

pics[pi++] = {image: newImage("travel/images/photos/dominicanrepublic20061001/01room.jpg"), caption:'Room included fresh flowers, jet tub, welcome champagne, and beers stocked daily in the fridge'};

pics[pi++] = {image: newImage("travel/images/photos/dominicanrepublic20061001/02apool.jpg"), caption: 'Lounging on the pool shelf w/ swim-up bar just under the bridge. (view from our room)'};

//etc

The above code should preload your images, as well, so you wouldn't have to use the preloadImages() function you have now.

Then the function I provided earlier would be modified like this:

function backonepic()
{
var thisimage = document.images['mainphoto'].src;
slideback--;
if (slideback < 1) slideback = pics.length;
document.images['mainphoto'].src = pics[slideback-1].image.src;
document.getElementById('caption').innerHTML = pics[slideback-1].caption;
document.getElementById('selected').innerHTML = slideback;
}

to change the caption and picture number. This function will cycle to the last photo in the group once the first one is reached.

Lee