JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<script src="http://dl.dropbox.com/u/1709558/xmltest/xml.xml"></script>

    <div id="photo-viewer-inner"></div>

JavaScript

$.get('/echo/xml/', function(parseXML){

    $(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(){
        
        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);
});

})