Jquery Ajax CSS XML gallery

Posted by: Flep Posted date: October 27, 2011 In: Ajax, Jquery, XML | comment : 2

I created a simple image gallery with HTML, jQuery and Ajax.
This gallery is managed by a simple XML file (images.xml).

Since I come from the world of Flash / Actionscript I am use to manage the contents of applications from an external XML file.
What do you think?

The following lists the main steps to build this gallery.

Let’s start with HTML

We have a body onLoad event to call a Javascript function (loadXML) that we will see shortly.

<body onLoad="loadXML()">

Then I created a DIV container (which will contain the images shown) with id “holder”

<div id="holder">

</div>

and another DIV later (non-nested) with id “buttons”

<div id="buttons">
    <ul id="navigation"><div id="counter"></div>
        <li class="left"><a>Back</a></li>
        <li class="right"><a>Next</a></li>
    </ul>
</div>

Note that there is inside an unordered list (ul tag) that contains the navigation buttons of the gallery (Next and Back). These buttons are classes “left” and “right”
Prior to this list we have another DIV with id “counter” that displays the number of the current image.

CSS

In the CSS we have the font Droid Sans by Google.
The rest is simple CSS that sets the layout of the gallery.
ote that the DIV “holder” I have as a background image of preloading:

background: url('../assets/ajax-loader.gif') no-repeat center center;

Javascript – Jquery and Ajax

In the file gallery.js first declare the variables that I need:

var XML_PATH = "xml/images.xml";
var images=new Array();
var id=0;

which are respectively the path where the file is located images.xml that defines paths and names of the gallery.
An Array that contains the locations of images.
A numeric variable named id that will be the index of the gallery navigation (controlled by the Next and Back buttons).
Then I immediately declared the function loadXML (called from the body). This feature, in addition to setting simple properties of the back button (because I do not want to see as the first image you can not navigate back) loads with Ajax Jquery XML file.
It executes the parse that file to retrieve the locations of all the images and populates the array images of image paths.
Then it calls the init and loadImage functions.

function loadXML()
{
    $('.left a').hide();
    $('.left').css("opacity","1");
    $('.right a').hide();
    $('.right').css("opacity","1");
    $("#counter").text("XML loading");

    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function(xml)
            {
                $(xml).find('image').each(function(value)
                {
                    images[value]=$(this).text();
                });

                init();
                loadImage();
            }
    });
}

The init function (below) adds the event click on the buttons.
The Back button decreases the value of the variable id of a unity.
The Next button increases the value of the variable id of a unity. And on click of each function will be called loadImage that will load the corresponding image.

function init()
{
    $('.left a').click(function ()
    {
        id--;
        loadImage();
    });

    $('.right a').click(function ()
    {
        id++;
        loadImage();
    });
};

Here is the function that loads the images

function loadImage()
{
    $("#counter").text("loading");

    $("#holder").empty();
    $("#holder").prepend('<img id="my_img" src="'+images[id]+'" />');

    $('#my_img').load(function()
    {
        checkID();
    });
}

This function loads the image path that lies nell’Arrray images with index equal to the value of the variable id.
And if navigating with the buttons, the value of the id variable should be less than zero or greater than the total number of images?
No problem, here is the function checkID that controls precisely such situations

function checkID()
{
    if(id<=0)
    {
        id=0;
        $('.left a').hide();
    }

    if(id>=images.length-1)
    {
        id=images.length-1;
        $('.right a').hide();
    }

    if(id>0)
        $('.left a').show();

    if(id<images.length-1)
        $('.right a').show();

    $("#counter").text((id+1)+" / "+images.length);
};

XML

Finally the file images.xml

<?xml version="1.0" encoding="UTF-8"?>
<images>
    <image>images/Caustic.jpg</image>
    <image>images/Condensed.jpg</image>
    <image>images/Dewdrop.jpg</image>
    <image>images/Division.jpg</image>
    <image>images/Frozen.jpg</image>
    <image>images/Fusion.jpg</image>
    <image>images/FusionBlue.jpg</image>
    <image>images/GoingUp.jpg</image>
    <image>images/Jacks.jpg</image>
    <image>images/Magma.jpg</image>
    <image>images/Marine.jpg</image>
    <image>images/Photosynthesis.jpg</image>
    <image>images/SnowflakeGreen.jpg</image>
    <image>images/SnowflakeGrey.jpg</image>
    <image>images/Splash.jpg</image>
    <image>images/SplashDetail.jpg</image>
    <image>images/Stamen.jpg</image>
    <image>images/StormEye.jpg</image>
    <image>images/SubZero.jpg</image>
    <image>images/TideAqua.jpg</image>
    <image>images/TideBlue.jpg</image>
    <image>images/TideMagenta.jpg</image>
    <image>images/TideRed.jpg</image>
    <image>images/Torrent.jpg</image>
</images>

DEMO

I attach the files of the gallery:

Jquery gallery (723.4 KiB, 733 hits)