Home  |   Community Forum  |   MagicEdit.com  |   Demo  |   Sign Up

Instant Website Editing. MagicEdit lets web designers quickly add browser-based editing to just about any website.

  • Published on | Dec 22, 2011 | by Rob Watts

jQuery Image Gallery 1 - Galleria

More than meets the eye

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

Well, we're going to show you how you can use MagicEdit to manage the contents of just about any JavaScript image gallery or slideshow, and this is the first demonstration. This proves that MagicEdit provides the key building blocks to HTML required for database-driven content management: text editing, image management, link management, and repeated elements.

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

Demo Download

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.

<script type="text/javascript" src="galleria-1.2.5.min.js"></script>
<script type="text/javascript">

<div id="galleria">
  <magicrepeat me_name="gallery" me_hidebuttons>
    <a cl_image="$image" cl_effects="maxsize=600,330,1" cl_visible="=$image">
      <img magicedit me_name="image" cl_title="$title" cl_alt="$description" me_hidebuttons cl_effects="maxsize=120,40,1">

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">
      <div class="imgLeft">
        <img magicedit me_name="image" src="http://placehold.it/60x40" cl_effects="maxsize=100,300,1"/>
      <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>

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.

That's it!

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.

Join The Discussion

+1  Posted by Rob Watts • Dec.23.2011 at 10:20 • Reply

Note that we are using Galleria 1.2.5, which is the current version as of this writing. Apparently it has some issues in Webkit browsers. It shouldn't be throwing errors now, but may run a bit slow.