"Next" and "Prev" buttons in PHP photoalbum

[Poontang]

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


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

3) Describe problem:

Wow...this is just what I asked for a few years back here on DD!
A PHP album with a build in LightBox!

Now ... would it be possible to make a "Next" and "Previous" button on the pictures - while they are opened as a LightBox?
(I have all my images nomurous named, ie: 001.jpg, 002.jpg etc.)

Merry Christmas, y'all

[jscheuer1]

The built in lightbox is very bare bones. To give it that functionality would be about like rewriting Ligntbox. Something which has already been done ad nauseam.

I have a number of mods for PHP Photo Album. Two of these would be of interest here. One uses a modified version of Lighbox, the other uses FancyBox. Both give the previous/next funtionality. The Lightbox one gives the familiar Lightbox layout for the larger image. Fancybox has a different layout, though could be tweaked to look like Lightbox, or to look just about any way you want.

So far my FancyBox mod of PHP only uses the default FancyBox layout.

To get an idea of the two scripts alone see:

http://fancybox.net/

and:

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

The Lightbox mod has a "First Light" feature, which is optional, but some of its other modifications are required to work properly with PHP photo album. You cannot use any of the official Lightbox releases.

To use FancyBox, install it in the head as instructed on the FancyBox site. After that install the head files for PHP Photo. In PHP Photo's ddphpalbum.js remove the internal lightbox (everything after and including):

/////////Following is thumbnailviewer(), a plugin to PHP Photo Album for enlarging thumbnail images/////////////////

For the body part of PHP Photo use (substitute your own albumvar, two places):

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
	cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
	var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
	i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
	d.style.display = 'none'; tmpLink.rel = 'fancybox_' + cfg.groupName;     
	for(i; i < avil; ++i){
		lbLink = tmpLink.cloneNode(false);
		lbLink.href = base + avi[i][1];
		lbLink.title = avi[i][2];
		lbLink.tabindex = avi[i][0];
		d.appendChild(lbLink);
	}
	document.body.insertBefore(d, document.body.firstChild);
	lbLink = d.getElementsByTagName('a');
	$(lbLink).fancybox();
	this.onphotoclick = function(ref, idx){
		var i = lbLink.length -1;
		for (i; i > -1; --i){
			if(lbLink[i].tabindex == idx){
				$(lbLink[i]).click();
				break;
			}
		}
	};
};

new phpimagealbum({
	albumvar: demopics, //ID of photo album to display (based on getpics.php?id=xxx)
	dimensions: [3,3],
	sortby: ["file", "desc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'demopics'}); //takes optional object as argument, ex: {groupName: 'demopics', path: 'alternate_path_to_larger_images/'}
</script>

For Lightbox 204a, install as instructed in the head, followed by the head part of PHP Photo, remove the same section of code from the ddphpalbum.js script as for the FancyBox install above, use this as the in body for PHP Photo (same deal with the albumvar):

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
	cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
	var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
	i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
	d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';     
	for(i; i < avil; ++i){
		lbLink = tmpLink.cloneNode(false);
		lbLink.href = base + avi[i][1];
		lbLink.title = avi[i][2];
		lbLink.tabindex = avi[i][0];
		d.appendChild(lbLink);
	}
	document.body.insertBefore(d, document.body.firstChild);
	lbLink = d.getElementsByTagName('a');
	this.onphotoclick = function(ref, idx){
		var i = lbLink.length -1;
		for (i; i > -1; --i){
			if(lbLink[i].tabindex == idx){
				Lightbox.box.start(lbLink[i]);
				break;
			}
		}
	};
};

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"]
}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>

[Poontang]

Hey John!

That seems very promising!
I will go deep into it in these upcoming holliday-days

A whole lot of different kind of thanks!

[Poontang]

Another Q to this brilliant PHP album:

It seems to load very slowly... Can I set it up to load thumps from a defferent folder?

[jscheuer1]

No, but you can put the larger images in a different folder. See the last line in either of my scripts from my last post.

[Poontang]

hmmmm.... I might need a little help here...
I'm still just a little, green guy trying this out

Can I get you to make a nice little package with the files needed to play around with?

[jscheuer1]

I'd rather just try to explain the situation. Here's how it works - The two lines I'm referring to are virtually identical:

}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}

The groupName isn't required unless you have other links on the page or other PHP galleries on the page that you want to use the same group name. If you want to use separate larger images, have the getalbumpics.php file in a folder with just the smaller thumbnails in it - say you have that setup as (from the PHP Photo Album script v2.11 demo page Step 1):

