Creating a Photo Gallery Using jQuery and the MT Asset Manager
To get started, download Galleria (it includes jQuery) and upload the CSS file, the jquery.min.js file and the jquery.galleria.js file to your server. Create a new index template, name it whatever you want, and populate it with this template code. You’ll likely have to modify the CSS
<link> and the
<script> tags to point to where you uploaded your files, and of course change the titles and text to whatever you want.
This template is based on the example that comes with Galleria. If you’re comfortable with JS and want to customize the look and behavior of your gallery, I recommend you read the Galleria options documentation, then take a look at the JS code in the template. There’s almost no end to the ways you could modify the transitions, thumbnail appearance, and other details.
Towards the end of this template is where the Asset Manager does it’s work. Let’s look at those lines:
<div class="demo"> <div id="main_image"></div> <ul class="gallery_demo_unstyled"> <mt:Assets lastn="20" type="image" tag="historical"> <li<mt:if name="__first__"> class="active"</mt:if>> <img src="<mt:AssetURL>" alt="<mt:AssetLabel escape="html">" title="<mt:AssetLabel escape="html">" /> </li> </mt:Assets> </ul> <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p> </div>
The classes and ids we use here are for the benefit of Galleria. You can change those, as long as you also change them in the script code earlier in the template. The code is pretty simple: create an unordered list, then loop through our assets:
<mt:Assets lastn="20" type="image" tag="historical">
This is where we start our assets loop. We’re saying we want up to the last 20 assets of type “image” that have the “historical” tag. Of course, you’ll want to change that to whatever tag you’ve used for your photos. Or you can leave it off to get all images in your asset manager. Other assets attributes allow us to filter based on author or file extension, or sort by various settings.
Each iteration of the loop creates a list item:
<li<mt:if name="__first__"> class="active"</mt:if>>
Here, we’re using a loop meta variable —
__first__ — to add a class to the first list item we output. That will make the photo show up as the main photo when someone first visits the page.
Then we output our
<img src="<mt:AssetURL>" alt="<mt:AssetLabel escape="html">" title="<mt:AssetLabel escape="html">" />
And that’s it. Put in an output path for your template, then save and publish it. If the template is finding the CSS and JS files, you should get a gallery like this one.
As I mentioned before, you can use MT’s Asset Manager with any number of existing photo galleries, or you could create your own from scratch. There are many asset-related template tags that give you access to all your files’ data. MT can also generate thumbnails on the fly and cache them for future use.
Have you created your own photo gallery with the MT Asset Manager? Tell us about it in the comments.