Eklog

Here’s how to load images from any server using a simple XML files. Useful for giving clients or affiliates access to updating sites without changing the main code.

See it in action at: Loading images with XML & jQuery

<script type="text/javascript">

$(document).ready(function()
{
$.get(’myData.xml’, function(d)
{
$(’#list’).append(’<dl id="list1Cont" />’);

$(d).find(’book’).each(function()
{
var $book = $(this);
var title = $book.attr("title");
var linkurl = $book.attr(’linkurl’);

var imageurl = $book.attr(’imageurl’);

var html = ‘<dt> <img class="bookImage" alt="" src="’ + imageurl + ‘" /> <span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span></dt>’ ;
// html += ‘<dd>’;
// html += ‘<dt class="title">’ + title + ‘</dt>’;
// html += ‘<span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span>’;
// html += ‘</dd>’;

$(’#list1Cont’).append($(html));

});
});

$.get(’myData2.xml’, function(d)
{
$(’#list2′).append(’<dl id="list2Cont" />’);

$(d).find(’book’).each(function()
{
var $book = $(this);
var title = $book.attr("title");
var linkurl = $book.attr(’linkurl’);

var imageurl = $book.attr(’imageurl’);

var html = ‘<dt> <img class="bookImage" alt="" src="’ + imageurl + ‘" /> <span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span></dt>’ ;
// html += ‘<dd>’;
// html += ‘<dt class="title">’ + title + ‘</dt>’;
// html += ‘<span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span>’;
// html += ‘</dd>’;

$(’#list2Cont’).append($(html));

});
});
});
</script>

<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="F1X" imageurl="http://www.ekstasis.net/images/funpics/f1scx.jpg" linkurl="7200_7/ELISE"></book>
<book title="Fly in my" imageurl="http://www.ekstasis.net/images/funpics/fly_soup.jpg" linkurl="2200_7/SPIN"></book>
<book title="Why the long face?" imageurl="http://www.ekstasis.net/images/funpics/horse.jpg" linkurl="3043_7/QUICK_STEP"></book>
<book title="Mornin" imageurl="http://www.ekstasis.net/images/funpics/wake_up.jpg" linkurl="2121_7/TRILOGY"></book>
</books>