[FX.php List] Pulling a Javascript variable into a PHP variable?

Wed Mar 12 02:14:33 MDT 2008

Hi Bob,

Here's two options for you, written off the top of my head, so not tested,
and probably not 100%, but you'll get the idea...

Option 1 - all client side JavaScript (mostly)

In the head of the document do something like;

<script type="text/javascript">
  images = new array();
  links = new array();
<?php foreach($imageData['data'] as $image) {
  echo "  images[] = ".$image['imageFilename'].";\n";
  echo "  links[]  = ".$images['linkURL'].";\n";
} ?>
  j = 0;
</script>

This will create two arrays, with identical keys one with the image files,
the other the urls that you want to link to...

Next modify the script that you've already got to change the images and the
links (see below for how to embed the content in the page for this to make a
little more sense if it doesn't)

<script type="text/javascript">

function changeImages() {
  j++; if(j>count(images)) j=0; // increment the counter, if it's greater
than the number of images, set it to 0 to loop back
  document.getElementById('changingLink'].href = links[j];
  document.getElementById('changingImage'].src = images[j];
}

</script>

If you're not using any of the helper classes like prototype.js, then in the
body tag put something like (if you are using one of them, then use whatever
unobtrusive means they have for performing a repeating task)

<body onload="setInterval('changeImages()',5000);">

Further down your document, where you want these images to be do something
like;

<a href="<?php echo $imageData['data'][$imageKey]['linkURL'][0]; ?>"
id="changingLink"><img src="<?php echo
$imageData['data'][$imageKey]['imageFileName'][0]; ?>" alt="Banner image"
id="changingImage" /></a>

Okay, so I wrote all of this using PHP because that way if anyone comes to
the site without JS then they will at least get the first image, not a
broken link or anything dumb like that...

So the setInterval() will run the script changeImages() every 5 seconds.
That script will change the href attribute of the element with id
'changingLink', and the src attribute of the element with id
'changingImage'...

You'll probably want to add some image pre-loading code as well, either of
your own rolling, or using one 'off the web' so that when the image is
changed by the script above, the next one is pre-loaded, so that when the
script is next called 5 sec later it's ready straight away... you could of
course use some fancy DHTML to fade from one image to the other, but I'll
leave that for you to do as homework (if you want to do this, then head for
a helper library like prototype.js it'll be oh so much easier)

Hope that makes sense....??

Option 2 - the Ajax way

For this you don't need any of the JS arrays... you will need Ajax helper
(unless you're feeling sadistic and want to write all your own cross-browser
compatible Ajax code, but, why would you ;-)

So, include your favourite helper, for me (in case you didn't all already
know, it's prototype, so...)

<script type="text/javacript" src="path/to/prototype.js"></script>

Set the periodical Ajax call;

<script type"text/javascript">
  new Ajax.PeriodicalUpdater('banner', 'ajaxImage.php', {method: 'get',
frequency: 5 });

In your page embed the first image, wrapping it in a div, with id of banner

<div id="banner">
  <?php include('ajaxImage.php'); ?>
</div>

Finally you need the page that's getting called by the Ajax query
ajaxImage.php

<?php session_start();
  // check for session var with image # in it
  // call to FX and get the next image
  // store the current image in a session variable
  // output the content
?>
<a href="<?php echo $imageData['data'][$imageKey]['linkURL'][0]; ?>"
id="changingLink"><img src="<?php echo
$imageData['data'][$imageKey]['imageFileName'][0]; ?>" alt="Banner image"
id="changingImage" /></a>

Job done, time for a beer...!!

Is this one better...? maybe yes, maybe no... just different... 

Good luck, and let us know if you get stuck, or how you got on...

Cheers
Steve

-----Original Message-----
From: fx.php_list-bounces at mail.iviking.org
[mailto:fx.php_list-bounces at mail.iviking.org] On Behalf Of Bob Patin
Sent: 12 March 2008 02:03
To: FX.php Discussion List
Subject: Re: [FX.php List] Pulling a Javascript variable into a PHP
variable?

Right, I've got the image's URL, but what I was hoping to do was to  
also rotate the link URLs as well.

But I see what you're saying; I could create an array in JS of the  
link URLs; question is, could I embed some sort of JS that would also  
dynamically switch the links?

Probably tilting at windmills here... :)

BP

On Mar 11, 2008, at 8:47 PM, Derrick Fogle wrote:

> If the image is being displayed, especially if it's by a Javascript  
> that does rotating images, you've already got the image URL in  
> Javascript somewhere. All you've got to do is figure out how to  
> display it. Pure Javascript.
>

_______________________________________________
FX.php_List mailing list
FX.php_List at mail.iviking.org
http://www.iviking.org/mailman/listinfo/fx.php_list