解析XML Feed以显示Nivo滑块的图像

时间:2014-04-29 15:50:27

标签: javascript jquery xml slider nivo-slider

我和我的老板一起工作并试图制作一张他很容易更新的幻灯片。 XML似乎是完美的实现。我所做的是创建一个XML文件,将jQuery解析为#slider div。然后Nivo将拾取这些图像并显示它们。然而,似乎NivoSlider在实际解析之前加载,因此Nivo没有检测到这些图像(即使使用Firebug,你可以告诉它们在那里)。有没有办法延迟加载NivoSlider,直到这个信息被解析?在我开始修复此错误之前,有50%的时间Nivo会检测到图像,然后另一半则不会...你可以看到这里发生了什么:http://snowtailcreative.com/domains/portfolio/xml/

XML:

<news>
    <entry>
        <slider>true</slider>
        <title>Computer Science Wins Again</title>
        <department>Computer Sience</department>
        <image>images/up.jpg</image>
        <link>http://www.google.com</link>
    </entry>
</news>

JavaScript的:

// XML Parser
function parseXML() {

    // Get XML File
    $.get('example.xml', function(xml){

        // Loop Through Each Entry in XML
        $(xml).find('entry').each(function(){

            // Declare Variables
            var entry = $(this);
            var type = entry.find('slider').text();
            var title = entry.find('title').text();
            var department = entry.find('department').text();
            var image = entry.find('image').text();
            var link = entry.find('link').text();

            // Sort Through Item Types
            if(type == 'true'){
                var slider = '<a href="' + link + '"><img src="' + image + '" title="' + title + '" alt="' + department + '" /></a>';
            }
            if(type == 'false'){
                var archive = '<h2>' + department + '</h2><p>' + title + '</p><a href="' + link + '">Read More</a>';
            }

            // Append Data
            $("#archive").append(archive);
            $("#slider").prepend(slider);

        });

    });

}

$.when( parseXML() ).done(function(){
         $('#slider').nivoSlider();
    });

0 个答案:

没有答案