PDA

View Full Version : PHP Photo Album script v2.11 & Lightbox V2.03a



aborg
11-20-2009, 08:25 AM
1) Script Title: PHP Photo Album script v2.11 & Lightbox V2.03

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

3) Describe problem:

Any way to get these to 2 to work together? Lightbox 2.03a to replace the build in lightbox?

Only newer case off this I have found in my searching is here : http://www.dynamicdrive.com/forums/showthread.php?t=10509

And even that is over a year old.

From what I can read out of that one, and others that are older, the scripts has had major upgrades/rewrites done since then.

The PHP Photo Album is nice, but it need a better viewer :) So hope someone have a way to get those to working together now.

jscheuer1
11-20-2009, 03:59 PM
I'd suggest upgrading to Lightbox v2.04a:

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

which was introduced here:

http://www.dynamicdrive.com/forums/showthread.php?p=163470#post163470

The first step of course would be to install both scripts and their styles in the head of your page as instructed for each, making sure that all of the resource files for each script are also present where they need to be, also as instructed for each script.

You can launch a Lightbox 2.04a lightbox using pure javascript, ex (paste this into the browser's address bar when viewing the demo page for Lightbox 2.04a):


javascript:void(Lightbox.box.start(document.links[5]))

Which will launch the lightbox associated with the 6th link on the page. The:


javascript:void()

part is only required for javascript codes pasted into the address bar, so it's simpler:


Lightbox.box.start(reference to a lightbox link or an object resembling one)

Now the album script allows for onclick behavior to be configured in the initialization (from "Utilizing the onphotoclick event handler and built in Lightbox"):



new phpimagealbum({
albumvar: myvacation, //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: true, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage(thumbfilename, "fit2screen")
}
})

That's for the built in Lightbox handler. For a simple 2.04a lightbox we could use the "reference to a lightbox link or an object resembling one" option mentioned above:


new phpimagealbum({
albumvar: myvacation, //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: true, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
Lightbox.box.start({tagName: 'A', href: thumbref.src, rel: 'lightbox', getAttribute: function(at){return this[at]}});
}
})

However, if you want to utilize the next/pev grouping feature, a different approach will need to be taken. We would have to actually either code or generate code for the image set as lightbox links that could be referenced.

This should be done as the page is loading, just before the initialization.

Let's say your albumvar is myvacation as in the examples above. That means that there is an array of indexes, images, and filedates called myvacation.images - putting all of this information together would look like so (in place of the normal initialization for PHP Photo Album):


<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');
})('myvacation');

new phpimagealbum({
albumvar: myvacation, //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(myvacation.hiddenLinks[thumbindex]);
}
})
</script>

If you have custom descriptions defined, they will be assigned as the title/caption for the generated links.

Let me know if you have any questions or problems, I know this is a lot to take in at once. And, this code has only been partially tested, so even if you've done everything as indicated, there may be one or two issues to be resolved. Also, tweaks (for example for additional features) can be setup if required. If any of that happens, I will need a live link to your page for diagnosis purposes.

aborg
11-20-2009, 06:26 PM
Great, that edit did it :)

I only changed :

