PDA

View Full Version : Ultimate Fade-in slideshow (v2.4) with PHP



noobie123
09-14-2011, 11:47 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I wasn't sure if I could use PHP to dynamically load the images instead? That way they could be updated by somebody without them having to access the code or needing ftp access.
Thanks

jscheuer1
09-14-2011, 02:14 PM
Sure why not? But they would still need ftp or some sort of access to upload the images. And if you want descriptions and/or links it could get a little complicated because except in very limited ways there isn't anything intrinsic about the image files themselves that could provide that information.

There are various ways to set this up. If your page with the slideshow on it is a .php page, you can do this (completely replacing the imagearray entry with PHP code that generates it):


<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "slideshow",
dimensions: [213, 101],
<?php
function returnimages(){
$dirname = './pics/';
$pattern = '#\.(jpg|jpeg|png|gif|bmp)$#i';
$files = array();
if($handle = opendir($dirname)){
while(($file = readdir($handle)) !== false){
if(preg_match($pattern, $file)){
array_push($files, "\t\t['" . $dirname . $file . "', '', '']");
}
}
closedir($handle);
}
return "\timagearray: [\n" . implode(",\n", $files) . "\n\t],\n";
}

echo returnimages();
?>
displaymode: {type:'auto', pause:8500, cycles:0, wraparound:false, randomize:true},
persist: false,
fadeduration: 2000,
descreveal: "ondemand",
togglerid: ""
})
</script>

Notice the highlighted line, that's the folder that you want it to look in for images. The . represents the current folder - the one that the page with the slideshow on it is in.

noobie123
09-14-2011, 02:18 PM
Thanks that's great, I've trying to build my first very basic image upload system and wanted to show the images people have uploaded in the fade-in slideshow so it's great to know that I can do that.

One other question is it possible to get the images from a database instead or is it better to just get them from a folder?

thanks

jscheuer1
09-14-2011, 02:30 PM
You can do that, but I'm not familiar with database code. I imagine it would depend to a degree upon how the database is constructed.

noobie123
09-14-2011, 02:32 PM
Thanks, it's great to know I can do it even if it's without using the database.

Cheers

noobie123
09-14-2011, 03:33 PM
I've cracked it. I used this to get it to work:




<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
<?php
$con = mysql_connect("server", "user", "password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("dbname", $con);
$result = mysql_query("SELECT * FROM images");
while($row = mysql_fetch_array($result))
{
echo "[\"userimgs/";
echo $row["pics"] ."";
echo "\"],\n";
}
echo "['images/logo.jpg'] \n";
mysql_close($con);
?>
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>


I thought I'd post the solution incase anybody else wanted to do the same thing.