jQuery slideshow, responsive photo gallery

Credits:
Yulia Pletinka - http://500px.com/podsolunuh
Michael Breitung - http://www.mibreit-photo.com/

AtomicZen - http://500px.com/AtomicZen
Artie - http://www.flickr.com/photos/artiephotography/

Photo gallery

How to use | Properties | Callback functions | XML structure

XML structure

The source XML contains a list of item elements (an element is identified by an XML tag specified between the "<" and ">" characters), each item element (node) having extra child elements that represent the URL for the images and thumbnails, text for the title and description and a link. So a typical source XML file might look like this:

<gallery>
    <folder>
        <items>
            <item>
                <image>URL for image 1(mandatory)</image>
                <thumbnail>URL for thumbnail 1</thumbnail>
                <title>Title for image 1</title>
                <description>Description for image 1</description>
                <link>Link for image 1</link>
            </item>
            <item>
                <image>URL for image 2(mandatory)</image>
                <thumbnail>URL for thumbnail 2</thumbnail>
                <title>Title for image 2</title>
                <description>Description for image 2</description>
                <link>Link for image 2</link>
            </item>
            ...
            <item>
                <image>URL for image N(mandatory)</image>
                <thumbnail>URL for thumbnail N</thumbnail>
                <title>Title for image N</title>
                <description>Description for image N</description>
                <link>Link for image N</link>
            </item>
        <items>
    </folder>
</gallery>

If you want to group your photos in more than one folder, you need to place in the XML file two or more <folder> nodes, for example:

The <item> element contains all the information regarding each image from the album.

Note: The text written in italics in the above example should be replaced by your actual image URLs, titles, descriptions and links.

Note: Click here to view a sample source XML file.

<gallery> The element is the root node for the source XML.

<folder> The element groups the contained photos in a folder structure. This element contains the name of the folder and the folder items. If you want to have more than one folder in the album (for example if you want to create a portfolio) place two or more <folder> elements in the source XML file.

<name> The element contains the name of the folder, which is displayed when the folders are listed and in the caption of each image.

<items> This element contains all the items of one folder.

<item> The element contains all the information regarding each image from the album.

<image> This element is the most important one and it is mandatory. It contains the URL for the images. This value should not be missing, otherwise the album will not work properly or at all. In case the <thumbnail> node is missing, the large images will be used also as thumbnails and they will be scaled to the thumbnail size.

<thumbnail> This element contains the URL of the thumbnail images. If this value is missing, the album will use the large images as thumbnails.

<title> and <description> These two elements contain the title and description for the images. The text in these two elements should be added as CDATA text.

Ex. <![CDATA[This is a description of the image.]]>

<link> You can associate links with the images. In this case you have to specify the URL in this element which will navigate the user to another page in a new tab.