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
and I changed the hover and mousemove to make this version
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?
Code:
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
Code:
this.imagePreview = function(){
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
$(".preview").hover(function(kmouse){
this.t = this.title;
this.title = "";
src=this.src;
if($(this).data("imgmode")=='1')
{
src=src.replace("/thumbs","");
}
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ src +"' alt='Image preview' />"+ c +"</p>");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$(".preview"). mousemove(function(kmouse){
var border_top = $(window).scrollTop();
var border_right = $(window).width();
var left_pos; var top_pos; var offset = 15;
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");
});
};
$(document).ready(function(){
imagePreview();
});
Any ideas?