Need help tweaking a script

msaz87 posted this at 05:21 — 15th April 2007.

Joined: Jun 2006

Hey,

I'm trying to make a few changes to a JS/PHP script. In a nutshell, the script displays all the photos in a directory like a photo album. This is the script's page: http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

The tweaks I want to make are being able to designate the size of all the images and also tell the script to display the image's file name instead of "Photo 1, Photo 2" etc.

Here's the PHP code involved:

<?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 'galleryarray[' . $curimage .']=[\"' . $file . '\", \"'.$filedate.'\"];' . \"\n\";
                 $curimage++;
               }
       }

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

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

And the JS:

&lt;script src="http://www.mysite.com/gallery/getpics.php" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

/***********************************************
* PHP Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var dimension="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://www.mysite.com/gallery/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[1, "Photo "]

//Sort images by date? ("asc", "desc", or "")
//"desc" for example causes the newest images to show up first in the gallery
//"" disables this feature, so images are sorted by file name (default)
var gsortorder="desc"

//By default, each image hyperlinks to itself.
//However, if you wish them to link to larger versions of themselves
//Specify the directory in which the larger images are located
//The file names of these large images should mirror those of the original
//Enter a blank string ("") to disable this option
var targetlinkdir="http://www.mysite.com/largegallery/"

/////No need to edit beyond here///////////////////

function sortbydate(a, b){ //Sort images function
if (gsortorder=="asc") //sort by file date: older to newer
return new Date(a[1])-new Date(b[1])
else if (gsortorder=="desc") //sort by file date: newer to older
return new Date(b[1])-new Date(a[1])
}

if (gsortorder=="asc" || gsortorder=="desc")
galleryarray.sort(sortbydate)

var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}

var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

&lt;/script&gt;

<!--Below HTML code refers to the navigational links for the gallery-->

<div id="navlinks">
&lt;script type="text/javascript"&gt;
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
&lt;/script&gt;
</div>

And finally, the CSS... which I'm sure has no relevance to the question:

<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

If anyone knows how to make these changes, I'd really appreciate the help -- I'm not very good at writing or making significant changes to JS or PHP.

Thanks.

demonhale posted this at 06:11 — 15th April 2007.

He has: 3,278 posts

Joined: May 2005

On the page at dynamic drive take a look at step 3 and pay a much closer attention to the instructions on the JS imagepath which is the one responsible for actually reading the filenames for display... If you dont correct the path, it won't show the correct name...

msaz87 posted this at 06:19 — 15th April 2007.

They have: 68 posts

Joined: Jun 2006

Right. I did that -- I have no probably customizing the script as is .. and I just put the default one up here.

This is what I have working:
http://www.foothillsbaptist.org/contacts/Engineering/test.htm

But as you can see, it generates generic labels underneath and all the photos are a size undefined by me.

Any ideas? Thanks.

demonhale posted this at 07:01 — 15th April 2007.

He has: 3,278 posts

Joined: May 2005

as I can see on your source css theres a defined height and width which you should change...

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
}

And on your JS, change the number 1 to 0

from this (look on bold text)

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[<strong>1</strong>, "Photo "]

to this

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[<strong>0</strong>, "Photo "]

demonhale posted this at 07:02 — 15th April 2007.

He has: 3,278 posts

Joined: May 2005

That should fix it up for your needs...

msaz87 posted this at 07:08 — 15th April 2007.

They have: 68 posts

Joined: Jun 2006

Thanks for the help with the sizing issue... I feel like an idiot for overlooking that in the CSS.

For the other part, however, what I'm looking for is to replace the text displayed beneath with the photo's filename. When I make the change like you instructed, it simply removes the text altogether.

What I'm trying to achieve is name the files after people (Ex: "Bob Smith.gif") so that their photo will appear and underneath will be "Bob Smith" (with the extension cut off by another part of the script).

I'm not sure if it'd be easy to alter the JS to do this ... or if it'd be easier to use PHP to do it? I can't write either, but I assume you could do something like:

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[1, "<strong>$filename</strong>"]

But if it stayed all as JS... I'm sure it'd make life easier.

demonhale posted this at 07:27 — 15th April 2007.

He has: 3,278 posts

Joined: May 2005

to display the filename you can replace it like this.
.

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[<strong>0</strong>]

'
.
It will then display the filename... but to cut the file extension, it would require some php coding...

msaz87 posted this at 08:16 — 15th April 2007.

They have: 68 posts

Joined: Jun 2006

I replaced the code like you said... but still no filenames:
http://www.foothillsbaptist.org/contacts/Engineering/test.htm

For cutting the extensions, I guess I'll worry about that later.

demonhale posted this at 09:55 — 15th April 2007.

He has: 3,278 posts

Joined: May 2005

The easiest way is to edit the JS...

Example to the codes is found on my other site at
http://www.designer-city.com/php/gallery

as you can see it generates the filename together with the image...

just view the source, or copy it all and paste on yours, just edit the CSS again to match yours...