for(var i = 0; i < arObj.images.length; ++i){

to

for(var i = 0; i < arObj.images.length-1; ++i){

As we starts at 0. It even goes over more then 1 page with the prev & next buttons.

This was simple, I have been going mad the last day trying diffrent, 'version' of lighbox.

And if u sort after date & asc, they come out in the same order. And as I have moded the getalbumpics.php to return file name, not date, I get the caption I need.

Thx!! Just what I was after :) (the next/prev option)

jscheuer1
11-20-2009, 06:35 PM
You shouldn't need that -1, except perhaps that the array originally generated by 'getpics', has a dummy entry at the end, which the script removes later. So this (the -1 bit) is actually probably required to avoid an error. In a normal array however, < ar.length is sufficient.

Good catch!

I think I will add it to the code from my last post to avoid confusion for others.

aborg
11-20-2009, 06:38 PM
Yeah it tried to show a picture more than I have, and got stuck at the loading icon.

aborg
11-25-2009, 12:31 PM
Have run into a problem with this, as I mostly uses firefox it was never tried in IE after I got it all to work.

And in IE it get stuck after the background fades. Damn IE :p

The site we use it on is : www.brodreneborgen.hl.no/bilder.html

And cant find out why, but is looking at the creation of the Lightbox links as the probably cause of it....

jscheuer1
11-25-2009, 05:42 PM
OK, two problems. First, in our little added script fragment:


(function(groupName){
var d = document.createElement('div'), tmpLink = document.createElement('a'),
lbLink, arObj = window[groupName];
arObj.hiddenLinks = d.getElementsByTagName('a');
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){
lbLink.title = arObj.images[i][2];
//}
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
})('bilder');


Although, according to standards established for this method, it should create a live reference to the node list of a tags in the created divison that will always be current no matter what we do to it, in IE it apparently does not. There could be various reason for this. My bet is that the div is not attached to the DOM yet, but it could also be a failure to update, or something else. In any case, this can be fixed for IE and not adversely affect others by doing it after the links are there and after it is a part of the DOM:


(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){
lbLink.title = arObj.images[i][2];
//}
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
arObj.hiddenLinks = d.getElementsByTagName('a');
})('bilder');

That will fix it for IE 8. But for IE 7, and presumably less, there is an additional problem. Though I cannot see its PHP source code, I'm betting that you've altered this line (or in some other way altered something) in the getalbumpics.php file:


echo " [$curimage, \"$file\", \"$filedate\"],\n";

to somehow replace the file date reference with one to the name of the file minus its extension. But this is the date field! And you've chosen to sort your images by date:


new phpimagealbum({
albumvar: bilder, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,3],
sortby: ["date", "asc"], //["file" or "date", "asc" or "desc"]
autodesc: "%d", //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(bilder.hiddenLinks[thumbindex])
}
})


The function for this in ddphpalbum.js expects a number. All other browsers seem content to make some kind of accommodation to the fact that this isn't a number, but IE 7 does not. As a result it doesn't even display the thumbnails. You could just change the sort to "file":


sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]

And that will take care of that, but it will throw off the order of the link's index for next/previous. But even in those browsers that have no problem with that in the first place, they aren't sorting at all, just taking the order of the images as they were found in the folder in the first place. So, you may change it to:

sortby: ["none", "asc"], //["file" or "date", "asc" or "desc"]

But that still won't completely fix it because the ddphpalbum.js file will still attempt to sort by date unless you change this line in it:


else //sort by date (asc)

to:


else if (setting.sortby[0]=="date") //sort by date (asc)

aborg
11-25-2009, 08:00 PM
Yeah, I did use the date to return the filename from getalbumpics.php.

Changed that back, and moved that line from your first box up there ^^.

Then it worked on IE 8 :) Thanks alot!

And just did this to get back the file names as description :



<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');

})('bilder');

new phpimagealbum({
albumvar: bilder, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,3],
sortby: ["date", "asc"], //["file" or "date", "asc" or "desc"]
autodesc: "%d", //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(bilder.hiddenLinks[thumbindex])
}
})
</script>


As I see those working better than the hard coded description (those I have to change, the image name the uploder can control :) ) Until they upload a bmp or gif, hehe.

Also works in IE7, and IE6, even if the thumbs gets some what streached in IE6.

So once again, many thanks from me.

Docfunky
01-19-2010, 02:07 PM
Hi guys,
I have tried to put this code into my website, it is a futur "ebay"-like for art.

Well, when aa try to implement that code with the php/mysql languages, it doesnt work very well, the page become grey and a blank picture appears in the middle, but not the right picture i want to show.$I don't know if there is a compatibility between the mysql database of webhost comyr and this great javascript. I show you the code , i've just put thoses 4 lines into the header of the website, so there is no pb about that.


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


