...

View Full Version : onmouseover show filename



canalcas
10-30-2010, 03:50 PM
Hi Everyone

I am using the Cut & Paste Full Screen Image Slideshow (w/ auto read images from directory)

from this page...

http://www.javascriptkit.com/script/script2/fpslideshow/index.shtml

And therefore I have on my site the Image Slideshow like this...

http://goo.gl/eRFD

Now I want to show the filename as you mouseover the thumbnails... that is if the file is called sofa.jpg, as you mouseover you would see sofa

If anyone could help me out of this one... it'd be great...

Thx very much in advance...:cool:
linceman
canalcasting.net

glenngv
10-31-2010, 02:45 AM
Try modifying this part of the code:

thumbs.each(function(i){
var $thumb=$(this)
this._index=i
$thumb.css({left: 60*i+20})
$thumb.click(function(){
clearTimeout(slideshow.setting.rotatetimer)
slideshow.changeimage(this._index)
})
})
to:

thumbs.each(function(i){
var $thumb=$(this)
this._index=i
var imagePath = $thumb.attr('src');
var dot = imagePath.lastIndexOf('.');
var slash = imagePath.lastIndexOf('/');
var filename = imagePath.substring(slash+1, dot);
$thumb.attr('title', filename);
$thumb.css({left: 60*i+20})
$thumb.click(function(){
clearTimeout(slideshow.setting.rotatetimer)
slideshow.changeimage(this._index)
})
})

phpdeveloper
10-31-2010, 07:02 AM
Firs o all using string function get only image name without file type
Like sofa.jpg to "sofa"

And then add href tag before your img tag like and add hreft title as a "sofa"

<a title="sofa" href="#"><img class="selected" src="http://www.alfaaudiovisual.com/picture_viewer/desada_mobiliario_loca/thumbnails/comedor3.jpg" style="width: 40px; height: 40px; opacity: 1;"></a>

Sciliano
10-31-2010, 11:56 AM
canalcas:


See,
http://www.dynamicdrive.com/forums/showthread.php?t=55785

canalcas
10-31-2010, 01:12 PM
Hi
Thank you all for the prompt reply:

[B]Glenn...
I have added your code, the page loads but the images and the thumbnails don't show... I copied it like you posted but it didn't work... Maybe I am missing something.... it looks good though...

php developer
At which img tag or which line exactly in fpslideshow.js should I place the code you suggested
<a title="sofa" href="#"><img class="selected" src="http://www.alfaaudiovisual.com/picture_viewer/desada_mobiliario_loca/thumbnails/comedor3.jpg" style="width: 40px; height: 40px; opacity: 1;"></a>

MJH
demo1 looks really really good but (correct me if I'm wrong)... I mouseover the thumbnails in the demo and it doesn't show the picture I am mousing over it just goes on to the next picture like automatically...

For my picture viewer it is very interesting to show the filename when you mouseover because the client can read what the picture is about and click and take a look at it if he is interested in that prop or object...

Thx very much all
canalcas
canalcasting.net (http://canalcasting.net)

Sciliano
10-31-2010, 01:26 PM
demo1 looks really really good but (correct me if I'm wrong)... I mouseover the thumbnails in the demo and it doesn't show the picture I am mousing over it just goes on to the next picture like automatically...

For my picture viewer it is very interesting to show the filename when you mouseover because the client can read what the picture is about and click and take a look at it if he is interested in that prop or object...



canalcas:

In the buildConveyor() function, insert the following two lines, as shown:


var nThumbnail = thumbnailContainer.getElementsByTagName('img');
for (i=0; i<nThumbnail.length; i++)
{
nThumbnail[i].title = nThumbnail[i].src.replace(/^.+\/([\w-]+\.*[\w-]*)$/,"$1");
nThumbnail[i].alt = nThumbnail[i].src.replace(/^.+\/([\w-]+\.*[\w-]*)$/,"$1");
if (IE)
{
nThumbnail[i].style.marginTop = "3px";
nThumbnail[i].style.marginBottom = "3px";
}
else {
nThumbnail[i].style.marginTop = "2px";
}

glenngv
11-01-2010, 10:18 AM
The regex will not work if there are multiple dots in the filename. Having multiple dots in the filename may be an edge case but this can possibly happen.

glenngv
11-01-2010, 10:35 AM
canalcas, pls ignore my previous suggestion and try this one.

Change this function:


function createthumbnail(i, imageref, thumbref){
var thumbimgsrc=(setting.imagesobj.baseurl)? setting.thumbdir+setting.imagesobj.images[i][1] : imageref.src
thumbref.html('<img src="'+thumbimgsrc+'" style="width:'+setting.thumbdimensions[0]+'px;height:'+setting.thumbdimensions[1]+'px" />')
thumbref.find('img:eq(0)').css({opacity:0.3})
}

to:


function createthumbnail(i, imageref, thumbref){
var thumbimgsrc=(setting.imagesobj.baseurl)? setting.thumbdir+setting.imagesobj.images[i][1] : imageref.src

var dot = thumbimgsrc.lastIndexOf('.');
var slash = thumbimgsrc.lastIndexOf('/');
var filename = thumbimgsrc.substring(slash+1, dot);

thumbref.html('<img src="'+thumbimgsrc+'" title="'+filename+'" style="width:'+setting.thumbdimensions[0]+'px;height:'+setting.thumbdimensions[1]+'px" />')

thumbref.find('img:eq(0)').css({opacity:0.3})
}

canalcas
11-01-2010, 11:31 AM
Yes Glengv

That's it... It works perfect...

Would it be possible to customize the "title"... Something like a could change the background of the title, the font, padding or its position on the page...

Thanks so very much...
canalcas

glenngv
11-02-2010, 08:31 AM
No you can't. You need to use a custom tooltip script. There's a lot out there, just google it.

canalcas
11-02-2010, 11:03 AM
Ok great... thx very much
canalcas



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum