05 Mar

Galleria – Simple but Nice jQuery Image Gallery

GPL License, Gallery

Leave a Comment

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

Sponsors

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

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact