Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: php photo album 2.11 and lightbox integration

  1. #1
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default php photo album 2.11 and lightbox integration

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

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...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 :
    Code:
    <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 suggested i've done this :
    Code:
    <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 :
    Code:
    Uncaught TypeError: Cannot call method 'start' of undefined
    phpimagealbum.onphotoclickilcatering.html:102
    (anonymous function)
    any idea?
    that is the page that does'nt work
    Last edited by elio.d; 12-07-2010 at 04:39 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    http://home.comcast.net/~jscheuer1/s...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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    elio.d (12-07-2010)

  4. #3
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #7
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

    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
    Last edited by elio.d; 12-07-2010 at 07:04 PM.

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Dec 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •