View Full Version : How to display description on large image in PHP photo album?

11-16-2011, 09:51 AM
1) Script Title: PHP Photo Album script v2.11

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

3) Describe problem: I had successfully installed the gallery with thumnail option. Now I need the image description to be appear only when the thumbnail is clicked. i.e I need to display the image description on the large image.

Is it possible? Please help me.

Thanks for help in advance.

11-16-2011, 07:19 PM
You can't really use the internal viewer to display descriptions.

In this thread:


We eventually got to just what I think you say you want - no descriptions under the thumbnails and onclick of the thumbnails you have descriptions as captions for an enlarged image. As of this typing, the demo of it is still up. To see it click on the link from the first post in that thread "Here is my URL :". The Photo Album is near the bottom under a heading image which reads "About the Show".

It uses (with some modification) SlimBox v2.04 in place of the native lightbox function of PHP Photo Album. I have since worked out (using the same scripts) a more efficient way of doing it. If I could have a link to your page, and there's nothing about it that precludes this approach, I could walk you through it for your particular installation:

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

11-17-2011, 04:02 AM
Hi John,

Thank You so much. Can you please help me to integrate my code to display the description as we seen in flippish.com/live-stream-test/

Here is my web-page: http://www.cchunter.mockupwebsite.com/projects.html


Head Section

<script type="text/javascript" src="http://www.mockupwebsite.com/cchunter/gallery/thumb/getalbumpics.php?id=mygallery"></script>
<script type="text/javascript">
//Optional, manual description for particular pictures inside album
//Syntax: albumid.desc[index]="Picture description here"
//mygallery.desc[1]="Picture 1"
//eg: myvacation.desc[6]="This is description for the 7th picture in the album"

<script type="text/javascript" src="ddphpalbum.js">

<link rel="stylesheet" type="text/css" href="ddphpalbum.css" />

Gallery code:

<script type="text/javascript">

