0

XMLを使用して、ヘッダーテキスト、段落テキスト、およびボタンを各画像にバインドしようとしています。したがって、各画像には、XMLからのデータをバインドする1つのヘッダーテキスト、1つの段落テキスト、および1つのボタンを保持する必要があります。

したがって、各画像で、ヘッダーテキスト、段落テキスト、およびボタンもフェードインおよびフェードアウトする必要があります。また、ボタンには、それが属する特定の画像のコールバックが必要です。

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

1 に答える 1

0

XMLを次のようなものに変更します

<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>

その後、JavaScriptはこのようなすべての変数を保持します

        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();

および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>​

全体として、これらすべてを組み合わせると、スクリプト全体は次のようになります。

$(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);
        });
    }
})
于 2012-07-31T12:25:50.580 に答える