Skip navigation

Currently Being Moderated

Rendering a Photo Gallery XML feed using jQuery

Mar 15, 2012 8:20 PM

 

 

The "Photo Galleries" module allows you to easily manage your photo galleries via the Admin Console and insert them on a page using the Module Manager or 1-Click Insert.

 

By default, an inserted Photo Gallery will render a set of thumbnails and use a standard Lightbox effect for displaying the full-size images. While this is a great solution and can be customized to a certain degree, you may sometimes require more flexibility or control over the way the images are displayed to users.

 

Using the handy jQuery library and your gallery XML feed, you can completely customize the way in which your photo galleries are rendered, then use a vast array of jQuery slideshow plugins to enhance the user experience.

Step 1. Set up your photo gallery

 

The first step is to set up your Photo Gallery just like you normally would. You'll upload the files to a directory using the file manager or FTP, then create the Photo Gallery under Modules > Photo Galleries.

 

modulesphotogalleries.png

 

For more information on setting up Photo Galleries, refer to this article.

We'll be automatically generating "alt" tags for our outputted images using the photo description you provide during gallery set up - so it's important that you add a description here if you'd like these tags rendered.

Step 2. Generate the XML feed

 

When you set up your Photo Gallery via the Admin Console, you'll notice a "Generate XML Feed" in the Action Box to the right.

 

genxml.png

 

Clicking this will generate a raw XML feed of all your Photo Gallery items, including the image URLs and their descriptions.

 

xmlurl.png

 

Click the "Generate XML Feed" button and grab the URL of the XML feed generated from the success notification box at the top. You'll need to keep a note of this URL as we'll require it later on.

Step 3. Set up your web page

 

Next, we'll create a web page to render our newly created Photo Gallery on. We'll navigate to Website > Web Pages > Create a new web page and call the page "Gallery".

 

createpage.png

 

Before we move any further, we need to make sure jQuery is included on our page. We'll include the jQuery CDN hosted version by placing the following code at the top of our page in HTML mode.


 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

 

As we won't be using the default module, we'll need to create a DIV element to render our gallery inside using jQuery.

While in HTML mode, create an empty DIV with the ID "gallery". It's important we assign an ID to our DIV so that we can select it using jQuery. It should look something like this:

 

<div id="gallery"></div>

Step 4. Insert and customize the code

 

Finally, we need to insert the jQuery code that reads our XML file and builds the HTML mark-up for our gallery.

In this example, the code will place each of our gallery items inside an LI element and hyperlink each image to it's own path.

Back in HTML mode, we'll insert the following code after the DIV we just created:

 

<script type="text/javascript">
$(function () {
       $.ajax({
                type: GET,
                url: http://mysite.com/photos/PhotoGallery.xml, // replace with absolute URL of your gallery's xml file
                dataType: xml,
                success: function(xml) {
                    $(xml).find('img').each(function() {
                       var location = 'http://mysite.com/photos/'; // replace with absolute path to the directory that holds your images
                       var url = $(this).attr('src');
                       var alt = $(this).attr('alt');
                        $('<li></li>').html('<a href="'+location+''+url+'"><img src="'+location+''+url+'" alt="'+alt+'"/></a>').appendTo('#gallery');
                    });

                }

            });

});
</script>

 

 

It's important that once you've inserted the code, you replace the first absolute URL with the path to the XML file you just generated and the second URL with the path to the directory holding your images.

Save and publish the page.


If we switch over to the front-end, you'll notice that your images are being rendered inside simple, unformatted LI elements. You can now style this using your own CSS or use one of the many free, jQuery-based Gallery/Slideshow plugins available on the web, such as Galleria, the jQuery Cycle plugin, or InnerFade.

 

When using a seperate jQuery plugin on top of this set up, make sure you place and execute the plugin script after the code we just inserted, so that our LI items are generated before it attempts to process and manipulate them.

 

This is just a basic example of how you can read your gallery XML feed using jQuery. With a litlte bit of JavaScript knowledge, you can easily build on this sample code, completely customizing the way in which the image elements are outputted.

 
Comments (8)