How to: Create a fancy image gallery with JQuery

by Jean.

Javascript is a very good way to create fancy contents and enhance your website functionnality. In this article, let’s have a look to some interesting script dedicated to create stunning tooltips and galleries with the help of Javascript.

Demos:

  1. Simple tooltip
  2. Image tooltip with preview
  3. Link tooltip with preview

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>

This article is a translation from the French blog WebInventif.

CWC Special Deal!

Get one year of quality hosting + domain from A Small Orange for only $40 with our exclusive deal!

Featured WordPress Theme

Caliber - Responsive WordPress Theme