can lightbox read the contents of a folder

**mtokoly** · 07-06-2009, 04:59 PM

1) Script Title: lightbox v2.03a

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...box2/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!

**mtokoly** · 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

**traq** · 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 to write lightbox links. You may need to experiment depending on which version of the script(s) you're using.

**mtokoly** · 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:
example:

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!

**traq** · 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.

**mtokoly** · 07-07-2009, 03:29 PM

great!

ill start working on it

thanks for the help!

**mtokoly** · 07-08-2009, 12:41 AM

ok, i did the modifications on this page: http://www.dynamicdrive.com/forums/s...00&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

**mtokoly** · 07-08-2009, 12:56 AM

heres my code:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<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;
}
</style>
</head>

<body>
<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")
galleryarray.sort(sortbydate)

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>');
document.write('</div>');

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) : ""
}
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){
myLightbox.start(imgsrc); return false;
}

</script>

<!--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> ')
document.getElementById("navlink1").className="current"
</script>
</div>
</body>
</html>