Decrease Font Size
Increase Font Size
   BLOG

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.

JQuery Slideshow

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>

Comments (35) -

  • scratch and dent

    9/3/2009 4:55:14 PM |

    good post Thank for sharing

  • get pregnant fast

    12/3/2009 12:21:23 PM |

    I like this post very much I like to use on my blog.

  • Forex Trading

    12/4/2009 9:58:26 AM |

    Thanks for the share very usefull.

    Regards
    -logon2future

  • Full Tilt Rakeback

    12/14/2009 7:33:44 PM |

    I was pretty confused about using Jquery properly but this has helped alot.  Thanks, and please continue to make new tutorials.  Btw that slideshow is pretty sweet.

  • dstarlight

    12/22/2009 1:55:13 AM |

    an interesting ... Smile

    still learning
    Ace dstarlight

  • backlinks

    12/22/2009 11:21:57 AM |

    Thanks very much for the information. I have been searching for this for awhile with Google and it has been a real chore.


  • peninggi badan

    12/24/2009 3:30:35 AM |

    I was very confused with JQuery ....
    but after I found your article, I became was easy ....
    I think you are a professional ...
    thanks ..
    I am waiting for your other articles ...

  • Travel News

    12/26/2009 12:22:13 AM |

    very interesting technique, thanks for share

  • Travel News

    12/26/2009 12:46:22 AM |

    nice engine cms!

  • home loan calculator

    12/26/2009 12:34:18 PM |

    Awesome post! Interesting info to know.

  • Free iPhone

    12/28/2009 6:29:34 AM |

    Well that settles it.
    I was going to use jQuery for another project but that just baffled the hell out of me so i'll look for another solution Wink
    Oh woe is me Laughing

    Thanks for the 'useful' information Wink

  • batu permata

    1/5/2010 8:23:46 PM |

    great solution
    I've long search for the article as you write this
    and all were very helpful
    I will continue to visit your blog

  • Astaga.com lifestyle on the net

    1/7/2010 3:11:05 AM |

    I think you are really an expert in writing unique blog. I am crazy about your thoughts.

  • screen printing printers

    1/8/2010 4:12:09 AM |

    I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.

  • rocket spanish

    1/8/2010 11:02:55 PM |

    Learning spanish is not only going to earn you some course credits, but many people do not realize the potential buyers and sellers they can make through the use of a common language!

  • rocket spanish

    1/9/2010 2:04:14 AM |

    Learning spanish is not only going to earn you some course credits, but many people do not realize the potential buyers and sellers they can make through the use of a common language!

  • japan

    1/10/2010 6:07:53 PM |

    Hi,


    Really appreciate this post. It’s hard to sort the good from the bad sometimes, but I think you’ve nailed it!

  • leslie

    1/17/2010 3:34:52 AM |

    Great post.

  • Brown Leathers

    1/17/2010 2:11:11 PM |

    I just know I'm glad there are smart geeks out there to make life easier for the rest of us. Thanks!

  • Jamie

    1/19/2010 3:05:16 AM |

    Interesting post Smile

  • Dent Masters

    1/24/2010 11:44:00 PM |

    I just saved your blog to my favorites! Just forwarded it to some of my employees. Thanks again for another great post. http://www.dentmasters.biz

  • writing essay

    1/27/2010 4:17:48 PM |

    Thanks for providing us an easy solution. At least we don't have to waste more time researching it.

  • fathers day gifts

    2/5/2010 3:45:35 PM |

    Sharing this knowledge will surely help those who are newbies and also the experts. The saying "two heads are better than one" is noticeable here.

  • Svensk Fondservice

    2/8/2010 9:27:09 AM |

    I never imagine that JQuery slideshow can apply with XML. Thanks for sharing the codes..I really appreciate it.

  • Julio

    2/11/2010 8:06:03 AM |

    Thanks this post help me a lot.

  • non recourse debt

    2/12/2010 7:21:09 PM |

    This blog looks really good. Thanks for providing all this information for free.

  • Mousse Coiffante

    2/13/2010 9:12:12 PM |

    Thanks for Sharing the Infos!

  • best self tanner

    2/14/2010 7:29:28 PM |

    What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. Feel free to visit my best self tanner review site.

  • Peru Luxury Travel

    2/18/2010 7:50:28 AM |

    I would like to thank you for your efforts you've created in crafting this report. I am hoping the same finest operate from you inside upcoming as nicely.Genuinely the blogging is spreading its wings rapidly. Your write up is often a good example of it.

  • nowGoogle.com Adalah Multiple Search Engine Popular

    2/23/2010 6:25:42 AM |

    JQuery is great code

  • Sole Treadmills

    5/24/2010 11:15:53 PM |

    Thanks for the code, it helped me out.

  • marriage compatibility test

    11/17/2010 7:39:20 AM |

    I was very confused about using Jquery correctly but this information has helped a lot. Thanks again and please continue to make new tutorials. Plus the slide show shows some very interesting techniques.

  • Ron Spenser

    12/22/2010 1:26:46 AM |

    I have used JQuery Simple Controls Gallery also and your summary is really helpful for those having trouble.

  • robotic vacuum cleaner

    12/27/2010 8:16:07 AM |

    These are the most valuable post I have collected. I have bookmarked this post. regards,

  • Goal Setting

    1/9/2011 1:42:02 AM |

    Thanks for the tutorial! I've been struggling with Jquery but was glad to see this breakdown done so simply. Cheers.

Pingbacks and trackbacks (2)+

Add comment

Loading