Создать галерею изображений с помощью AJAX, XML и запроса - PullRequest
Новая
       18

Создать галерею изображений с помощью AJAX, XML и запроса

0 голосов
/ 22 февраля 2012

Я нахожусь в процессе создания галереи изображений из XML-файла. Вот XML, с которым я работаю: 

<?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">

И jquery, который я использую, чтобы получить содержимое этого файла: 

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

});

Итак, мне нужно создать разделы для каждого «блока фотографий», а затем сгенерировать изображения с их заголовками и описаниями внутри отдельных элементов div. Мне это кажется довольно простым, но это мой первый набег в xml, так что я немного в темноте. Пожалуйста, дайте мне знать, если мне нужно предоставить больше информации. Спасибо всем!

1 Ответ

1 голос
/ 23 февраля 2012

В вашем примере вам нужно будет снова пройтись по коллекции фотографий и создать для них разметку: 

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

Примечание: я не проверял это. Я буду рад помочь, если что-то пропустил.

Как вы, вероятно, можете сказать, создание больших разделов HTML с последующим заполнением их данными является утомительным, часто неэффективным и кошмаром обслуживания. Проще использовать систему шаблонов, если вы можете. Это позволяет вам отделить структуру HTML от логики.

Несмотря на то, что доступно много библиотек, мой текущий любимый - Underscore (библиотека, предназначенная для работы с jQuery)

Однако, если вы хотите придерживаться jQuery, тогда также есть шаблонный плагин , но он больше не поддерживается.

...