PDA

View Full Version : Building a dynamic array from folder contents



Jim Weinberg
05-06-2008, 02:05 PM
I'm using a couple of different slide show scripts. Both use arrays to define the graphics to be displayed. The problem is that I have a large graphics library and I'd like to put the graphics for the slide show scripts in separate folders and then have the arrays built dynamically based on the contents of the folder regardless of the filename or extension. I also want to change the graphics now and then and it would be easier to just move the new graphics into the folder instead of having to change all the array definitions.

Does anyone have a script that will do that or could someone suggest how that can be done in javascript? Any help would be appreciated.

jscheuer1
05-06-2008, 03:59 PM
If you wouldn't mind this only working on the server, and you have a server side language available to you, see:

http://www.dynamicdrive.com/forums/showthread.php?t=29378

Jim Weinberg
05-06-2008, 09:56 PM
John.

Thanks for the reply.

I've checked out the link you mentioned. Unfortunately, I can't use .asp (not supported) and I don't know .php. I really need a javascript solution.

Jim

jscheuer1
05-07-2008, 12:18 AM
We can talk you through the PHP part if your server supports PHP. I don't think there is any client side (javascript) solution that will fit your requirements.

Jim Weinberg
05-07-2008, 12:06 PM
John.

Again, thank you for your response.

I'm on a Linux server, so I don't know if PHP is supported or not. The problem is that I have close to 50 pages on my website and this would be the only PHP code.

I hope you don't take offense, but I think I'm going to post my problem on a couple of other forums and see if someone has a javascript solution.

Best regards,
Jim

jscheuer1
05-07-2008, 01:22 PM
It would take more than that to offend me. Um, virtually any server can have PHP. It is more common on non-Windows servers, but can be run on just about anything. I wasn't suggesting that you install PHP on your server. That would be beyond me, though there are probably a few folks around here that could help with that. I had gotten the impression that your server had PHP already. If it does, PHP is the simplest and best solution.

I did a Google on how this might be done via javascript alone and cane up with a IE only method using Active X. But that would really limit the usefulness of the code. And, I believe that would only run in conjunction with a Windows OS anyway, perhaps even only for files on the localhost.

Now, as I mentioned before, javascript can work out if you know the number of images, and there is a base filename for the images. Like if you have 10 files and name them:

slide_0.jpg
slide_1.jpg
slide_2.jpg

and so on. Each time you added one, you would give it the next name in line and increase the number in the the script that sets the upper limit on the number of images to look for.

Jim Weinberg
05-11-2008, 01:09 PM
John.

Well, it's been 4 days and I must conceed that there is apparently no javascript solution.

I've downloaded the PHP script you mentioned and if your offer still stands would like to take you up on walking me through the code.

Jim.

jscheuer1
05-11-2008, 03:27 PM
John.

Well, it's been 4 days and I must conceed that there is apparently no javascript solution.

I've downloaded the PHP script you mentioned and if your offer still stands would like to take you up on walking me through the code.

Jim.

OK, just go over the thread:

http://www.dynamicdrive.com/forums/showthread.php?t=29378

particularly the parts that refer to PHP. It really isn't as complex as you might think. If you do have a problem, let me know. Things that will help me help you at that point are, if you:


Post a link to the page on your site where you are trying this.
Post a copy of the exact getpics.php file you are using.

Jim Weinberg
05-12-2008, 11:36 AM
John.

I have so many questions, I'm not sure where to start. So let me start here:

The call line for the slideshow is:

<script>new fadeshow(ShowPics, 295, 210, 3, 3000, 1)</script>

The page header is as follows:

<script type="text/javascript" src="Script_Files/getpics.php"></script>
<script type="text/javascript" src="Script_Files/slideshow.js"></script>
<script type="text/javascript">
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var fadebgcolor="#FEF4E4"
var display_height="50%"
var caption_size=2
</script>



The php file looks like this:

<?php
Header("content-type: application/x-javascript");

function returnimages($dirname="./") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
$filedate=date ("M d, Y H:i:s", filemtime($file));
echo 'ShowPics[' . $curimage .']=["' . $file . '", ""];' . "\n";
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo "var ShowPics=new Array();" . "\n";
returnimages();
?>

The first problem is that my pages are in one folder, the scripts are in another (called Script_Files) and the pictures are in a third (Graphics/ShowPics). I want to maintain this organization. Ideally, I would like to pass the picture path to the script so I don't have to change the code each time.

Second, I want to link the pictures to a larger view, but I don't want to have to have 2 copies of each picture. The "display_height" variable, above, controls the initial slide show size (I modified the fadeshow script to accomodate this).

The third is that I've also modified the fadeshow script slightly to accomodate captions, so the fadeshow script needs to have 4 parameters passed to it. If I were to use an array to define the pictures, it would look like this:

ShowPics[0]=["Graphics/ShowPics/judging.jpg", "Graphics/ShowPics/judging.jpg", "new",""]

The particular slide show I'm working on won't have captions, but I use the script for other slide shows that do.

I have no idea how to modify the php code to accomodate the above. Can you help?

Jim

jscheuer1
05-12-2008, 12:41 PM
The getpics.php file should be in the folder with the images in it.

Once you have that, modify this line:


echo 'ShowPics[' . $curimage .']=["' . $file . '", ""];' . "\n";

to:


echo 'ShowPics[' . $curimage .']=["Graphics/ShowPics/' . $file . '", "Graphics/ShowPics/' . $file . '", "_new"];' . "\n";

The paths (one path used twice) should be relative to the page that is using the images.

However, just as an observation on something you say you are doing - Loading up the full sized images in the slide show, unless they are fairly small in byte size will take quite a bit of time. Swiss Army slide show at least would do this incrementally:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

But regardless of which you use, your slide shows will benefit from having optimized images in them that are no larger in either their dimensions or byte size than they need to be for display purposes.

You could put these 'thumbnails' in a separate directory and name each one the same as its larger counterpart. Then simply put the path to this thumbnail directory in getpics so it will be used for the first entry in the array generation line, ex:


echo 'ShowPics[' . $curimage .']=["Graphics/ShowPicsTbn/' . $file . '", "Graphics/ShowPics/' . $file . '", "_new"];' . "\n";

Jim Weinberg
05-12-2008, 06:00 PM
John.

As usual, thanks for the reply. Is there no way to pass the directory path to the php routine so I can keep my archetecture in tact?

As for the size of the graphics, they are loaded incrementally (another slight mod), so the overhead time is minimal.

Also, is it possible to pass the array name to the routine so this could be used for other slideshows without having to modify the code?

jscheuer1
05-13-2008, 12:55 AM
I just realized that from the code you published in your post, it looks like:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

You can fix that by using:


<script type="text/javascript" src="Script_Files/slideshow.js">
<!--
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
// -->
</script>

in place of:


<script type="text/javascript" src="Script_Files/slideshow.js"></script>

Now, I'm not 100% sure what your architecture is. You can keep whatever folders you like as long as you put the files in the correct locations and use the correct paths to them in your code.

That said, you can use the PHP GET to pass folder information. If you have:


your main folder with your page(s) in it
a folder off of the main folder with getpics.php in it
a folder or folders off of the main folder that contain images


If that's your 'architecture', this getpics.php should work out:


<?php
Header("content-type: application/x-javascript");
function returnimages() {
$dirname="../" . $_GET["folder"] . "/";
$pathname="" . $_GET["folder"] . "/";
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'ShowPics[' . $curimage .']=["' . $pathname . $file . '", "' . $pathname . $file . '", "_new"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
}

echo "var ShowPics=new Array();" . "\n";
returnimages();
?>

If the above file is in the script folder called Script_Files (the name of the the scripts folder isn't important here, as long as you use it in the script tag) off of the folder with your page(s) in it, and you have folders:

Graphics/ShowPics1/
Graphics/ShowPics2/
Graphics/ShowPics3/

all also off of the folder with your pages in them, you could use this syntax to call the getpics.php from the head of a given page:


<script type="text/javascript" src="Script_Files/getpics.php?folder=Graphics/ShowPics1"></script>

or:


<script type="text/javascript" src="Script_Files/getpics.php?folder=Graphics/ShowPics2"></script>

etc.

However, this will allow any savvy user who looks at your source code to get a listing of all of the images in any folder on your site. I'm not sure if that's important or not to you, and as long as all of your images are used on your site, they could be gotten anyway.

Jim Weinberg
05-13-2008, 03:02 PM
John.

Again, thanks for all your help. The credit comments are in the external file that contains the bulk of the slideshow code. I thought that was acceptable. I will add it to the html page also.

I'm going to try to put this all together this weekend. I'll let you know how it goes.

Thanks again.

Jim

Jim Weinberg
05-14-2008, 02:23 PM
John.

I couldn't wait for the weekend to try this out. I uploaded the PHP code to the server and it works like a charm. I made a slight modification so I could pass the array name, so the code now looks like this:

<?php
Header("content-type: application/x-javascript");
function returnimages($arrayname) {
$dirname="../" . $_GET["folder"] . "/";
$pathname="" . $_GET["folder"] . "/";
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo $arrayname . '[' . $curimage .']=["' . $pathname . $file . '", "' . $pathname . $file . '", "_new"];' . "\n";
$curimage++;
}
}

closedir($handle);
}
}

$arrayname=$_GET["array"];
echo 'var ' . $arrayname . '=new Array();' . "\n";
returnimages($arrayname);
?>

BTW, the Head section of the page now looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta content="Jim Weinberg" name="author">
<title>Spring Show Page</title>
<style>
a{text-decoration:none;color:black}
</style>

<script type="text/javascript" src="Script_Files/build_array.php?folder=Graphics/ShowPics&array=ShowPics">
/***********************************************
* build_array is based on the getpics routine from PHP Photo Album: Dynamic Drive (http://www.dynamicdrive.com)
* Modifications courtesy of jscheuer1.
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
// -->
</script>

<script type="text/javascript" src="Script_Files/slideshow.js">
<!--
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* Modifications courtesy of ddadmin.
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
// -->

var fadebgcolor="#FEF4E4"
var caption_adjust="100%"
var caption_size=2
</script>
</head>

I also added similar comments to other pages where I made scripts external files. Hopefully this will make me legal.

I'm probably going to overstay my welcome, but I'm going to ask one more favor. I'd like to add a parameter to the PHP call line. Something like "usefilenames". This would have a value of "yes" or "no" (or 1 or 0, or True or False, whichever is easier to deal with). If the value passed is "yes" (or 1 or true), I'd like to have the graphic filename without the extension added as a 4th element to each of the array entries.

If you could show me how to change the echo statement to accomplish this, I won't ask for another thing.

Thanks in advance,
Jim
p.s. I'm going to go out and get a copy of PHP For Dummies so I can ask more intelligent questions.

jscheuer1
05-14-2008, 02:56 PM
I'd have to look that up too. Here is a great PHP resource (at least in my unschooled opinion):

http://www.php.net/docs.php

Looks like you are well on your way with PHP. Still, when I get a chance, I will look into it.

I don't think the credit on the getpics file's script tag is required, but if you are going to use it, do it correctly:


<script type="text/javascript" src="Script_Files/build_array.php?folder=Graphics/ShowPics&array=ShowPics">
<!--
/***********************************************
* build_array is based on the getpics routine from PHP Photo Album: Dynamic Drive (http://www.dynamicdrive.com)
* Modifications courtesy of jscheuer1.
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
// -->
</script>

Otherwise it might cause other comment blocks on the page to behave erratically, leading to parsing errors.

jscheuer1
05-14-2008, 03:59 PM
OK:


<?php
Header("content-type: application/x-javascript");
function returnimages($arrayname) {
$dirname="../" . $_GET["folder"] . "/";
$pathname="" . $_GET["folder"] . "/";
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$curimage=0;
$cap=$_GET["cap"];
$str="";
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
if($cap=='yes')
$str = ', "' . preg_replace('/\.[^\.]*$/', '', $file) . '"';
echo $arrayname . '[' . $curimage .']=["' . $pathname . $file . '", "' . $pathname . $file . '", "_new"' . $str . '];' . "\n";
$curimage++;
}
}

closedir($handle);
}
}

$arrayname=$_GET["array"];
echo 'var ' . $arrayname . '=new Array();' . "\n";
returnimages($arrayname);
?>

If you want the fourth item for each array entry, use:

&cap=yes

otherwise there will be only the three. The fourth item if used, will be the filename stripped of its extension.

Example:

getpics.php?folder=images&array=bob&cap=yes

Jim Weinberg
05-14-2008, 04:58 PM
John.

I am humbled by your expertise. It works perfectly. My most profound thanks.

I'm off to get the book.

Best regards,
Jim

Jim Weinberg
05-14-2008, 08:29 PM
John.

Did some more testing and had to make a one line change. The $str assignment on line 8 had to be changed from $str="" to $str=',""'. Otherwise, if "cap" is set to "no" in the call line (or is not specified), the graphics appear with a caption of "Undefined" .

Thought you'd want to know.

Jim

jscheuer1
05-15-2008, 12:12 AM
John.

Did some more testing and had to make a one line change. The $str assignment on line 8 had to be changed from $str="" to $str=',""'. Otherwise, if "cap" is set to "no" in the call line (or is not specified), the graphics appear with a caption of "Undefined" .

Thought you'd want to know.

Jim

Well, that would depend upon your javascript - the use it makes of the array. But, in many implementations, that is how the javascript is done, ex:


if (arrayname[#][3]!='')

But the more to the point:


if (typeof arrayname[#][3]!='undefined'&&arrayname[#][3])

or often just:


if (arrayname[#][3])

wouldn't suffer from that sort of thing. Additionally, if your script that was fed the 3 item array entries wasn't even looking for a fourth, there would be no issue.

Now, I'm not sure if you read my interveaning post:

http://www.dynamicdrive.com/forums/showpost.php?p=143356&postcount=15

because you haven't commented on it. Just thought I'd try to make sure. Among other things (comment tokens syntax in your script tag was another), I mention in it that:

http://us2.php.net/manual/en/index.php

is a good PHP reference. The w3schools site also has some stuff on PHP. It is more beginner level, but sometimes that is where one must start:

http://www.w3schools.com/php/default.asp

Jim Weinberg
05-15-2008, 12:31 PM
Yea, the missing comment tag was a typo.

The actual line in the javascript code is:
if (this.theimages[picindex][3]!="")
slideHTML+='<br><center><b><font size='+caption_size+'>'+this.theimages[picindex][3]+'</b></center>'

Changing the initial definition of $str makes everything mesh.

I did check out the link you sent. That's how I found out how to make the changes. I'll check out the w3schools link also.

Thanks again.
Jim

jscheuer1
05-15-2008, 03:34 PM
The actual line in the javascript code is:

if (this.theimages[picindex][3]!="")

Changing the initial definition of $str makes everything mesh.

That would be analogous (not the same, just the same form) to:


if (arrayname[#][3]!='')

Which I understand is the type of syntax used in the script to determine whether or not to link an image, so I should have imagined that you would follow that example. However, I wasn't thinking about that. And, as I say:


if (this.theimages[picindex][3])

which is a more straightforward way of querying this, wouldn't have that problem, and could handle either your version or mine of the PHP code. The code, both on the server and in the script would be slightly more efficient as well. But that isn't really important.

I think DD originally coded it like that so that the manually written arrays would have a certain uniformity to them. Lot's of folks do have trouble with the script in its original form though because they will leave out a:

, ""

for a non-linked image and end up with one that has a link of href="#", because that is how the script will end up interpreting it in many cases.

What I'm trying to say is that it is mostly a matter of how the two (the PHP and the javascript) work together, and of the person who is writing the code's preference and/or knowledge.