Log in Sign Up

A Magic Image Gallery

Update 11/15/2012: An updated version of this gallery is available. It's based on the same principles of editing, but has a few enhancements including AJAX loading instead of loading all of the images at once. Try the Demo | Download

An image is worth a thousand words, or so they say. That's why we wanted to show you how to use the three key features of MagicEdit to build an image gallery that is easily managed by a site's content manager.

This HowTo will focus on the MagicEdit elements and how they work to make the gallery work. That way you can use these techniques to build your own gallery. However, the fully featured gallery includes some JavaScript as well, but we won't go into that here. We'll just show you how to set up the gallery HTML so that MagicEdit and some basic JavaScript can work with it.

The goal of this effort is to have an image gallery that can be managed by, well, your mom. Or your grandmother. Someone who really doesn't know anything about HTML and has no interest in learning. And MagicEdit allows you to build a site that the content manager can easily use.

To download all of the files associated with this HowTo, just scroll down to the bottom and click on the .ZIP file.

Getting Started

Our image gallery will have a series of panels with images, along with associated thumbnails. We'll use a couple of lists to provide a framework, so the foundation of the gallery is two unordered lists. One is the list of large images and the other is a list of thumbnails:

<ul class="me_galleryPanel">
  <li>
    <img src="images/largeImage_1.jpg" />
  </li>
  ...
  <li>
    <img src="images/largeImage_n.jpg" />
  </li>
</ul>

<ul class="me_galleryThumbs">
  <li>
    <a href="#"><img src="images/thumbnail_1.jpg" /></a>
  </li>
  ...
  <li>
    <a href="#"><img src="images/thumbnail_n.jpg" /></a>
  </li>
</ul>

The idea is to style the overall gallery with CSS, then use JavaScript to swap the large image when a user clicks on a thumbnail. This is pretty standard stuff when it comes to image galleries. Our concern here is how to make it manageable using MagicEdit and a single image and thumbnail pair as a template. So of course to repeat a set of HTML, we use MagicRepeat.

Using MagicRepeat to create Image/Thumbnail pairs

MagicRepeat has lots of interesting powers in addition to just being able to duplicate (or repeat) a section of HTML. We're going to use some of these powers to make sure that the thumbnails and their associated images stay synchronized, as well as making it so that if you change a large image its thumbnail also changes (we don't want to just let the browser scale the image since that's gross).

The way we do this is to actually name both repeat regions the same. That way their contents will be the same. Wait a minute, you say, they aren't the same since the thumbnail is different and the image panel will probably have other stuff in it (like a caption). It turns out that as long as you name them the same using the me_name attribute, MagicEdit will treat them as the same MagicRepeat. We'll leave a single list item in each list as a template, then wrap them in MagicRepeat tags:

<ul class="me_galleryPanel">
  <magicrepeat me_name="simpleGallery">
    <li>
      <img src="images/placeholder.jpg" />
    </li>
  </magicrepeat>
</ul>

<ul class="me_galleryThumbs">
  <magicrepeat me_name="simpleGallery">
  <li>
    <a href="#"><img src="images/placeholder_th.jpg" /></a>
  </li>
  </magicrepeat>
</ul>

Now, MagicEdit will expose Delete and New buttons to the user for each instance of MagicRepeat. If you add a new entry to one, you will get a new entry in the other as well since they are actually the same MagicRepeat. The only problem now is that there is no way to update the image, so you just end up with the same image repeated. We need to add some magic to these images.

Adding Magic to the Images

To make images editable, all you need to do is add the magicedit attribute. However, just like the MagicRepeat sections for images and thumbnails, we need to synchronize the images with each other by naming them:

<ul class="me_galleryPanel">
  <magicrepeat me_name="simpleGallery">
    <li>
      <img magicedit me_name="galleryImage"  src="images/placeholder.jpg" />
    </li>
  </magicrepeat>
</ul>

<ul class="me_galleryThumbs">
  <magicrepeat me_name="simpleGallery">
  <li>
    <a href="#"><img magicedit me_name="galleryImage"  src="images/placeholder_th.jpg" /></a>
  </li>
  </magicrepeat>
</ul>

That is really all you need to do! You can now add as many images as you like, and they will be synchronized between the large image panel and the thumbnails. The images will also be sized exactly the same as the placeholder images, so the thumbnails will be generated automatically.

Since it's hard to test this out without actually having it on MagicEdit, here's a quick video of the basics of how the "gallery" works now. All that remains is styling the page and adding a bit of JavaScript!

Fixing up the Editor

You can easily style and move around the editor buttons that show up when you're logged in to MagicEdit. This is highly recommended if you are building a specialized interface for something like this image gallery. For more information on how to do this, click here to view the documentation on styling.

For the final version of the gallery, we use JavaScript (and jQuery) to actually remove some edit and delete buttons, and move the others around. This isn't required, but helps with usability when managing images in the gallery.

Image Effects

As the above video shows, there are lots of cool image effects that you can use to customize images in your MagicEdit site. To read more about them, click here to view the documentation on images.

Conclusion

That's pretty much all you need to do to create an easily managed image gallery using MagicEdit. Click on the link below to download a fully-featured image gallery that you can use on your own MagicEdit site!

Downloads

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top