I found an image preview script that I am using (see below). However, the image has a set offset of -20 (top) and 40 (right). This is okay unless you are near the right side of the window or near the bottom ... then the image is cut or you need to scroll.
I would like the offset to be variable based on where the name is. I thought of using mouse position and setup a simple if-else statement. What is strange, when the if-else is in my script, no images appear. If I take it out and set the offset, the image appears.
Here is the script. Any ideas how to make this work?
Credit to Ryan Boudreaux who wrote the original script used for image previews.
<script type="text/javascript" language="javascript">
// Kick off the jQuery with the document ready function on page load
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
if (e.pageX > 0){
yOffset = -100;
}
else {
yOffset = 40;
}
xOffset = -20;
$("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("slow");
},
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");
});
};
</script>