new phpimagealbum({
albumvar: mygallery,
dimensions: [4,2],
sortby: ["date", "desc"],
autodesc: "",
showsourceorder: false,
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage("http://www.mockupwebsite.com/cchunter/gallery/large/" + thumbfilename, 800, 600)


11-17-2011, 04:55 AM
Your link "Here is my web-page:" requires a username and password. If there's a guest account or some account's username and password you wouldn't mind posting in a public message here, please do so.

If not, post 3 replies here. Then you should qualify for the forum's Private Messaging system (requires 5 posts, you have only 2 so far), and you can PM me a username and password.

I need to access the page in order to be sure this will work with it.

Failing all that, I could walk you through it in a general way, but it might take awhile to get it right, and there would be no way for me to know for sure whether or not it can actually work for your page.

11-17-2011, 05:34 AM
Hi John,

I am sorry. I forget about the password protection.

Here is the username and password:

Username: guest
Password: guest111

11-17-2011, 12:59 PM
Hi John,

I had installed that gallery. Its works fine. Thank you so much.

Now how will I add pagination in this gallery?? Can you please help me?

11-17-2011, 05:29 PM
Which gallery? Slimbox? I see you have that on the page you linked to in your post. It doesn't appear to be working there, the larger images are 404 Not Found. Could be an upper and lower case problem. Upper and lower case almost always matter on the web in paths and filenames, usually not on the local machine.

Slimbox doesn't do pagination. And I've been working on things as promised. In doing so I discovered that the larger images are larger than fits on most screens and that the native lightbox of PHP Photo was scaling them down to fit. Slimbox cannot do that. So I moved on to Fancybox:


I didn't like the default Fancybox box, so I made one that seems to suit your needs and integrates with PHP Photo. You need PHP Photo to get that image retrieval thing and to setup pagination. If you don't like the order of the images in PHP Photo, they can be sorted differently than what's currently available in the script. Let me know if that's a problem.

Fortunately you haven't moved any of the PHP Photo files (scripts, css, images), so I've been able to continue working on it.

I'd be happy to explain how to set it up. There are a lot of steps though. So if things don't work as expected, give me a link to the live page so I can see what's gone wrong. It is working here. Might be a good idea to setup a test page on the server in the same folder as the projects page.

First grab the jquery.fancybox-1.3.4.zip from the http://fancybox.net/ site.

You can set it up right out of the .zip to run its example page. But for what we're going to do you only need it's fancybox folder. Copy that folder (the whole folder, not just its contents) to the same folder as your page.

Then in the head of the page (the page that was projects.html), make it like:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.cchunter.mockupwebsite.com/projects.html" />
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.mockupwebsite.com/cchunter/gallery/thumb/getalbumpics.php?id=mygallery"></script>

<script type="text/javascript">
//'imagename.jpg': "Picture slimbox caption here",
mygallery.cap = {
'cchunter01.jpg': "This is the caption for cchunter01.jpg His busy girls woefully add to their exacting universalists. That demanding student abusively affords little for that cultivated tetrahedron. A compelling tautology unsatisfactorily admits an exasperating in law.",
'cchunter02.jpg': "This is the caption for cchunter02.jpg",
'cchunter03.jpg': "This is the caption for cchunter03.jpg",
'cchunter04.jpg': "This is the caption for cchunter04.jpg",
'cchunter05.jpg': "This is the caption for cchunter05.jpg",
'cchunter06.jpg': "This is the caption for cchunter06.jpg",
'cchunter07.jpg': "This is the caption for cchunter07.jpg",
'cchunter08.jpg': "This is the caption for cchunter08.jpg",
'cchunter09.jpg': "This is the caption for cchunter09.jpg",
'cchunter10.jpg': "This is the caption for cchunter10.jpg",
'cchunter11.jpg': "This is the caption for cchunter11.jpg",
'cchunter12.jpg': "This is the caption for cchunter12.jpg",
'cchunter13.jpg': "This is the caption for cchunter13.jpg",
'cchunter14.jpg': "This is the caption for cchunter14.jpg",
'cchunter15.jpg': "This is the caption for cchunter15.jpg",
'cchunter16.jpg': "This is the caption for cchunter16.jpg" //<-- Important - no comma after the last entry
mygallery.largerfolder = 'http://www.mockupwebsite.com/cchunter/gallery/large/'; // Path to larger images.
jQuery('.albumnavlinks a').live('click', function(e){
<script type="text/javascript" src="ddphpalbum.js">
// PHP Photo Album script v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
// This notice MUST stay intact for legal use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

<link rel="stylesheet" type="text/css" href="ddphpalbum.css" />


Make sure to include the highlighted credit as shown for the Photo Album script. It's required by Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm).

Also highlighted is the mygallery.cap object. It is here that you configure the captions for the larger images, mygallery is the same albumvar from the new phpimagealbum declaration. Notice the red line. that's where you put the path to the larger images. I've already got it setup for what the page was when you first linked me to it. If you use a different folder, that can be edited. It's also based on the same albumvar. The green lines right below it are to prevent some browsers from doing unexpected things when the pagination links are clicked. It need not be changed.

In the body where you had the new phpimagealbum script, make it like so:

<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(){
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar,
$ = jQuery; d.style.display = 'none'; tmpLink.rel = 'lightbox_' + new Date().getTime(); av.hiddenLinksAr = [];
for(i = 0; i < av.images.length; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = (av.largerfolder || av.baseurl) + av.images[i][1];
lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0, av.images[i][1].lastIndexOf('.'));
av.hiddenLinksAr[av.images[i][0]] = jQuery(lbLink);
document.body.insertBefore(d, document.body.firstChild);
'titlePosition': 'inside',
'cyclic': true, // looping from first larger image to last
'margin': 100,
'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
var newclose = $('#fancybox-close').css({visibility: 'hidden'}).clone(true);
return $('<span id="fancybox-title-inside" style="display: block; text-align: left; position: relative;">' +
'<span style="display: block; margin-right: 40px;">Image ' + (currentIndex + 1) + ' / ' + currentArray.length +
(title.length? ' &nbsp; - &nbsp; ' + title : '') + '<\/span><\/span>').prepend(newclose.css({visibility: 'visible',
right: 0, top: '50%', marginTop: -15}).fadeIn('slow', function(){this.style.display = 'block';
$('#fancybox-left, #fancybox-right').css({visibility: 'visible', height : $('#fancybox-content').innerHeight()});
$('#fancybox-content img').attr('title', '');})
.attr('title', 'Close'));

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


Almost done. In the fancybox folder the jquery.fancybox-1.3.4.css file needs to be edited in three places (starting around line #133). Using a text only editor like NotePad, add/change the highlighted as shown:

#fancybox-left, #fancybox-right {
position: absolute;
top: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: none;
visibility: hidden;

#fancybox-left {
left: 0px;

#fancybox-right {
right: 0px;

#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
/* margin-top: -15px; */
cursor: pointer;
z-index: 1102;
display: block;

11-18-2011, 06:37 AM
That works fine John. I had installed "fancybox". Thank You so much to find some time to solve all my problems.

Here is my new link: http://www.cchunter.mockupwebsite.com/test/projects.html

Username: guest
Password: guest111

I had changed the sorting order by file, asc.

I like the "Slimbox" also which I had installed in http://www.cchunter.mockupwebsite.com/projects.html

Only problem with it is, i can't setup pagination.

Anyway I am happy with fancybox. Its pretty good.

Once again thank you so much John. :)

01-31-2012, 12:53 PM

I wants a small customization in fancybox. This is for my new website.
Site link: http://www.reddotcuisine.com/gallery.html

Everything works fine except the large image.

My thumbnail and large image name are same. But thumbnail is in .png and large image is in .jpg format.
Can we do that? Or should I change whole large files to .jpg??

01-31-2012, 01:19 PM
Change this line:

lbLink.href = (av.largerfolder || av.baseurl) + av.images[i][1];


lbLink.href = (av.largerfolder || av.baseurl) + (av.images[i][1].replace(/\.png/, '.jpg'));

But the images have to be there. And you have a problem there because some of the larger images are .jpg and some of them are .JPG. they all must be .jpg for this to work.

02-01-2012, 07:11 AM
Thank You John. I had changed the code you given and file extensions. Changed .JPG to .jpg

It simply works. Hats off genius :)