Create Beautiful Image Galleries With Galleria

1

Posted by Scott Spear in Images/Graphics, Javascript, Reviews, Web 2.0, Webmaster | Tags: , ,

Thursday, September 11, 2008

Galleria is a clean and easy to implement image gallery based on jQuery. This is a great tool if you need to add an image gallery to your site and don't want to use a flash based gallery. I prefer JavaScript and CSS galleries over flash galleries because they are usually smaller and slightly easier to implement. This is a small (4K) script that doesn't add a lot of overhead to your page load time and is completely customizable to your taste. The images are preloaded individually. Some other features to note are the ability to your custom thumbnails, add a caption from image anchor title, and call events from the image onLoad event.

Implementing this gallery is, as noted earlier, very easy. You can have the whole thing up and running in only four lines of code. You need to add the CSS and JavaScript files to the header and then add the unsorted list that gets converted into the gallery. I have displayed the code that needs to be inserted into your header below. You can also get more help, checkout Demo1 or Demo2, and download the script.

 
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
 

More information about usage available at the Galleria website.

About the author: Scott Spear

I have been designing and programming on the web for many years and still have so much more to learn. I hope to use what I have learned from my MBA to mix business with web technologies in future endeavors.

One comment

Post your own

Paul Reply Friday, September 12, 2008

What a another great find! I think I’m going to replace my current flashed bases gallery with this. Thanks for the share!

Leave a Reply