Decrease Font Size
Increase Font Size

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


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.

JQuery Slideshow


<script type="text/javascript">
    var myArray = []; //declare and initialize array
10082009 BT
Read the slides info into an array from XML and assign the array variable to
the simple slide show.
    $(document).ready(function() {
            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); 
                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)

Sample XML contents

<?xml version="1.0" encoding="iso-8859-1"?>
    <alt>Amazon :: Books</alt>