Binding the headertext, paragraph text, and a button with the each Image using XML
===

I am trying to bind a header text,paragraph text and a button with each Image using XML.
So each image should hold one header text, one paragraph text and one button that should bind data from XML.

So with each Image the header text,paragraph text and button should also be fade in and fade out.
And the button should have the call back of that particular image to which it belongs.



**HTML**

    

    <div id="panel">
        <img id="imageSlide" alt="" src="" width="250px" />
        <h2> </h2>
        <p></p>
    <button>Learn More</button>
        </div>

**Jquery**

        $(function() {
        //Local XML Data
        var slideXML = "<rss version='2.0'><channel>";
        slideXML += "<title>IMAGES</title>";
        slideXML += "<images>";
        slideXML += "<image>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</image>";
        slideXML += "<image>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</image>";
        slideXML += "<image>http://www.behok.ru/i/a/cat/gerbera.jpg</image>";
        slideXML += "<image>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</image>";
        slideXML += "<image>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</image>";
        slideXML += "</images>";
        slideXML += "</channel></rss>";
    
        //Parse XML content
        var xmlDoc = $.parseXML(slideXML);
        var $xmldata = $(xmlDoc);
    
        //Find Total No of Image
        var maximages = ($xmldata.find("images").find("image").length);
    
    
        $(function() {
            //FadeIn/FadeOut Image on Set Time Interval on Slide
            setInterval(Slider, 2500);
        });
    
        var prevIndex = 0;
    
        function Slider() {
            $('#imageSlide').fadeOut("slow", function() {
                var shuffleIndex = Math.round((Math.random() * (maximages - 1)));
                if (prevIndex == shuffleIndex) {
                    if (prevIndex >= (maximages - 1)) {
                        shuffleIndex--;
                    } else {
                        shuffleIndex++;
                    }
                }
                prevIndex = shuffleIndex;
                $("#panel").fadeIn("slow").css('background', '#000');
    
                var imgurl = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").text();
                $(this).attr('src', imgurl).fadeIn("slow");
            });
        }
    });