How to: Create a fancy image gallery with JQuery

by Jean. 47 Comments -

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.

Comments (47) - Leave yours

  1. Edmonton SEO said:

    This is a really handy little script. Jquery is a good choice for something like this because it is a relatively small download. Have you seen dom tool tip? http://www.mojavelinux.com/projects/domtooltip/
    It’s similar and has a smaller download footprint, but if your site is already using JQuery, then this script here is perfect.

  2. Boyz II Men said:

    Wow this looks really awesome. I checked out the demos and it looks really neat. I’ve been using lightbox which allows on page load up when you click an image, but the previews functionality of this tool take the cake. Thanks for the step by step advice!

  3. Ruby said:

    Thanks for the great tutorial. I use jquery too, I get my code straight from their library. So this will add some great customization on my code.

  4. Catrin W said:

    Thanks for the tutorial. Post made in right time for me, as i was just looking for fancy gallery customization. Got it installed and working perfectly.

  5. vasilis said:

    Super, i love JQuery library and what you can do with it, this article is very helpful thank you ones more, i guess i have to bookmark your blog your doing excellent job!

    Kind Regards,
    Vasilis, UnitedWorx

  6. Ajith | Blog Money said:

    Thanks for the awesome tip and code. jquery has grown big over the years. Recently I incorporated the jquery date picker into one of my self developed wordpress plugins. The styles are awesome…

    Will try out this one

  7. Ruby said:

    That looks like Greek to me! Backend has never been quite my speciality, and things like this are best left to the professionals…..hahahaha, just kidding folks. We can all become experts eventually by heeding this and similar advise that is so generously served up by individuals like Jean-Baptiste!

  8. Jason Deery said:

    I like demo easy for me but one problem ajax pagination without refresh inside div. It will not work with image pop. Any luck with script? Thanks.

  9. diesof said:

    Very nice script – thank you.

    How can be changed the positioning in a way, that the preview will never be outside the browser window?

  10. tim dalton said:

    This is cool but I’m having a small issue. When using the preview class, the preview image (when you scroll over an image) is showing up behind the other images. Any idea what I’m doing wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!