Creating a custom jQuery powered Photo Gallery

Updated on 20-October-2016 at 10:16 AM

In this article we will cover how you can create your own Photo Gallery implementation using the gallery XML feed.

Before you start

Make sure you have a photo gallery created and you have the XML feed link, here is how to create your gallery and get the XML feed link .

Once created, the XML feed file looks something like this:

The implementation

The first step is to set up a page your custom gallery will be placed on and link the jQuery library:

  1. go to Site Manager -> Pages -> Add Page to create a blank page
  2. switch to the HTML view and paste this code at the very top of the page:
  3. below the script create a div with the ID "gallery" (do not change this ID):
    <div id="gallery"></div>

Next, 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 its own path. Back in HTML mode, we'll insert the following code after the DIV we just created:

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 separate 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 output.