/ best free open source web resources /

Graphic Resources

Galleria – Simple but Nice jQuery Image Gallery

Posted · Category: Gallery, GPL License

jQuery, jQuery, jQuery, jQuery again. There are lots of nice application written in jQuery. Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. The core of Galleria lies in it’s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.


Above is a demonstration shows you some more advanced effects you can accomplish with the Galleria plugin. The history object is also active that you can click the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.

Requirements: jQuery Framework
Demo: http://www.monc.se/galleria/demo/demo_01.htm
License: GPL 3.0 License

  • Edwin

    Nice :)

  • That looks unbelievably flash like.

  • ::drool:: going to try to talk my boss into working this into the publishing system

  • Nice one! i think i am going to use it.

  • Very nice gallery.
    I have bookmarked it.

  • Miguel

    This is freakin’ amazing! Very smooth transitioning, and could easily be mistaken for a flash gallery. I must have it.

  • This does work beautifully however I found the absolute positioning difficult to adapt to different layouts. If you’re a js and css savant it should be no problem though…

  • really jQuery is nice & gr8, we can do a lot with jQuery…

  • Ritesh

    Very nice code…thanks for sharing…
    How do I make the first image in the list to appear by default on page load…I only have the thumbnails loaded

  • YoYo

    Like this one lots… not able to modify width and overall height without breaking it… can you show an example that is 500px instead of the 700px that it is currently set to so that this can be studied? thanks

  • The plugin is amazing! But have problems in FireFox 3 :(

    The firefox enter in looping and dont work.

  • sree

    Got some error wen i implemented the galleria image gallery.
    errors are : jQuery is not defined in js file
    And jQuery is not defined in html file
    can anybody help me.

  • I really liked some stuff about Galleria, but at the same time I hated others. They do a great job with the preloading, but its a pain to setup (even for a developer).

    I decided to take what I liked from Galleria and add what I wanted so that it would meet my standards a little more. It’s up for grabs at http://www.jeremy-fry.com/pikachoose-jquery-gallery It does fade transitions between images, and has the option to do automated slide shows.

  • Nizar

    This is awesome and I am going to use this. Is there a way to prevent the URL from displaying the image path on the address bar?

  • This is a really cool plugin, I found a wordpressified version though it seems the developer’s site is now down. I’ve been wanting to use this type of plugin in a wordpress iste pulling images form a custom field but so far I haven’t got it working. Anyone know a solution?

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?()

  • Pingback: Risorse per webdesigners e articoli in uscita | Italian webdesign()

  • Pingback: PHP programmer of bangladesh » Blog Archive » “normal web developer” to “stylish web developer” - 01()

  • tefdos

    I don’t know if it was my fault, but it seems it doesn’t work with jquery 1.3.2.

  • rob

    Its not, I couldn’t get it working with 1.3.2 either.

  • james

    I can’t get it to work with 1.3.2 either.

  • jQuery 1.3.2 no longer uses the @ convention and this is why galleria is choking. The simple fix to make Galleria work with jQuery 1.3.2 is to open your galleria.js file and replace all occurrences of @rel with rel (worked for me with the basic demo anyway)

  • Very nice gallery!

  • kiesel

    If you remove @rel the gallery works by me with:
    IE6, IE7, Firefox 3, Opera 9.6 and Chrome without a problem.

    Thanks k00k!

  • perfect, saved my life!
    Thanks k00k!

  • poorva

    its really nice !!
    Thanks to give such a lovely plugin

  • Interesante…… :)

  • Is there a way to take off the URL from displaying the image path on the address bar?

  • Good one, galleries can be useful at times especially for projects etc

    Thanks for posting them :)

  • Thanks, there is more reason to comment than ever before!

  • Arthur

    This gallery is incredible so far, but I have two questions,

    Why is :

    a) overflow not working, noscale images make the entire li the size of the original instead of getting clipped.
    b) margins not working



  • Thanks a lot.

  • Oh,
    This gallery very look like and intresting .Thanks for the interducing about you and so good you gallery.


  • Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.

  • Vikas


    This is Amaazeing…………….But i think its not work with jquery.1.3.2.js.

    Thanks in advance.

  • Hey guys, I just integrated this into my new site (still a work in progress) but when I tested in Chrome online, the image only appears for a second then disappears.

    Its strange because it works on chrome from my hard drive and everywhere else…. even IE6!!

    Has anyone else come across this problem yet?

  • In case you wanted to see what I mean, go to philsmartdesign.com.au in Chrome and check it out…


  • Thanks for this, been looking for a nice simple gallery i can use to display a few pics and this works a treat. Cheers

  • Hi,
    Thanks a lot for this,it is very helpful for me…

  • Kunal

    I havent tried it yet but I have fairly good number of images. Will this work with all of them… wonder how would they be displayed. :|

  • Thanks a lot . Its’ very nice galllery.

  • thanks nice gallerys

  • The first image of the gallery can be loaded bij putting:

    $(‘ul.gallery img:first’).click();

    in the onThumb event of the gallery

  • Very beautiful light and shadows

  • @Nicky: In the demo, they used for the one they wanted to load first; and that works nicely.

  • Nice galleria but i don’t like the color, too dark.

  • A very nice gallery useful to designers…. Creative thoughts…. Thanks for sharing……..

  • Nice gallerys.Thanks

  • Nice collections…..thanks for sharing….

  • Nice gallerys Very beautiful light and shadows

  • nice one! think I’m going to love this and keep coming back :D

  • A very nice gallery useful to designers…. Creative thoughts…. Thanks for share

  • Thank you for everything. Very useful art and desing

  • Wow!! nice thank you

  • Is there a way to take off the URL from displaying the image path on the address bar?

  • This is Amaazeing…………….But i think its not work with jquery.1.3.2.js.

    Thanks in advance.

  • This is Amaazeing…………

    Thanks in advance.

  • Sean

    This jquery app is DEAD DO NOT USE IT

    Try loading the demos with google chrome, or even FF 3.5+, you will get UNDEFINED errors. I spent hundreds of hours trying to fix this! AVOID AVOID AVOID

  • ugurarcan

    @nick and @scottwell for those of us who doesn’t understand jQuery, can you be more descriptive on how to fix the Chrome issue of it not loading the first picture?

    Demo doesn’t work properly either. I can’t believe after all this buzz on many sites, they haven’t updated the code. Such a nice code otherwise.


  • T Reagan

    @ugurarcan – you can place class=”first” for the li containing the image you want to load first. Works in Chrome.

    The demo works fine as well. This is a free piece of source that someone put a lot of time in. Your vitriole is misplaced. If you have an expectation that all free software should work precisely as you want it to forever, you’re flatly incorrect. As always in open source, if you have a problem witht he code, fix it!

  • ugurarcan

    look @TReagan idk what part of ‘for those of us who doesn’t undestand jQuery’ you don’t understand… If i did, trust me i’d fix it u smartass… Demo in Chrome does NOT work, first image disappears right after you run the page. Nobody has to do it, I just said with how many times this issue was brought up and how some people are so gracious to provide free solutions, I was surprised that this issue is still going on. u have no idea how much research i did online about this.

    Oh btw, if you change the ‘true’ value to ‘false’ for ‘history’, the issue goes away. And who tried to fix it after a lot of research, ME! Don’t talk to me as I just want others to work for me but i can’t code so all i can do is teach myself and learn common errors and try fixes.

    smartass… you know what ‘vitriol’ means? ‘Bitterly abusive feeling or expression’ not my previous msg but this message is vitriol toward people like you!

  • ihaveadog

    Hey ugurarcan

    I feel your pain. I was looking around for a fix for this Chrome problem. I thought it might be a css issue. Your history fix worked! Much respect.

  • wonderful jquery work as well

  • ugurarcan

    @ihaveadog thanks! i’m glad it worked for you as well. I can’t take all the credit for the solution but it is combination of many things after a long research. it is a great code, i would’ve hated to see it not working on Chrome :) thanks for the FYI. Appreciated!!

  • Great idea , Thank you for your share!

  • I like this gallery.

  • I am very much please to see such a gallery.Thanks to you

  • very nice sharing

  • i bookmarked it ! thank you for sharing.

  • thank for tools I like it

  • thank for your script

  • very nice gallery it is beautiful, thank you

  • I am looking for a replacemente of Galleria.js because I cant get it working with Vista+IE8. Somebody has a FIX for this.

  • I got this fix for getting jQuery Gallery working on IE8 + Windows Vista.

    1. Get the galleria code outside from:


    //your code here


    2. Load Gallery in this way:

    var interval;


    interval = setInterval(‘loadMyGalleria()’,1000);

    function loadMyGalleria() {

    if ($(‘#galleria > div’).size() == 0) {
    image_crop: true,
    transition: ‘fade’,
    transition_speed: 1000,
    data_config: function(img) {
    return { description: $(img).next(‘p’).html() };


    3. Enjoy it (if it works for you)

  • Thanks a lot for this Very nice gallery.,
    i used it for my blog,
    great job, anyway ..

  • Thanks for the nice gallery!

  • so simple but really nice image gallery.

  • Your gallery here is the best by far

  • Nathan

    thx for your scripts! but it not works in ie6, and your demo in website does not work too…please give me some help.

    it just show the thumbnails, the image is disappear.

  • Sokhorn

    This is awesome and I am going to use this. Is there a way to prevent the URL from displaying the image path on the address bar?

  • I use this gallery in my site. very nice.

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons