Lightbox Image Viewer with PHP Photo Album

[JBH]

Yep, me again with another merge question.

This time (it looks like it should have been ez) I'm using the PHP Photo Album script to display the thumbnails, and when the visitor clicks on a thumbnail, the Lightbox Image Viewer script SHOULD show the pic in the Lightbox's neat little fashion.

But it's not.

Lightbox Image Viewer uses a rel="lightbox" code in its links to tell the page to use it with the Lightbox JS script. I tried to apply the same to the script for the PHP Photo Album code, but the pics open within the windows; not activating the Lightbox Image Viewer function.

The code Im trying to use is:

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'" rel="lightbox">' : ""

script reference links:
PHP Photo Album
Lightbox Image Viewer

Any help? Thx.

[jscheuer1]

You should at least get rid of:

target="'+href_target+'"

and see what happens.

Also, there could be onload conflicts between the two scripts.

[JBH]

I've tried removing the target="'+href_target+'", tried to add rel="'+light_box+'" with a rel="lightbox" call function, and I tried minipulating the script as best I can. I can't see where the two scripts would conflict, that was my second guess. Anyways, Im gonna email the author of the Lightbox Image Viewer and see if he can figure it out.

If someone else can fiugure it out, please share it. If the author Lightbox Image Viewer script gets it working, I'll post it for later use.

[jscheuer1]

The two scripts will conflict if any one or more of these three situations exist:

1 ) They both do something onload in such a way as disables the other scripts ability to perform its onload function(s).

2 ) They both use (a) variable or function name(s) that are the same but defined differently or in a different context.

3 ) One accesses an element changing its properties in such a way as the other script requires be left to its control.

There can be other conflicts. When I get some time I will look at the specifics but, this could potentially be a real project, well beyond a simple question and answer as is the norm for these forums.

[jscheuer1]

It turns out that it is a variation on number 3 from my last post. This syntax works:

var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""

Assuming that you have the larger sized images defined in the galleryarray as the links, ex:

galleryarray[0]=["../thumb/photo1.jpg", "optional title", "optional description", "../full/photo1.jpg"]

With just this much, lightbox worked on the first 'page' but, any time the page was changed, it would stop working, even switching to page two and back to page one broke it. So, I realized that lightbox needed to be re-inited after each page change. Find this function in the Photo Album script (it is near the end) and add the part shown in red:

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"
initLightbox();
}

[JBH]

Thanks for the help. Works great!
All the people in my unit will be pleased. It's a project for my Reserve unit, an OIF II Photo Album.

Much Thx!

[jr_yeo]

m a newbie at php and js
where should i place this?

galleryarray[0]=["../thumb/photo1.jpg", "optional title", "optional description", "../full/photo1.jpg"]

do i have to enter the thumbnails and the full image manually in the "galleryarray" array?

how do can i incorporate the code mentioned above to the combined php album script and lightbox script?

tnx

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

<script src="img/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="5x4" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="img/" //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=""

//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)
else
galleryarray.sort()

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)">'
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""
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) : ""
tempcontainer+=galleryarray[i][0].replace(/\..*$/, '')
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"
initLightbox();
}

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
}

</script>

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

[jscheuer1]

You need to configure this variable:

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

To have different images used as the large version. Once you get that much, load up the page and then paste this into the address bar:

javascript:alert(galleryarray[0])

Hit enter, an alert box should pop up with the contents of the first array entry. There should be commas between each item. Don't count a comma in a date, like:

Dec 16, 2005

The first is known as [0][0], the second as [0][1] and so on. Find the position of the large image. If you've done nothing else to add to the array other than to add the variable for the large image directory, this number should work out to be 2.

Then edit the code to reflect that as the large image position, in the above post where it says to do this:

var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""

Change both 3's to the number your little experiment shows is the position of the url for the larger image.

[Yaoumei]

Image, Date + Time
When I paste javascript:alert(galleryarray[0]) into the address bar, it only shows this information. I have a larger image gallery that works with the normal popup, but it only shows one image name. It lists the name of my image in position [0][0]. However, if I replace the 3's from this code with 0's, it doesn't work.

var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" rel="lightbox">' : ""

It will just get stuck at the loading image.
Example: http://yaoumei.ya.funpic.org/gallery.php

<script src="gallery/guest-sm/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="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="gallery/guest-sm/" //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="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="gallery/guest-lg/"

/////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=galleryarray[i][0]!=""? '<a href="'+galleryarray[i][0]+'" rel="lightbox">' : ""
//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"
initLightbox();
}

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
}

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

Is there something else I need to change in order for it to work?
Or is there something else needed from this commented out code?

//var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'

Sorry about this, I really know nothing about coding.
Any help would be much appreciated. m(__)m

[jscheuer1]

I'm not sure what I was thinking but, this will work. You need to have:

var targetlinkdir=""

configured to a real directory that is separate from where the smaller images are, and you need to have all your larger images in there under the same names as the smaller images (follow the instructions for doing this on the demo page*). Then use this function buildimage(i):

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox">'
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
}

Remember though, you need to have the targetlinkdir configured in the script and it must exist and be filled with the larger images.



*

from the Demo Page:
Notes

By default, each image within the gallery simply links to itself. However, if you wish them to link to larger versions of themselves, you can specify an alternate directory in which the larger images are located. The file names of these large images should mirror those of the original. To do this, change the variable of Step 3:

var targetlinkdir=""

to something like:

var targetlinkdir="http://www.mysite.com/largegallery/"

This will cause the script to use the directory above instead when loading the image associated with the thumbnail. Obviously you'll need to create an enlarged version of each image, upload them to this directory, maintaining the same file names as the originals, in order for this to work.

EDIT:

And, I'm not sure where you joined this discussion but, you still need to int the lightbox after these lines in the album script:

for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
initLightbox()

At least that is the init code for most of the lightbox scripts, there are some variations. The above works with the original lightbox and, I believe 2.02, but not with what was called 'lightbox plus'.