View Full Version : can lightbox read the contents of a folder

07-06-2009, 04:59 PM
1) Script Title: lightbox v2.03a

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm

is there a way for lightbox to read a folder instead of having to list the urls?

the reason i ask is because i have a site with many properties and i will be constantly uploading new images

any help would be greatly appreciated!

07-06-2009, 07:17 PM
sorry if my question is a newbie one.

im very new to php and ive searched everywhere for the answer to this question.

if lightbox cant do this, is there a good image gallery that can?

please please help

07-06-2009, 07:56 PM
No, lightbox can't do this. You can use PHP, however.
Here is a starting place. I modified the PHP photo album (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm) to write lightbox links. You may need to experiment depending on which version of the script(s) you're using.

07-07-2009, 03:55 AM
thanks traq!

im looking at those links and im very new to php so i dont want to go down the wrong direction so please bare with me.

here is what i have so far:

property table/
id - street - city - state
12 - 1234 street - dallas - texas

when a property is created, a folder is also created that links to the property by name(ie. uploads/12/)
this is where the images go

what im going for is when someone views the property, you can click on a thumbnail which then opens lightbox and then be able to scroll through all the images

its complicated and i dont even know if its the right way to do it

my head hurts - please help!

07-07-2009, 05:05 AM
download the PHP Photo Album script and compare its code to the modified code in those discussions. It shouldn't be too hard to figure out (I only had to change a few lines, and I was brand new to PHP when I tried it.) Try it out and post what you come up with so we can help.

07-07-2009, 03:29 PM

ill start working on it

thanks for the help!

07-08-2009, 12:41 AM
ok, i did the modifications on this page: http://www.dynamicdrive.com/forums/showpost.php?p=160300&postcount=5

one problem:
when the images are viewed in lightbox, for some reason the images are doubled

for instance, the first image opened reads: "12 of 22", when there are only 11 images total

07-08-2009, 12:56 AM
heres my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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: 400px;
height: 212px;

#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;

<script src="http://localhost/test/gallery/getpics.php" type="text/javascript"></script>

<script type="text/javascript">

* 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="2x6" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://localhost/test/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=[0, "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="asc"

//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=""

/////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")

document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[joe]"></a>');

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+'" rel="lightbox[joe]" 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) : ""

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>')
document.write('<br style="clear: left" />')

function popuplinkfunc(imgsrc){
myLightbox.start(imgsrc); return false;


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

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

07-12-2009, 09:59 PM

07-13-2009, 01:01 AM
...not sure. I'm comparing your code to a functioning album I have. I'll let you know.

Could you also post your file structure and getpics.php?

07-13-2009, 03:08 AM
thanks traq, i honestly just want a nice looking picture viewer.

is there any way to add next and previous buttons to PHP Photo Album, instead of the page numbers?

07-13-2009, 08:17 PM
no problem. I'm very happy with the PHP photo album / lightbox combo, personally.

I can't seem to find any real differences (of the sort that might affect the image title or count) between my version and yours. Just to be sure, did you edit anything below the "NO NEED TO EDIT BELOW" line aside from the "rel="lightbox"" line?

Troubleshooting would say that you take the original photo album script and see if it works correctly, then change the lines one at a time to see where it goes wrong.

As far as pagination goes, yes, it's possible, but I'd have to figure it out. : ) Maybe I'll have time later.