php photo album 2.11 and lightbox integration

[elio.d]

1) Script Title:
php photo album script v2.11
lightbox v2.04

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

3) Describe problem:

yes another php photo album and light box integration post... sorry.
I'm trying to integrate php photo album with lightbox in my website but even following the suggestions mentioned in previous post, all the stuff doesn't work.

what i've done :
1) I've included the following in my header :


<script type="text/javascript" src="images/Catering/getalbumpics.php?id=catering"></script>
<script type="text/javascript" src="ddphpalbum.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href="css/screen.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/ddphpalbum.css" />


2) as here (http://www.dynamicdrive.com/forums/showpost.php?p=211119&postcount=2) suggested i've done this :


<script type="text/javascript">
(function(groupName){
var d = document.createElement('div'), tmpLink = document.createElement('a'),
lbLink, arObj = window[groupName];
d.style.display = 'none';
tmpLink.rel = 'lightbox[' + groupName + ']';
for(var i = 0; i < arObj.images.length-1; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = arObj.baseurl + arObj.images[i][1];
if(arObj.desc[i]){
lbLink.title = arObj.desc[i];
}
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
arObj.hiddenLinks = d.getElementsByTagName('a');
})('catering');

new phpimagealbum({
albumvar: catering, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,2],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
// autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
// showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
Lightbox.box.start(catering.hiddenLinks[thumbindex]);
}
})
</script>


now i can see the generated gallery but when i click an image nothing happens . Using chrome developer tools i can read this error message :

Uncaught TypeError: Cannot call method 'start' of undefined
phpimagealbum.onphotoclickilcatering.html:102
(anonymous function)

any idea?
that is the page (http://www.ilcasaledigurafi.it/ilcatering.html) that does'nt work

[jscheuer1]

Use the 2.04a version of lightbox.js (right click and 'save as'):

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/js/lightbox.js

Everything else may remain the same.

Notes:


The error I get with Firefox developer tools is a bit different and slightly more illuminating (it points to the same error, even though the line number is off by one):


Error: Lightbox.box is undefined
Source File: http://www.ilcasaledigurafi.it/ilcatering.html
Line: 103



Since in the post that you're working from I recommended v2.04a, I checked. It has Lightbox.box. The official distribution you're using doesn't. The helper scripts, styles and images are unchanged. The setup visa vis what goes where in what folders is also unchanged.



The 2.04a version is also required to correctly handle the duplicate image triggers that inevitably result.

[elio.d]

ok you are my hero... ehhehe thanks very much

[elio.d]

one more question... the close button in the lightbox popup doesn't work it's normal? I mean this integration doesn't provide the close button function?

[jscheuer1]

It works. Probably if you clicked on the right spot it would anyway, though with Firefox that might not be true. Most likely the images/closelabel.gif file isn't there.

But you haven't updated the demo, so I can't really be sure. The images/closelabel.gif is in the right location for it. And would be for 2.04a too if it were the script for the demo.

If you want more help, update the demo (ilcasaledigurafi.it/ilcatering.html) and let me know.

[elio.d]

a couple of things still don't work
1) the close button works only on firefox, not with safari/chrome, IE not tested yet (I'm a mac user)
2) when I click the first image, inside the lightbox popup i don't see for example image 1 of 9 but 5 of 9 so i guess that the array created is the reverse of the array created with the php script.

the updated demo is online. thanks for your help

[elio.d]

another thing i noted is that the gallery show a differente order of the images depending on the browser used :confused: (

little update : you are right, sorry, if i click the "right" spot th close button works on chrome and safari. maybe working on the css could help.

the point 2 of my previous post is still live

[jscheuer1]

There was a workaround for the order. I'll see if I can find it. I think the code used in the photo album script was off - accounting for differences among browsers (if that's happening, the order of the thumbnail gallery, not just the lightboxes would be different), and a slightly different method for invoking lightbox in the onphotoclick function was required to make sure the images sync up with their order in the gallery. Other browsers should be showing the close button. IE is here. Perhaps you need to refresh the page and/or clear the cache in those browsers.

[elio.d]

for the order I've changed the name of my images file into 1.jpg 2.jpg and so on, now all the browser(safari/chrome/firefox) show the images in the same order even lightbox show the right order.
I need to work around the close button issue and at the moment, honestly, i don't know how :)

thank for your help

[jscheuer1]

Here, near the end of lightbox.css, add the highlighted:


#imageData #bottomNavClose{ position: relative; width: 70px; float: right; padding-bottom: 0.5em;outline: none;}

[jscheuer1]

I see you got that. Anyways, as to the order of the images in the gallery visa vis the new naming convention for the image files and for working with lightbox, this works well:


phpimagealbum.prototype.createHiddenLinks = function(){
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + new Date().getTime() + ']';
for(i = 0; i < av.images.length; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = av.baseurl+ av.images[i][1];
lbLink.title = av.images[i][2];
lbLink.target = av.images[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
av.hiddenLinks = d.getElementsByTagName('a');
};


new phpimagealbum({
albumvar: catering, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,3],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
onphotoclick:function(thumbref, thumbindex){
var al = this.albumvar.hiddenLinks, i = al.length - 1;
for (i; i > -1; --i){
if(al[i].target == thumbindex){
Lightbox.box.start(al[i]);
}
}
}
}).createHiddenLinks();