By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,604 Members | 858 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,604 IT Pros & Developers. It's quick & easy.

display larger image on hover and stay inside viewport

Mike Kypriotis
P: 37
So i found this script which does exactly what i want http://cssglobe.com/lab/tooltip/02/ (downloaded from its homepage at http://cssglobe.com/easiest-tooltip-...-using-jquery/) only problem is that the bigger image is not entirely shown in browser (aka viewport as i found here) if image too big or thumbnail near browser edges. After some search I modified it but still at hover it sometimes show outside viewport and then after mousemove the larger img get reposition correctly, original js
Expand|Select|Wrap|Line Numbers
  1. this.imagePreview = function(){ 
  2.         xOffset = 10;
  3.         yOffset = 30;
  4.         $("a.preview").hover(function(e){
  5.         this.t = this.title;
  6.         this.title = "";    
  7.         var c = (this.t != "") ? "<br/>" + this.t : "";
  8.         $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
  9.         $("#preview")
  10.             .css("top",(e.pageY - xOffset) + "px")
  11.             .css("left",(e.pageX + yOffset) + "px")
  12.             .fadeIn("fast");                        
  13.     },
  14.     function(){
  15.         this.title = this.t;    
  16.         $("#preview").remove();
  17.     }); 
  18.     $("a.preview").mousemove(function(e){
  19.         $("#preview")
  20.             .css("top",(e.pageY - xOffset) + "px")
  21.             .css("left",(e.pageX + yOffset) + "px");
  22.     });         
  23. };
  24.  
  25. // starting the script on page load
  26. $(document).ready(function(){
  27.     imagePreview();
  28. });
  29.  
and I changed the hover and mousemove to make this version
Expand|Select|Wrap|Line Numbers
  1. this.imagePreview = function(){ 
  2.         xOffset = 10;
  3.         yOffset = 20;
  4.         // these 2 variable determine popup's distance from the cursor
  5.         // you might want to adjust to get the right result
  6.     $(".preview").hover(function(kmouse){
  7.         this.t = this.title;
  8.         this.title = "";
  9.         src=this.src;   
  10.         if($(this).data("imgmode")=='1') 
  11.         {
  12.             src=src.replace("/thumbs",""); 
  13.         }
  14.         var c = (this.t != "") ? "<br/>" + this.t : "";
  15.         $("body").append("<p id='preview'><img src='"+ src +"' alt='Image preview' />"+ c +"</p>");                              
  16.  
  17.     },
  18.     function(){
  19.         this.title = this.t;    
  20.         $("#preview").remove();
  21.     }); 
  22.     $(".preview"). mousemove(function(kmouse){ 
  23.     var border_top = $(window).scrollTop(); 
  24.     var border_right = $(window).width(); 
  25.     var left_pos; var top_pos; var offset = 15; 
  26.     if(border_right - (offset *2) >= $("#preview").width() + kmouse.pageX){ left_pos = kmouse.pageX+offset; } else{ left_pos = border_right-$("#preview").width()-offset; } if(border_top + (offset *2)>= kmouse.pageY - $("#preview").height()){ top_pos = border_top +offset; } else{ top_pos = kmouse.pageY-$("#preview").height()-offset; } $("#preview").css({left:left_pos, top:top_pos}).fadeIn("fast");
  27.     }); 
  28.  
  29. };
  30. $(document).ready(function(){
  31.     imagePreview();
  32. });
  33.  
as you can see did some other minor changes like adjusting it for all elements with class preview not only a and also added a custom HTML5 tag data-imgmode which though plays no role in this problem just to meet my site demands.
Any ideas?
Aug 18 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.