How to: Create a fancy image gallery with JQuery

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:

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.

No related posts.

31 Comments

Edmonton SEO
Posted January 31, 2009 at 7:08 pm | Permalink
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.
Reply
Boyz II Men
Posted February 1, 2009 at 3:44 pm | Permalink
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!
Reply
Brad Blogging.com - Personal Blog Tips And Blog Help
Posted February 1, 2009 at 4:10 pm | Permalink
I really like the image tooltip with captions.. Could think of some ways to use that
Reply
motti
Posted February 2, 2009 at 6:10 am | Permalink
Here is a silly question, would that work on Wordpress blogs? (from all I know it was made especially for blogs
Thank you,
Motti
Reply
Tom - Home Business Tips
Posted February 2, 2009 at 3:48 pm | Permalink
Adding images to blog posts is an easy way to make the blog look better and also keep people longer at your site.Thanks for the how-to tutorial!
Reply
Valentino
Posted February 2, 2009 at 4:35 pm | Permalink
Really good article! Thanks a lot
Reply
mvarela
Posted February 2, 2009 at 5:04 pm | Permalink
good tutorial!!!
thx!
Reply
Gennaro
Posted February 2, 2009 at 7:04 pm | Permalink
Thanks for the tip. I’m happy with my current gallery though, so no switching at the moment.
Reply
Ruby
Posted February 4, 2009 at 10:44 am | Permalink
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.
Reply
Best Deals Online
Posted February 4, 2009 at 3:20 pm | Permalink
Sweet – I’m not sure what use it would be of on my current blog, but if I ever make a personal blog that’s what I will use
Reply
Tim Whiteman
Posted February 4, 2009 at 3:30 pm | Permalink
Wow! thanks for the simple and quick tutorial. It would be very easy to follow.
Reply
Haushalt
Posted February 5, 2009 at 12:03 am | Permalink
I like JQuery very much and it was so well explained too. It’s very useful. Thanks
Reply
Make Money Online
Posted February 5, 2009 at 8:23 pm | Permalink
Thanks for this tutorial! Really helped alot..
Reply
remove antivirus2009
Posted February 6, 2009 at 3:55 am | Permalink
I was not familiar with JQuery but it seems like a cool application. I will give it a try.
Reply
Ruby
Posted February 6, 2009 at 10:51 am | Permalink
Great code man, much appreciated. Thanks for sharing
Reply
Catrin W
Posted February 8, 2009 at 2:46 pm | Permalink
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.
Reply
insic
Posted February 9, 2009 at 9:26 am | Permalink
nice work! I love the result.
Reply
vasilis
Posted February 9, 2009 at 11:13 am | Permalink
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
Reply
Ajith | Blog Money
Posted February 12, 2009 at 1:13 pm | Permalink
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
Reply
Listen To Hip Hop Music
Posted February 17, 2009 at 12:28 am | Permalink
Wow these look great. I really like the link tooltip with preview!
Reply
Brett Dugan
Posted February 18, 2009 at 8:32 am | Permalink
I absolutely love jquery. It is amazingly easy to implement, even for someone with basic coding knowledge. It has become a life saver for sure.
Reply
Ruby
Posted February 19, 2009 at 4:50 pm | Permalink
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!
Reply
Odzyskiwanie Danych
Posted March 2, 2009 at 11:40 am | Permalink
Nice find Jean. It looks amazing and I’ll definitely give it a try, seems simple enough.
Reply
Chris
Posted March 2, 2009 at 9:15 pm | Permalink
I didn’t know JQuery before. It seems to be a good program. Your tutorial is well explained too.
Reply
Ð¡Ð¾Ð·Ð´Ð°Ð½Ð¸Ðµ ÑÐ°Ð¹Ñ‚Ð¾Ð²
Posted March 4, 2009 at 10:30 am | Permalink
I have used this plugin for a project, but had broken his head slightly to get the image displayed on the left cursor hand.
Reply
increase site traffic
Posted March 8, 2009 at 12:40 am | Permalink
Excellent script. And excellent step by step tutorial on how to use the script.
Reply
Money Academy
Posted March 8, 2009 at 3:43 am | Permalink
great coding and nice effort but the DEMO links work or i have a problem ?
Reply
Hazel Q.
Posted March 18, 2009 at 8:37 pm | Permalink
Great article and well explained tutorial I really liked the demo.
Reply
top 10
Posted March 23, 2009 at 10:15 pm | Permalink
Excellent explanation with a nice demo.
Reply
Jason Deery
Posted December 3, 2009 at 1:29 am | Permalink
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.
Reply
Andrei
Posted January 27, 2010 at 12:35 am | Permalink
Very intersting information. I think that I can use this on my site . Thanks !!!
Reply