WebAppers

/ best free open source web resources /

Shopify

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.

jquery-gallery.png

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

81 Comments
  • Edwin

    Nice :)

  • http://www.XGhozt.com/ XGhozt

    That looks unbelievably flash like.

  • http://justinlilly.com Justin Lilly

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

  • http://www.macoteca.com blancus

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

  • http://www.caneidia.com Ricardo

    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.

  • http://mahalie.com/notebook/ mahalie

    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…

  • http://www.tet0uan.com Reda Makhchan

    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

  • http://blog.cakephp-brasil.org Juan Basso

    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.

  • http://www.jeremy-fry.com/pikachoose-jquery-gallery Jeremy

    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?

  • http://www.nomad-one.com nomad-one

    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.

  • http://twitter.com/k00k k00k

    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)

  • http://www.teranga-studio.com Baron

    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!

  • http://kenjiyamamoto.com Kenji Yamamoto

    perfect, saved my life!
    Thanks k00k!

  • poorva

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

  • http://www.kuraka.net kuraka

    Interesante…… :)

  • http://www.intercreativo.net Gabriel

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

  • http://www.accountingtutor.org accounting homework

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

    Thanks for posting them :)

  • http://www.mindscreen.co.in Film Institute

    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,

    Arthur

  • http://www.mp3vampires.com tannkza

    Thanks a lot.

  • http://www.dineshchopra.com Accounting Homework

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

    Thanks.

  • http://www.thirdeyereiki.com Reiki

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

    Thank u.

  • Vikas

    Hi

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

    Thanks in advance.

  • http://www.philsmartdesign.com.au Phil

    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?

  • http://www.philsmartdesign.com.au Phil

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

    Cheers
    Phil

  • http://www.jupitercatering.com Jupiter

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

  • http://www.pfrcivf.com Prashanth

    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. :|

  • http://www.plengfree.com ฟังเพลง เนื้อเพลง

    Thanks a lot . Its’ very nice galllery.

  • http://www.gamesawy.com العاب فلاش

    thanks nice gallerys

  • http://www.mythix.be Nicky De Maeyer

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

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

    in the onThumb event of the gallery

  • http://www.108mp3.com โหลดเพลงmp3ฟรี

    Very beautiful light and shadows

  • http://sottwell.com sottwell

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

  • http://fb-farmvillecheats.com/ volinmaz

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

  • http://www.msgenset.com M.S.ENGINEERING

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

  • http://www.mefasol.com/ โหลดฟรี เพลงฮิต

    Nice gallerys.Thanks

  • http://www.harinitourstravels.com/ Gayathri

    Nice collections…..thanks for sharing….

  • http://www.mp3downloadfc.com เพลงใหม่ล่าสุด

    Nice gallerys Very beautiful light and shadows

  • http://www.malepenisextender.com/ penis enlarging

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

  • http://www.healthyscript.com โหลดเพลงฟรี

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

  • http://www.xn--72cza4b7ack6a2d6hsa.com โหลดเพลงใหม่ฟรี

    Thank you for everything. Very useful art and desing

  • http://www.isanpr.com ร้าค้าออนไลน์ store online

    Wow!! nice thank you

  • http://www.esanpr.com online music stations

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

  • http://www.dhcmekoe.com เว็บโหลดเพลงฟรี

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

    Thanks in advance.

  • http://www.esanpr.com online music stations

    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.

    Thanks.

  • 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.

  • http://www.havsong.com โหลดเพลง

    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!!

  • http://www.havsong.com โหลดเพลง

    Great idea , Thank you for your share!

  • http://fvcheats.com sindery

    I like this gallery.

  • http://www.bdchatsites.com Md Mazaharul Huq

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

  • http://www.variety2day.com/ เว็บโหลดเพลงฟรี

    very nice sharing

  • http://www.stylesindia.com stylesindia

    i bookmarked it ! thank you for sharing.

  • http://www.thaihottime.com/clip ดูคลิป

    thank for tools I like it

  • http://www.songlike.net ฟังเพลงออนไลน์

    thank for your script

  • http://www.noonoob/dara/ รูปดารา

    very nice gallery it is beautiful, thank you

  • http://www.akeibo.com Jesus Flores

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

  • http://www.akeibo.com Jesus Flores

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

    1. Get the galleria code outside from:

    jQuery(document).ready(function(){

    //your code here

    });

    2. Load Gallery in this way:

    var interval;

    Galleria.loadTheme(‘/js/galleria.classic.js’);

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

    function loadMyGalleria() {

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

    }

    3. Enjoy it (if it works for you)

  • http://www1.yushare.com ฟังเพลง

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

  • http://www.thefunstufftodo.com John

    Thanks for the nice gallery!

  • http://allaboutcms.blogspot.com/ jeterboy

    so simple but really nice image gallery.

  • http://www.rendering-brisbane.com.au/ Rendering Brisbane

    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?

  • http://www.egtagames.com gtagamer

    I use this gallery in my site. very nice.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons