Results 1 to 7 of 7

Thread: PHP Photo Album script v2.11 Captions Inside Lightbox

  1. #1
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album script v2.11 Captions Inside Lightbox

    1) Script Title: PHP Photo Album script v2.11

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

    3) Describe problem:

    I have searched the forum but cant find it here , Can i place the caption inside the built in pop up , i have installed it and all was working i just need the captions going inside below or above the image. so I saw:

    http://www.dynamicdrive.com/forums/s...ad.php?t=59291

    Here is my URL : http://www.flippish.com/live-stream-test/

    It will just jump upwards when the button is clicked. Can somebody check what i am missing? Thanks.
    Last edited by jscheuer1; 11-08-2011 at 01:56 PM. Reason: nearly duplicate posts merged

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    That thread was an old thread and you didn't even use the latest invocation shown in it. Even so, it was working in Firefox.

    Your main problem is that the page already uses jQuery and MooTools. jQuery can coexist with one other $ using library like Mootools or Prototype, but Mootools and Prototype can't coexist with each other. It works in Firefox because Prototype overwrites MooTools, or perhaps for some other reason.

    In any case, I wasn't able to get the problem you describe exactly, but in Opera it was close, in IE it just didn't work at all.

    Fortunately there is a Lightbox clone called Slimbox 2 that uses jQuery:

    http://www.digitalia.be/software/slimbox2

    Install it on your page - the jQuery version, there is a MooTools version out there, you don't want that. If there's any doubt, get the official jQuery Slimbox2 from here:

    http://code.google.com/p/slimbox/dow...imbox-2.04.zip

    Replace:

    Code:
    	<script type="text/javascript" src="http://www.flippish.com/wp-content/themes/Flippish2.0/alodia/scripts/prototype.js"></script>	
    	<script type="text/javascript" src="http://www.flippish.com/wp-content/themes/Flippish2.0/alodia/scripts/scriptaculous.js?load=effects,builder"></script>
    	<script type="text/javascript" src="http://www.flippish.com/wp-content/themes/Flippish2.0/alodia/scripts/lightbox.js"></script>	
    	<link rel="stylesheet" href="http://www.flippish.com/wp-content/themes/Flippish2.0/alodia/lightbox.css" type="text/css" media="screen" />
    with:

    Code:
    	<script type="text/javascript" src="slimbox2.js"></script>
    	<script type="text/javascript">
    	// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
    	// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
    	// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
    	// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
    	// as first seen in http://www.dynamicdrive.com/forums/
    	// username: jscheuer1 - This Notice Must Remain for Legal Use
    	(function($){
    		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    			$('*[href][rel^=lightbox]').live('click', function(e){
    				var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
    				if(rel === 'lightbox'){
    					$.slimbox(t.href, t.getAttribute('title') || '', { /* Options */ });
    				} else {
    					$('*[href][rel="' + rel + '"]').each(function(){
    						if($.inArray(this.href, hrefs) < 0){
    							if(t.href === this.href){index = hrefs.length;}
    							hrefs.push(this.href);
    							links.push([this.href, this.getAttribute('title') || '']);
    						}
    					});
    					$.slimbox(links, index, {loop: true /* , Aditional Options */ });
    				}
    				e.preventDefault();
    			});
    		}
    	})(jQuery);
    	</script>
    <link rel="stylesheet" href="slimbox2.css" type="text/css">
    Adjust the paths as required, make sure to include the helper images in the folder with the slimbox2.css in it. You may make the Live Load Script external or put it at the end of slimbox2.js In any case you need to comment out or remove the AUTOLOAD CODE BLOCK from slimbox2.js

    Now, all you need to do is make your section that currently looks like so:

    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){
      	  arObj.desc[i] = arObj.images[i][1];
      	  arObj.desc[i] = arObj.desc[i].substring(0,  arObj.desc[i].indexOf('.jpg'));
      	 }
      	
      	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){
      			lbLink.title = arObj.desc[i];
      		}
      		d.appendChild(lbLink);
      	}
    	document.body.insertBefore(d, document.body.firstChild);
    	arObj.hiddenLinks = d.getElementsByTagName('a');
    		})('alodia');
    
    		new phpimagealbum({
    		 albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
    		 dimensions: [4,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(alodia.hiddenLinks[thumbindex]);
    		 }
    		})
    		</script>
    Make it look like:

    Code:
    <script type="text/javascript">
    		(function(groupName){
    			var arObj = window[groupName];
    			for(var i = 0; i < arObj.images.length-1; ++i){
    				arObj.desc[i] = arObj.images[i][1];
    				arObj.desc[i] = arObj.desc[i].substring(0,  arObj.desc[i].indexOf('.jpg'));
    			}
    		})('alodia');
    
    		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.desc[av.images[i][0]];
    		  		lbLink.target = av.images[i][0];
    		  		d.appendChild(lbLink);
    		  	}
    			document.body.insertBefore(d, document.body.firstChild);
    		  	av.hiddenLinks = d.getElementsByTagName('a');
    		};
    
    		new phpimagealbum({
    		 albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
    		 dimensions: [4,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){
    			 var al = this.albumvar.hiddenLinks, i = al.length - 1;
    			 for (i; i > -1; --i){
    			 	if(al[i].target == thumbindex){
    			 		jQuery(al[i]).click();
    			 	}
    			 }
    		 }
    		}).createHiddenLinks();
    		</script>
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thank you very much youre a god now to me..

    Last question is there a way that i can hide the image name below the images and just include it inside the lightbox?

    i cant seem to add descriptions to it anymore using

    Code:
    <script type="text/javascript">
    alodia.desc[1]="This is description for the 3rd picture in the album"
    alodia.desc[2]="This is description for the 7th picture in the album"
    alodia.desc[3]="This is description for the 3rd picture in the album"
    alodia.desc[4]="This is description for the 7th picture in the album"
    </script>
    Again thanks.
    Last edited by halluzineyt; 11-09-2011 at 09:04 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    I was just trying to duplicate what you had. I saw no attempt to use:

    Code:
    <script type="text/javascript">
    alodia.desc[1]="This is description for the 3rd picture in the album"
    alodia.desc[2]="This is description for the 7th picture in the album"
    alodia.desc[3]="This is description for the 3rd picture in the album"
    alodia.desc[4]="This is description for the 7th picture in the album"
    </script>
    And that feature can be fraught with problems. But it is workable if you're willing to put up with its vagaries - it's sometimes hard to get them to actually sync up with the sorted images. And if you add or remove images, or even just upload them again sometimes or change their folder, they can get out of whack again.

    There is a fix for that, see:

    http://www.dynamicdrive.com/forums/s...282#post253282

    There's an update for the PHP Photo Album at the end of that post which changes the syntax of that feature to (I see you've changed the filenames):

    Code:
    <script type="text/javascript">
    alodia.desc['1.jpg']="This is description for 1.jpg"
    alodia.desc['2.jpg']="This is description for 2.jpg"
    alodia.desc['3.jpg']="This is description for 3.jpg"
    alodia.desc['4.jpg']="This is description for 2.jpg"
    </script>
    That way you can name the files anything you want to and no matter how they're sorted, the descriptions will always sync up.

    But it appears you've edited the ddphpalbum.js file and now no descriptions are being used for the thumbnails. If you want to do that and use:

    Code:
    <script type="text/javascript">
    alodia.desc[1]="This is description for the 3rd picture in the album"
    alodia.desc[2]="This is description for the 7th picture in the album"
    alodia.desc[3]="This is description for the 3rd picture in the album"
    alodia.desc[4]="This is description for the 7th picture in the album"
    </script>
    revert the script and use that. And get rid of:

    Code:
    		(function(groupName){
    			var arObj = window[groupName];
    			for(var i = 0; i < arObj.images.length-1; ++i){
    				arObj.desc[i] = arObj.images[i][1];
    				arObj.desc[i] = arObj.desc[i].substring(0,  arObj.desc[i].indexOf('.jpg'));
    			}
    		})('alodia');
    That overwrites the descriptions.

    But before we do anything, what do you want in the lightbox, the description or the filename or nothing? And what do you want under the thumbnail images, the description or the filename or nothing?
    Last edited by jscheuer1; 11-09-2011 at 03:34 PM. Reason: saw script had been edited
    - John
    ________________________

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

  5. #5
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I would like to have nothing beneath the thumbnails then a description inside the lightbox sir .

    I changed the ddphpalbum.js to arranged the file using file names which i have seen on the forums using this:

    Code:
    function phpimagealbum(setting){
    	this.albumvar=setting.albumvar
    	this.albumvar.images.pop() //remove last "dummy" array element
    	this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
    	this.dimensions=setting.dimensions || [3,3]
    	this.sortby=setting.sortby || ["file", "asc"],
    	this.autodesc=setting.autodesc
    	this.showsourceorder=setting.showsourceorder
    	this.onphotoclick=setting.onphotoclick || function(){}
    	this.photodivs=[] //array referencing each DIV that contains a slide
    	this.navlinks=null //HTML collection
    	if (setting.sortby[0]=="file") //sort by filename (asc)
    		this.albumvar.images.sort(function(a,b){return a[1].replace(/\D/g, '') - b[1].replace(/\D/g, '');});
    	else //sort by date (asc)
    		this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
    	if (setting.sortby[1]=="desc"){
    		this.albumvar.images.reverse()
    	}
    	this.buildgallery()
    	this.buildnav()
    }
    but i think using this for descriptions is much better:

    Code:
    <script type="text/javascript">
    alodia.desc['1.jpg']="This is description for 1.jpg"
    alodia.desc['2.jpg']="This is description for 2.jpg"
    alodia.desc['3.jpg']="This is description for 3.jpg"
    alodia.desc['4.jpg']="This is description for 2.jpg"
    </script>
    Do i have to turn back ddphpalbum.js to achieve this.?

    Thanks again,.
    Last edited by halluzineyt; 11-10-2011 at 04:30 AM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    You can keep your edited copy of the script. But get rid of this:

    Code:
    <script type="text/javascript">
    alodia.desc[2]="This is description for the 3rd picture in the album"
    alodia.desc[3]="This is description for the 7th picture in the album"
    alodia.desc[4]="This is description for the 3rd picture in the album"
    alodia.desc[5]="This is description for the 7th picture in the album"
    </script>
    Replace it with:

    Code:
    <script type="text/javascript">
    alodia.cap = {};
    //alodia.cap['imagename.jpg']="Picture slimbox caption here"
    alodia.cap['1.jpg']="This is the slimbox caption for 1.jpg"
    alodia.cap['3.jpg']="This is the slimbox caption for 3.jpg"
    </script>
    And replace:

    Code:
    <script type="text/javascript">
    		(function(groupName){
    			var arObj = window[groupName];
    			for(var i = 0; i < arObj.images.length-1; ++i){
    				arObj.desc[i] = arObj.images[i][1];
    				arObj.desc[i] = arObj.desc[i].substring(0,  arObj.desc[i].indexOf('.jpg'));
    			}
    		})('alodia');
    
    		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.desc[av.images[i][0]];
    		  		lbLink.target = av.images[i][0];
    		  		d.appendChild(lbLink);
    		  	}
    			document.body.insertBefore(d, document.body.firstChild);
    		  	av.hiddenLinks = d.getElementsByTagName('a');
    		};
    
    		new phpimagealbum({
    		 albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
    		 dimensions: [4,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){
    			 var al = this.albumvar.hiddenLinks, i = al.length - 1;
    			 for (i; i > -1; --i){
    			 	if(al[i].target == thumbindex){
    			 		jQuery(al[i]).click();
    			 	}
    			 }
    		 }
    		}).createHiddenLinks();
    		</script>
    with:

    Code:
    <script type="text/javascript">
    		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.cap[av.images[i][1]] || '';
    		  		lbLink.target = av.images[i][0];
    		  		d.appendChild(lbLink);
    		  	}
    			document.body.insertBefore(d, document.body.firstChild);
    		  	av.hiddenLinks = d.getElementsByTagName('a');
    		};
    
    		new phpimagealbum({
    		 albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
    		 dimensions: [4,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){
    			 var al = this.albumvar.hiddenLinks, i = al.length - 1;
    			 for (i; i > -1; --i){
    			 	if(al[i].target == thumbindex){
    			 		jQuery(al[i]).click();
    			 	}
    			 }
    		 }
    		}).createHiddenLinks();
    		</script>
    Notes:

    Notice the highlighted line in the above:

    Code:
    lbLink.title = av.cap[av.images[i][1]] || '';
    That means that if there is a cap defined, slimbox will use it, otherwise there will be no caption. But you could make that line:

    Code:
    lbLink.title = av.cap[av.images[i][1]] || av.images[i][1];
    and it will give the filename and extension as a caption for those images missing a caption, or:

    Code:
    lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0,  av.images[i][1].indexOf('.jpg'));
    Which would give just the filename, no extension as a caption for those images that have no caption configured for them.


    For this part:

    Code:
    <script type="text/javascript">
    alodia.cap = {};
    //alodia.cap['imagename.jpg']="Picture slimbox caption here"
    alodia.cap['1.jpg']="This is the slimbox caption for 1.jpg"
    alodia.cap['3.jpg']="This is the slimbox caption for 3.jpg"
    </script>
    You may instead use the time saving (as far as the number of keystrokes involved goes) alternative format:

    Code:
    <script type="text/javascript">
    //'imagename.jpg': "Picture slimbox caption here",
    alodia.cap = {
    	'1.jpg': "This is the slimbox caption for 1.jpg",
    	'3.jpg': "This is the slimbox caption for 3.jpg",
    	'8.jpg': "This is the slimbox caption for 8.jpg" //<-- Important - no comma after the last entry
    };
    </script>
    Either way, one of the other nice things about this method is that if an image is removed from the folder, you don't have to remove it from the alodia.cap object, its entry will simply be ignored and not affect the order of the others. Entries may be put in any order as well. However, it's best to keep them in numeric order for organizational reasons. You can if you like have more than one entry for the same image though. In which case the script will simply use the last one, ignoring any others for that image that come before it.
    Last edited by jscheuer1; 11-10-2011 at 06:03 AM. Reason: add - Either way, one of the . . .
    - John
    ________________________

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

  7. #7
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for all the help its all complete now. Youre the best ! !!!!

    Thanks

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
  •