How to: Create a fancy image gallery with JQuery

by Jean. 48 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.

  • http://www.whitespark.ca Edmonton SEO

    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.

  • http://www.rnbhaven.com/90s-music/artists/Boyz-II-Men/10 Boyz II Men

    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!

  • http://bradblogging.com Brad Blogging.com – Personal Blog Tips And Blog Help

    I really like the image tooltip with captions.. Could think of some ways to use that :)

  • http://www.blogbymotti.com motti

    Here is a silly question, would that work on WordPress blogs? (from all I know it was made especially for blogs :-)

    Thank you,
    Motti

  • http://www.tlmarketing.net Tom – Home Business Tips

    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!

  • http://www.internetmarketingcentral.info Valentino

    Really good article! Thanks a lot

  • mvarela

    good tutorial!!!

    thx!

  • http://www.enduringwanderlust.com Gennaro

    Thanks for the tip. I’m happy with my current gallery though, so no switching at the moment.

  • Pingback: You are now listed on FAQPAL

  • http://www.netage.co.za Ruby

    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.

  • http://otooo.com Best Deals Online

    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

  • http://www.taxsoftwaresite.com Tim Whiteman

    Wow! thanks for the simple and quick tutorial. It would be very easy to follow.

  • http://www.haushalt-wohnen.de Haushalt

    I like JQuery very much and it was so well explained too. It’s very useful. Thanks

  • http://www.peiprofit.com Make Money Online

    Thanks for this tutorial! Really helped alot..

  • http://ezinearticles.com/?Remove-Antivirus2009---Learn-How-to-Remove-Antivirus2009-in-One-Quick-Step&id=1730157 remove antivirus2009

    I was not familiar with JQuery but it seems like a cool application. I will give it a try.

  • http://www.netage.co.za Ruby

    Great code man, much appreciated. Thanks for sharing ;-)

  • http://www.0window.com/blog/ Catrin W

    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.

  • http://blog.insicdesigns.com insic

    nice work! I love the result.

  • http://www.unitedworx.com vasilis

    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

  • http://www.DollarShower.com/ Ajith | Blog Money

    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

  • http://www.welivethis.com Listen To Hip Hop Music

    Wow these look great. I really like the link tooltip with preview!

  • http://www.brettdugan.com Brett Dugan

    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.

  • http://www.netage.co.za/development/ Ruby

    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!

  • http://www.datalab.pl Odzyskiwanie Danych

    Nice find Jean. It looks amazing and I’ll definitely give it a try, seems simple enough.

  • http://www.sheltie-forum.de Chris

    I didn’t know JQuery before. It seems to be a good program. Your tutorial is well explained too.

  • http://design.maxima.name Создание сайтов

    I have used this plugin for a project, but had broken his head slightly to get the image displayed on the left cursor hand.

  • http://increase-site-traffic.webmarketingmachine.com/ increase site traffic

    Excellent script. And excellent step by step tutorial on how to use the script.

  • http://www.smasra.com Money Academy

    great coding and nice effort but the DEMO links work or i have a problem ?

  • http://www.quizzpot.com Hazel Q.

    Great article and well explained tutorial :) I really liked the demo.

  • http://www.itop10.com top 10

    Excellent explanation with a nice demo.

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins | Vandelay Design Blog

  • Pingback: 25 Tutoriais e Plugins jQuery para Sliders e Galerias de Imagens | Webgrafismo

  • Pingback: Jquery ile Resim Galerisi Olu

  • Pingback: 25个 jQuery 图像画廊教程和插件 « SonicHTML – 高品质XHTML+CSS服务

  • Pingback: Jquery ile Resim Galerisi OluÅŸturma « Bay Bedava – Netten BaÅŸlıklar

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins « Web And Graphics Design Tutorials

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins | X Design Blog

  • Jason Deery

    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.

  • Pingback: 25 jQuery Image Gallery/Slider Tutorials and Plugins | OnColorz Technology News - New Technology, Internet News, Software, Telecom, Computer Science

  • Pingback: AWESOME jQuery image galleries | Ajax CSS and WEB2.0 Resource Directory. Ajax Effects, Components Drag Drop, CSS Gallery, AJAX CSS PHP Tutorial AjaxCSS.com

  • http://www.cmsblog.eu Andrei

    Very intersting information. I think that I can use this on my site . Thanks !!!

  • Pingback: 25个jQuery图片效果插件 | 我爱WEB – 专注于WEB开发与前端技术

  • Pingback: 25 Very Detailed jQuery Image and Content Slider Tutorials |

  • codar

    Trying to implement this and having ‘syntax’ issues.

    The image preview is not being show… cannot figure out why.

  • Yanick Desjardins

    I have the same problem i see the smale image and when the mouse is over i only see the text.

  • diesof

    Very nice script – thank you.

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

  • tim dalton

    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?

  • cici

    the demo link is not working