Hello everybody, it has been a long time since my last post. Here I go again today because I’ve found a great jQuery tooltip script at cssglobe.com and made a change to have it detect the edge of the browser and change the position of the tooltip (large image in this case).
First of all, I want to thank Alen Grekalic for the plugin and also Nando Fernández, from disenando.com for helping me to understand how to get it done.
Please check here for the original post from cssglobe.com.
The code for the plugin is this:
<code>
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 30;
yOffset = 10;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("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 - yOffset) + "px")
.css("left",(e.pageX + xOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - yOffset) + "px")
.css("left",(e.pageX + xOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</code>
The way I’m using this plugin is to show a photo gallery in a similar way iStockphoto.com does. There’s a bunch of thumbnails and when you roll over any of them, you will get a larger version of this image. If you keep moving the pointer of the mouse on top of the thumbnail, the image will move along. Now, if we are close to the edge of our browser window, in order to avoid the image to go “outside” the browser, we need to add some conditions before we tell the script how to display the enlarged image . We basically want to detect when the image is opening off the screen. What we are going to do is to detect if the thumbnail is close to the edge of our browser window.
<code>
if(e.pageX + xOffset > $(document).width()){
}
</code>
where e.pageX is the position of the thumbnail and xOffset is how far from it the image will open.
Then, inside the condition we request to get the position of the enlarged image either to the left or right, depending how close we are from the edge and how big our image will be. So if your enlarged image is supposed to be 500 pixels wide, then the IF should read something like:
<code>
if(e.pageX + 500 + xOffset > $(document).width()){
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400)) + “px”)
.fadeIn(“fast”);
} else {
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”)
.fadeIn(“fast”);
}
</code>
Please note the “-xOffset-400″ I’ve added to the code. You might need to play with those values in order to get the image in the place you want it to be. Also, remember that we will need to add the similar changes to the “mousemove” event in order to get the same effect when we move the mouse over the images.
Please take a look at the final script:
<code>
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 30;
yOffset = 10;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(“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>”);
if(e.pageX + 500 + xOffset > $(document).width()){
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400)) + “px”)
.fadeIn(“fast”);
} else {
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”)
.fadeIn(“fast”);
}
},
function(){
this.title = this.t;
$(“#preview”).remove();
});
$(“a.preview”).mousemove(function(e){
if(e.pageX + 500 + xOffset > $(document).width()){
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + (-xOffset-400)) + “px”);
}else{
$(“#preview”)
.css(“top”,(e.pageY – yOffset) + “px”)
.css(“left”,(e.pageX + xOffset) + “px”);
}
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</code>
You may need to repeat these steps if your images are going off window in the lower edge.
I hope this helps someone and again, thank you to the owner of this script, mister Alen Grekalic and also Nando Fernández for pointing this out.