Parsing XML with Javascript and outputting a list with additional details
(function($){
$.ajax({
url: ' /rss/photos-macro.xml',
dataType: 'xml',
success: function(data) {
var items = $(data).find('item'),
theUl = $('<ul class="thumbs columns clearfix"></ul>');
$('div#parseHere').append(theUl);
items.each(function(){
var _this = $(this),
theItem = {
title : _this.find('title').text(),
thumbnail : _this.find('mediathumbnail:eq(1)').attr('url'),
thumbnailWidth : _this.find('mediathumbnail:eq(1)').attr('width'),
thumbLrg : _this.find('mediathumbnail:eq(0)').attr('url'),
fullImg : _this.find('mediacontent').attr('url'),
desc : _this.find('mediadescription').text()
},
theLi = $('<li></li>'),
linkElem = $('<a rel="lightbox-myGroup" class="img" lightboxtitle="'+theItem.desc+'" href="'+theItem.fullImg+'"><span class="title">'+theItem.title+'</span></a>'),
hiddenHover = $('<span class="hidden box"><span class="img"><img src="'+theItem.thumbLrg+'" alt="'+theItem.title+'" width="250p"/></span><span class="title">'+theItem.title+'</span><span class="desc">'+theItem.desc+'</span></span>'),
thumbElem = $('<span class="imgCont"><img width="'+theItem.thumbWidth+'" src="'+theItem.thumbnail+'" alt="'+theItem.title+'"/></span>');
thumbElem.prependTo(linkElem);
linkElem.appendTo(theLi);
hiddenHover.appendTo(linkElem);
theLi.appendTo(theUl);
theUl.children('li:nth-child(4n)').addClass('last');
});
var thumbs = $('div#parseHere ul li a');
thumbs.hover(function (){
$(this).css('z-index','1000').children('span.box').removeClass('hidden');
$(window).bind('resize',$);
var containerWidth = $('div#wrapper').width(),
windowWidth = $(window).width(),
aPos = $(this).position(),
aWidth = $(this).width(),
aHeight = $(this).height(),
spanBoxWidth = $('a.img span.box').width();
if((windowWidth - containerWidth)/2 + containerWidth < aPos.left + spanBoxWidth + aWidth) {
$(this).children('span.box').css({'left':'auto','right':'0'});
}
}, function(){
$(this).css('z-index','10').children('span.box').addClass('hidden');
});
thumbs.mouseup(function(){
$(this).css('z-index',0).children('span.box').addClass('hidden');
});
thumbs.lightBox({
imageLoading: '/img/lightbox-ico-loading.gif',
imageBtnPrev: '/img/lightbox-btn-prev.gif',
imageBtnNext: '/img/lightbox-btn-next.gif',
imageBtnClose: '/img/lightbox-btn-close.gif',
imageBlank: '/img/lightbox-blank.gif',
containerBorderSize: 10
});
}
});
})(jQuery);