Generate image gallery with ajax, xml and query

Question

I am in the process of building an image gallery from an xml file. Here is the xml I'm working with:

<?xmlversion="1.0"encoding="utf-8"?>

<sections>

    <section id="section-1">

            <photo imageurl="images/gallery-images/1.jpg">
                <title>Fusce dapibus, tellus ac cursus commodo</title>
                <description type="wide">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</description>
            </photo>

    </section>


    <section id="section-2">

And the jquery I am using to get the contents of that file:

$.get('images/gallery-images/gallery-images.xml', function(parseXML){

    $(parseXML).find('section').each(function(){

        var $section = $(this);
        var sectID = $section.attr('id');
        var photo = $section.find('photo');
            var imageurl = photo.attr('imageurl');
            var title = photo.find('title').text();
            var description = photo.find('description').text();
                var kind = photo.find('description').attr('type');  

        var html = '<div class="gallery-section" id="' + sectID + '" >';
        html += '<div class="photo">';
        html += '<img src="' + imageurl +'" class="gallery-photo" />';
        html += '<div class="photo-info ' + kind + '"><h1>' + title + '</h1>';
        html += '<p>' + description + '</p></div>';
        html += '</div></div>';

        $('#photo-viewer-inner').append($(html));
        $('#loading').delay(600).fadeOut(600);
    });

});

So, what I need to do is to create sections for each "block of photos", then generate the images with their titles and descriptions inside of individual div's. This feels pretty basic to me, but this is my first foray into xml, so I am a bit in the dark. Please let me know if I need to provide more information. Thank you all!

Simon Smith · Accepted Answer · 2012-02-22 22:37:54Z

1

In your example, you will need to loop again through the collection of photos and build up the markup for those as well:

$(parseXML).find('section').each(function(){

    var $section = $(this),
        photos = $section.find('photo'),
        photoContainer = $('<div></div>', {
            id : $section.attr('id'),
            'class' : 'gallery-section'
        });

    photos.each(function(photo){

        var photo = $(this),
            imageurl = photo.attr('imageurl'),
            title = photo.find('title').text(),
            description = photo.find('description').text(),
            kind = photo.find('description').attr('type');

        var photoWrapper = $('<div class="photo"></div>'),
            imageElem = $('<img/>', {
                src : imageurl,
                'class' : 'gallery-photo' 
            }),
            photoInfo = $('<div></div>', {
                'class' : 'photo-info ' + kind
            }),
            header = $('<h1></h1>', {
                text: title
            }),
            photoDescription = $('<p></p>', {
                text: description 
            });  

        photoInfo.append(header);    

        photoWrapper
            .append(imageElem)    
            .append(photoInfo);

        photoContainer.append(photoWrapper);     

    });  

    $('#photo-viewer-inner').append(photoContainer);

    $('#loading').delay(600).fadeOut(600);
});

Note: I have not tested this. I'll be happy to help if I've missed something.

As you can probably tell, building up large sections of HTML and then populating it with data is tiresome, often inefficient and a maintenance nightmare. It's easier to use a template system if you can. This allows you to keep your HTML structure separate from your logic.

Although there are many libraries available, my current favourite is Underscore (a library designed to work with jQuery)

However, if you'd like to stick with jQuery then there is a template plugin for it as well, but it has been discontinued.

edited Feb 22, 2012 at 22:37

answered Feb 22, 2012 at 21:48

Simon Smith

8,0442 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jcbfshr Over a year ago

Thanks for taking a look at this. I have combed through it and tried implementing it in my code and it doesn't appear to be working. I agree that there feels like a better way to handle this, but I'm not experienced enough to figure that way out and I think I will just have to try to work my way through this for now. Thanks again for your help.

Simon Smith Over a year ago

I tested it, and realised I left out one line of code. Give it a go now and it should work. A working version is at this URL - dl.dropbox.com/u/1709558/xmltest/index.html

Collectives™ on Stack Overflow

Generate image gallery with ajax, xml and query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related