JQuery slideshow with XML

Simple Gallery with jQuery |

JQuery Simple Controls Gallery |

JQuery slideshow |

JQuery simplegallery.js |

JQuery Image Gallery with XML

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>