Need a mouseover code that dynamically shows the filename

[amocave]

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 would like to have the name of the file (picture) shown when I hover the cursor over the thumbnail.

I have over 1500 pictures distributed on about 20 pages. Each page has 7 columns and 3 rows of small (130x80px) thumbnails and the users cannot read the details (team name) inside the picture unless they click and open each one.

I am not willing to add manual descriptions as I keep adding pictures in the folders and the sorting would be troublesome. Moreover, I would have to create the over 1500 descriptions for the pictures I already have. I am hoping for a dynamic way of having each file name shown on mouse-over. Like that I will name each picture file with the team name I want shown. Like that all I need to do to maintain my site is to name the files nicely and upload them.

Thanks in advance to anyone who can spare a moment to help me out.

I am a real beginner. Clear instructions such as file name and location where modifications are to be made will help a lot.

4) Where is the code being used: http://www.aleliiga.com/_amoescudos/selecoes-africa.php

[c1lonewolf]

Suggestion: try useing a tooltip script. They're small but effective and can be stylized the any way you want.

[jscheuer1]

Using a text only editor like NotePad, in the ddphpalbum.js file, find this function, it's about in the middle of the file:


buildimage:function(albumvar, i, desc, showorder){
var desc=(desc && desc!="")? '<br />' + desc.replace(/(%i)|(%d)|(%s)/g, function(m){
return (m=="%i")? i+1 : (m=="%d")? albumvar.images[i][2] : ""
}) : ''
return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<img src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' + (albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')
},

Replace it with this one:


buildimage:function(albumvar, i, desc, showorder){
var desc=(desc && desc!="")? '<br />' + desc.replace(/(%i)|(%d)|(%s)/g, function(m){
return (m=="%i")? i+1 : (m=="%d")? albumvar.images[i][2] : ""
}) : ''
return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') +
'<img title="' + albumvar.images[i][1].replace(/\.(gif|png|jpg)/gi, '') +
'" src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' +
(albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')
},

But you might like this one even better (in addition to the tooltips, it adds the filename as the description below each image):


buildimage:function(albumvar, i, desc, showorder){
var desc=(desc && desc!="")? desc.replace(/(%i)|(%d)|(%s)/g, function(m){
return (m=="%i")? albumvar.images[i][1].replace(/\.(gif|png|jpg)/gi, '') : (m=="%d")? albumvar.images[i][2] : ""
}) : ''
desc = '<div style="color:white;font-size:smaller;width:130px;">' + desc.replace(/Photo /, '') + '</div>';
return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') +
'<img title="' + albumvar.images[i][1].replace(/\.(gif|png|jpg)/gi, '') +
'" src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' +
(albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')
},

[amocave]

Hi John (jscheuer1),

Thank you very much for the very clear explanation and very prompt reply.
I have easily found the piece of code and made the changes (2nd suggestion).

However, nothing changed on my pages. The tooltips do not appear and the file name continues to be 'Photo #'.

Any ideas why this would happen?

Your code is implemented currently on the file. I know have a domain name (www.futeboldebotao.com) in case you want to see the reaction - or no reaction:)

Cheers,
Andre

[amocave]

Hi John (jscheuer1),

I was just too fast and too eager. I cleaned my browser cache and now it works like a beauty.

Case closed. Thank you so much.

Best regards,
Andre