Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover show filename

    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/...ow/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...
    linceman
    canalcasting.net

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Try modifying this part of the code:
    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:
    Code:
    			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)
    				})
    			})

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Add href in you img tag

    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>

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [B]Hi
    Thank you all for the prompt reply:

    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

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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:

    Code:
     	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"; 
    				}

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    canalcas, pls ignore my previous suggestion and try this one.

    Change this function:

    Code:
    		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:

    Code:
    		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})
    		}

  • #9
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    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

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    No you can't. You need to use a custom tooltip script. There's a lot out there, just google it.

  • #11
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok great... thx very much
    canalcas


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •