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