<script type="text/javascript" src="http://www.mysite.com/myimages/getalbumpics.php?id=myvacation"></script>

so mysite.com/myimages/ has only the thumbnails in it. Make another folder - say, mysite.com/mylargerimages/

In it put only the larger images. Give them each the exact same filename as the thumbnail they correspond to.

Then for the createHiddenLinks line use:

}).createHiddenLinks({path: 'http://www.mysite.com/mylargerimages/'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[Poontang]

I very well understand you - and I will learn that much more this way!
But i'm throwen way off by now. First; by installing the LB v2.04 I can't figure out how to merge it with the PHP album.
- and I actually can't find the lines you refer to, to change...

Feel free to have a look at www.poontang.dk (NO sexual content - tho the name might sugest it)
Also, the site is in danish, so:
At the top-banner (flash) choose "SJOVE BILLEDER".

NOTICE: I only play around in the "Computer"-section.... so look there ;o)

[Poontang]

No.... I can't get it to work - after trying everything all over today.

I think this is what confuses me:

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';
for(i; i < avil; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = base + avi[i][1];
lbLink.title = avi[i][2];
lbLink.tabindex = avi[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
lbLink = d.getElementsByTagName('a');
this.onphotoclick = function(ref, idx){
var i = lbLink.length -1;
for (i; i > -1; --i){
if(lbLink[i].tabindex == idx){
Lightbox.box.start(lbLink[i]);
break;
}
}
};
};

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"]
}).createHiddenLinks({groupName: 'catering'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>

MY WORKFILES

[jscheuer1]

Here's a fixed version:

Attachment 3715

Added this file:

closelabel.gif

Removed these files:

prototype.js
scriptaculous.js

Made changes to:

index.html - Switched to Google hosted scripts for prototype, scriptaculous, effects, and builder. Changed the on page call to the phpimagealbum() function.

ddphpalbum.js - removed:

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(cfg){
	cfg = cfg || {}; cfg.groupName = cfg.groupName || new Date().getTime();
	var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink,
	i = 0, av = this.albumvar, base = cfg.path || av.baseurl, avi = av.images, avil = avi.length;
	d.style.display = 'none'; tmpLink.rel = 'lightbox[' + cfg.groupName + ']';     
	for(i; i < avil; ++i){
		lbLink = tmpLink.cloneNode(false);
		lbLink.href = base + avi[i][1];
		lbLink.title = avi[i][2];
		lbLink.tabindex = avi[i][0];
		d.appendChild(lbLink);
	}
	document.body.insertBefore(d, document.body.firstChild);
	lbLink = d.getElementsByTagName('a');
	this.onphotoclick = function(ref, idx){
		var i = lbLink.length -1;
		for (i; i > -1; --i){
			if(lbLink[i].tabindex == idx){
				Lightbox.box.start(lbLink[i]);
				break;
			}
		}
	};
};

new phpimagealbum({
	albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
	dimensions: [3,3],
	sortby: ["file", "asc"] //["file" or "date", "asc" or "desc"]
}).createHiddenLinks({groupName: 'myvacation'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}
</script>

lightbox.js - Corrected paths to helper images:

LightboxOptions = Object.extend({
//
//  Configuration
//
    fileLoadingImage:        'loading.gif',     
    fileBottomNavCloseImage: 'closelabel.gif',
    cookieForFirstLight:     false,  // use session only cookie for first light?  (true/false)

    overlayOpacity: 0.8,   // controls transp . . .

But we still have no thumbnails. We are using the larger images as the thumbnails.

To fix that, you would make up a folder of the thumbnails - say:

poontang.dk/fun/animals/thumbnails

Make one thumbnail image for each of the larger images and put them in that folder. Give each the same name and date as the larger image it is for (PHP could be used to do this - either to make the thumbnails and date them, or just to date them, but I'm not sure of the details on that at the moment, other programs could be used for either, perhaps both. If you don't copy over the dates, your %d auto description will be off. You could use a different method for descriptions or no descriptions, or we could work out a way to carry the dates from the larger images folder via scripting at run time). Put your getalbumpics.php file in the thumbnail folder. Change this call on index.html as highlighted:

<script type="text/javascript" src="http://www.poontang.dk/fun/animals/thumbnails/getalbumpics.php?id=myvacation"></script>

Change this line (near the bottom of index.html) as highlighted:

}).createHiddenLinks({path: 'http://www.poontang.dk/fun/animals/', groupName: 'myvacation'}); //takes optional object as argument, ex: {groupName: 'catering', path: 'alternate_path_to_larger_images/'}