Vincular el texto del encabezado, el texto del párrafo y un botón con cada imagen usando XML

Estoy tratando de vincular un texto de encabezado, texto de párrafo y un botón con cada imagen usando XML. Por lo tanto, cada imagen debe contener un texto de encabezado, un texto de párrafo y un botón que debe vincular datos de XML.

Entonces, con cada imagen, el texto del encabezado, el texto del párrafo y el botón también deben aparecer y desaparecer gradualmente. Y el botón debe tener la devolución de llamada de esa imagen en particular a la que pertenece.

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");
        });
    }
});

preguntado el 31 de julio de 12 a las 11:07

¿A dónde se supone que lleva el botón? -

@ Christopher: Hola, ¿puede por favor organizar su guión en mi guión? No puedo vincularlo. -

todo se suma en la parte inferior -

1 Respuestas

Cambia tu XML a algo como esto

<rss version='2.0'>
    <channel>
        <title>IMAGES</title>
        <images>
            <image id="1">
                <src>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="2">
                <src>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="3">
                <src>http://www.behok.ru/i/a/cat/gerbera.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="4">
                <src>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>
            </image>
            <image id="5">
                <src>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</src>
                <text>
                    <![CDATA[
                        <h2>Foo</h2>
                        <p>Stuff</p>
                    ]]>
                </text>
                <callback>Button Callback stuff</callback>  
            </image>
        </images>
    </channel>
</rss>

Luego, después de eso, su JavaScript contendría todas las variables como esta

        var currentImage = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")");
        var imgurl = currentImage.find("src").text();
        var imgText = currentImage.find("text").text();
        var imgButton = currentImage.find("callback").text();

y HTML

<div id="panel">
<img id="imageSlide" alt="" src="" width="250px" />
<div id="text">
    <!-- changed to all encompassing div -->
</div>
<button>Learn More</button>
</div>

en general, combinando todo esto, todo el script se vería así

$(function() {
slideXML = "<rss version='2.0'>";
slideXML += "<channel>";
slideXML += "       <title>IMAGES</title>";
slideXML += "       <images>";
slideXML += "           <image id='1'>";
slideXML += "               <src>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='2'>";
slideXML += "               <src>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='3'>";
slideXML += "               <src>http://www.behok.ru/i/a/cat/gerbera.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='4'>";
slideXML += "               <src>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>";
slideXML += "           </image>";
slideXML += "           <image id='5'>";
slideXML += "               <src>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</src>";
slideXML += "               <text>";
slideXML += "                   <![CDATA[";
slideXML += "                       <h2>Foo</h2>";
slideXML += "                       <p>Stuff</p>";
slideXML += "                   ]]>";
slideXML += "               </text>";
slideXML += "               <callback>Button Callback stuff</callback>  ";
slideXML += "           </image>";
slideXML += "       </images>";
slideXML += "   </channel>";
slideXML += "</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 currentImage = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")");
            var imgurl = currentImage.find("src").text();
            var imgHeader = currentImage.find("text").text();
            var imgButton = currentImage.find("callback").text();
            $(this).attr('src', imgurl).fadeIn("slow");
            $("#text").html(imgHeader);
            $("#panel button").text(imgButton);
        });
    }
})

Respondido 02 ago 12, 12:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.