Forum Moderators: coopster

Message Too Old, No Replies

Using PHP with javascript slideshow

         

galahad2

3:37 pm on Feb 1, 2010 (gmt 0)

10+ Year Member



I'm trying to set up a Javascript slideshow but with images that are pulled from a mYSQL database using PHP.

For example:

[PHP]
if (!empty($row['pic1']))
{
echo '<td><a href="images/carpictures/' . $title16 . '"><img src="images/carpictures/' . $title16 . '" width="140" height="93"></a></td>';
}
[/PHP]

- and so on, with a statement testing to see if an image exists in that field. If it does, it gets added to the page with all the images displayed as thumbnails.

What I want is to have the images bring up their larger version when hovered over, and launch a slideshow with an autoplay feature as well as the usual back / next / play / stop controls etc.

However all the slideshows I've seen (Javascript based) have the image names assigned manually to individual variables in the page header.

The problem being that my images are being generated by the PHP call to the database.

Anyone know how I can get a Javascript slideshow working within this context- or know of one which actually does work with PHP?

(I was using Lightbox, which is great, except that the client doesn't like it so I can't use it...)

coopster

1:16 pm on Feb 26, 2010 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



How about pre-loading just the image names when you first build the page then? (I'm assuming the issue here is that you cannot display the names until a request has been fired off).

rocknbil

6:12 pm on Feb 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



However all the slideshows I've seen (Javascript based) have the image names assigned manually to individual variables in the page header.


Likely correct. What you will have to do is something like this:


$js_string=$content=NULL;
//
while ($row=mysql_fetch_array($result)) {
$img = $row['filename'];
$js_string .= "'" . $img . "',";
}
//
if ($js_string) {
$js_string = preg_replace('/,$/','',$js_string); // last comma
$content .= '
<script type="text/javascript">
var imgsArray = new Array(' . $js_string . ');
</script>
<script type="text/javascript" src="/path/to/slideshow.js"></script>
';
}
// etc
echo $content;


So you're defining the list of images dynamically. Be sure to do this before the line that includes the .js library, in case something is executed on load.