jQuery Forum

Hello,
I have been trying to figure this out for a few days now and I'm stuck. I'm using a JQuery based image gallery called Galleria http://devkick.com/lab/galleria/. Its simple enough for my needs but I would like it to load the images from an xml file. With that in mind I have been trying to modify the basic demo_01.htm demo file to do just that.

1st, here is the XML:

<?xml version="1.0" encoding="utf-8"?>
<myimages>
    <myimage title="Picture 1" imageurl="/img/flowing-rock.jpg" className="">
        <description>
            info about picture 1
        </description>
    </myimage>
   
    <myimage title="Picture 2" imageurl="/img/stones.jpg" className="">
        <description>
            info about picture 2
        </description>
    </myimage>
    <myimage title="Why the long face?" imageurl="/img/ladybug.jpg" className="">
        <description>
            info about picture 3
        </description>
    </myimage>
    <myimage title="Lightning" imageurl="/img/lightning.jpg" className="active">
        <description>
            info about picture 4
        </description>
    </myimage>
    <myimage title="Lotus" imageurl="/img/lotus.jpg" className="">
        <description>
            info about picture 4
        </description>
    </myimage>
    <myimage title="Mojave" imageurl="/img/mojave.jpg" className="">
        <description>
            info about picture 4
        </description>
    </myimage>
    <myimage title="Pier" imageurl="/img/pier.jpg" className="">
        <description>
            info about picture 4
        </description>
    </myimage>
    <myimage title="Sea Mist" imageurl="/img/sea-mist.jpg" className="">
        <description>
            info about picture 4
        </description>
    </myimage>
   
</myimages>

Next is the JS code I'm using to parse the XML file. While I don't get any errors, (I'm using the firefox pluggin "Web Developer" & firebug) it's not displaying the main center image the way the demo_01 normally does.

I use this code to parse the XML:

   $(document).ready(function(){
                  var html = "";
                    $.get('images.xml', function(d){
                        $(d).find('myimage').each(function(){
                            var $myimage = $(this);
                            var title = $myimage.attr("title");
                            var description = $myimage.find('description').text();
                            var className = $myimage.attr('className');
                     if(!className) className = '';
                            var imageurl = $myimage.attr('imageurl');
                            html = '<li> <img class="'+ className + '" alt="' + description + '" src="' + imageurl + '" title=\"' + title + '\"/> </li>\n';
                            document.getElementById('img_replace').innerHTML += html;
                        });
                    });

there is more code after this that is part of the galleria, that does addclass('gallery_demo) and deals with making the thumbnails.

I'm getting no code errors when I look with the Web Developer pluggin for firefox so I'm assuming there is nothing syntacticly wrong with that code (the logic may be another issue)

in the head section there is this:

<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
   <div id="img_replace" class="gallery_demo_unstyled gallery_demo galleria"></div>
   <!-- <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li> -->
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

I have commented out the orginal code that would have loaded the images and I added the <div id="img_replace"... stuff.

You can see the results here:
http://jrstest.leftfish.com/demo_01.html
http://jrstest.leftfish.com/xmldemo_01.html

The first one is the the orginal galleria demo and the second it the same code with the added xml parser code added.. If you browse to the root you should see all the files.

Thanks in advance guys

-John