Why jQuery?
jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to
understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.
Demos:
Installation
Step 1
First, you have to include the JQuery library between the <head> and </head> tags of your html page:
<script type="text/javascript" src="jquery-latest.pack.js"></script>
Step 2
Once you inclued JQuery to your html file, you have to include the following functions. To do so, embed it within <script type=”text/javascript”> //the code here </script>, or even better, put it in a separate .js file.
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url
preview' />
"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 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 != "") ? "
" + 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");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Step 3
Once you inclued the gallery functions, you have to activate it. Like for the functions, you can embed it on your html page or put it in a separate .js file.
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
Step 4
The gallery is now fully functionnal. Though, we had to use some css to style it.
Paste the following code in your css file:
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
Step 5
Your gallery is now ready to use. Here’s 3 ways to use it:
To create a classic, but cool tooltip on a link, you have to give the html element a tooltip class, as well as a title:
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for
tooltip</a>
To create an very fancy image preview, you have to add the preview class to your html element:
<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>
To create an image preview with a link to the full size image, you have to add the screenshot class to your html element, and a rel attribute, containing the full size image url as a value:
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg"
title="Web Standards
Magazine"> Css Globe</a>
(+2)