well here is my code, if someone can find a solution it would be just great ;)


<?php
require_once('include/session.class.php');
$session = new Session;
$session->Start();

$titre = "Exposition";
$style = "yohannExpo";
include('include/header.php');

$page = 3;
include('include/menu.php');

$expo_id = $_GET['eid'];
if (empty($expo_id))
{
header('Location: index.php');
}
$oeuvre_id = $_GET['p'];
if (empty($oeuvre_id))
{
$oeuvre_id = 0;
}


// Connexion a la base de donnees
include_once('include/mysql.class.php');
$mysql = new Mysql;
$mysql->Connect();
$mysql->Select_db();

// Recuperation des oeuvres de l'expo
$sql = "SELECT o.titre, o.description, o.user_id, u.name, i.image ".
"FROM oeuvre_expo e, oeuvre o, user u, image_oeuvre i ".
"WHERE e.exposition_id = $expo_id AND o.id = e.oeuvre_id AND u.id = o.user_id AND i.oeuvre_id = o.id AND i.image_principale = 1 ORDER BY o.id";
$requete = mysql_query($sql);
$oeuvres = array();
while ($fetch = mysql_fetch_array( $requete ))
{
$oeuvres[] = $fetch;
}
mysql_free_result( $requete );

$mysql->Close();

?>

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
<table>
<tr>
<td colspan="3">
<div id="expo_listeoeuvres">
<?php
$count = count($oeuvres);
for ($i=0; $i<$count; $i++) {
include_once('include/functions.php');
$size = resize("images/upload/oeuvres/".$oeuvres[$i]['image'], 100);
?>
<div <?php if ($oeuvre_id == $i) echo "class='actuel'";?>>
<a href="expo.php?eid=<?=$expo_id?>&p=<?=$i?>" rel="lightbox">
<img src="images/upload/oeuvres/<?=$oeuvres[$i]['image']?>" width="<?=$size[0]?>" height="<?=$size[1]?>" alt="2009-01-13-expo"/>
</a>
</div>
<?php
}
?>
</td>
</tr>
</table>

</body>


<?php
include('include/footer.php');
?>


Thanks to you guys ;p

here is the adress of the site (under construction, it may change several times during thoses days, just watch fo the exposition page (french website but you can turn it in english)

http://appdellarte.comyr.com/expo.php?eid=5

jscheuer1
01-19-2010, 03:43 PM
Right now your links (in the served source code) are like:


<a href="expo.php?eid=5&p=0" rel="lightbox">


One's even:


<a href="#" rel="lightbox">


expo.php?eid=5&p=0, or whatever is in the href there needs to be an image, it's not as far as I can tell.

ockadile
02-11-2010, 03:14 AM
John,

I came across this thread in the same situation as the person who started it. I'm wondering if it's possible to take this one step further?

Is it possible to have the script look in a directory and return a list of all the directories in that directory. When it does that return the first image in each of those secondary directories as the thumbnail image. Then when a person clicks on that thumbnail the script then executes a nice lightbox slide show as it currently does and cycles through that specific directories images.

What I'm after here is I have a client that in a main directory creates a new directory like "2008_Images" or "FoodFest_2009". In each of those are the photos for each event. If it's possible it would be nice to have those directories listed with their name on the bottom.

There would need to be the ability to exclude some files in a directory as the getalbumpics.php file would be listed and we'd need to exclude that along with maybe .htaccess files etc.

Here's the files structure:

/images
/2008_Images
photo.jpg
/2009_Images
/FoodFest_2009

I'd appreciate any ideas or implementation that you have if possible. A combination of all of this in a package where you could turn on and off some of these options would work wonders - you could use this in may different applications. Thanks!

jscheuer1
08-13-2010, 02:39 PM
I'm closing this thread as it's rather old. If folks have their own questions about any of the topics covered in this thread, please start a new thread.