jQuery Image Gallery 1 - Galleria
One of the most popular applications of jQuery is building elegant image galleries, but the one thing that's universally missing is the ability to manage the contents of the image gallery right from the website. That's like building a beautiful sports car with no engine. Looks great but how the heck do you go anywhere with it?!?
I'm choosing the Galleria jQuery gallery to start with because it has been around a while, and is one of the first galleries I actually tested out a few years back. It has come a long way since its inception, and now we'll take it to the next level.
Try it Out
The demo should load pre-populated with some images. The trick now is to log in (it's the link in the upper right), then use the management section to add your own images, delete existing ones, and reorder them using the MagicEdit buttons.
MagicEdit will take care of creating the thumbnails and gallery images for you, sized perfectly to fit (no nasty browser image scaling here).
Once you're done with your editing, just log out to see what the gallery looks like to the casual visitor.
How it Works
Now that you've seen what the gallery can do, let's see how it works. Here's the actual HTML for implementing the gallery.
First, you need the dependent files for Galleria, including the files associated with the theme you are using. There are some premium themes (paid), but I'm just using the free Classic theme. You'll also need to include jQuery in your site for the gallery to work, but you're probably already doing that somewhere.
If you want to make the images different sizes to fit your design, you can just update the code where it says "cl_effects". You can read more about how image effects work in the documentation. Let's just say that this code takes care of automatically sizing your images for you.
Now, we need a section for managing the images. It looks pretty similar to the gallery itself, but lets the content manager edit all of the images and text associated with the gallery.
<ul cl_visible="=CLManager.activeAccount:isAdmin" class="manage"> <li>Add, edit and sort images here.</li> <magicrepeat me_name="gallery"> <li> <div class="imgLeft"> <img magicedit me_name="image" src="http://placehold.it/60x40" cl_effects="maxsize=100,300,1"/> </div> <h3><magicedit me_name="title" me_plain>Title</magicedit></h3> <p><magicedit me_name="description" me_plain>Description</magicedit></p> <div style="clear:both"></div> </li> </magicrepeat> </ul>
The really cool thing here is just that little "cl_visible" declaration; the whole UL will be hidden unless the manager is logged in. In the demo, the management code is placed right below the gallery itself, but if you want to put it on another page you can.
So now you can make the Galleria image gallery work on your MagicEdit site! Give it a whirl and let us know how it goes.
Rob Watts is the co-founder of MagicEdit and a couple of other things. He is currently an entrepreneur, but is also a recovering physicist, engineer, musician, and motorcyclist. It might have something to do with being a new parent.