by bryian
8. October 2009 21:03
Watch this Script in action/ Download
Introduction
I am using the JQuery Simple Controls Gallery from Drive DHTML (dynamic html) & JavaScript code library . One of the requirements is to read the images information from a XML file. After spending some time researching for it, I found the article Reading XML with jQuery. I have put together these two findings and include a brief explanation to it. Hope someone will find this information useful. Comments are welcome.
Implementation
<script type="text/javascript">
var myArray = []; //declare and initialize array
/*
10082009 BT
http://think2loud.com/reading-xml-with-jquery/
Read the slides info into an array from XML and assign the array variable to
the simple slide show.
*/
$(document).ready(function() {
$.ajax({
type: "GET",
url: "simplegallery_files/sites.xml", //xml file
dataType: "xml",
success: function(xml) {
var count = 0; //counter
$(xml).find('site').each(function() {
var url = $(this).find('url').text(); //url
var target = $(this).find('target').text(); //_blank, _new
var imageURL = $(this).find('imageURL').text(); //location of the image
var alt = $(this).find('alt').text(); //alternate text of the image
//append to array
myArray[parseInt(count)] = new Array(imageURL, url, target, alt);
count++;
});
var mygallery2 = new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [728, 90], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: myArray, //assing the array var to here
autoplay: [true, 10000, 99], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit: function() { //event that fires when gallery has initialized/ ready to run
},
onslide: function(curslide, i) { //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
}
});
});
</script>
Sample XML contents
<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
<site>
<url><![CDATA[https://www.amazon.com/b?node=283155&tag=asp.net.books-20&camp=0&creative=0&linkCode=ur1&adid=1F4JYCPDSWG3V5JH9GD9&]]></url>
<target>_new</target>
<alt>Amazon :: Books</alt>
<imageURL><![CDATA[https://images-na.ssl-images-amazon.com/images/G/01/associates/2006/books/34percent/us_books_728x90.gif]]></imageURL>
</site>
<site>
<url><![CDATA[http://www.mochahost.com/1160-0-1-29.html]]></url>
<target>_new</target>
<alt>MochaHost</alt>
<imageURL>http://www.mochasupport.com/aff/banners/112_728-4.gif</imageURL>
</site>
</sites>
Subscribe