Question

I’m trying to implement the following code in a html document:

    $(function () {

               $.ajax({
                type: "GET",
                url: "/projects/img/Bathurst/PhotoGallery.xml", // location of your gallery's xml file
                dataType: "xml",
                success: function(xml) {


                    $(xml).find('img').each(function() {

                       var location = '/projects/img/Bathurst/'; // relative path to the directory that holds your images
                       var url = $(this).attr('src');
                        var alt = $(this).attr('alt');

                        $('<li></li>').html('<a href="'+location+''+url+'" rel="shadowbox"><img class="thumb" src="'+location+''+url+'" alt="'+alt+'" title="'+alt+'" /></a>').appendTo('#gallery-ul');


                    });
                    $('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery');
                }


            });
});

The code works perfectly when I use it in an external .js file, but I cant get it working when i implement it, it just renders with error in the code.

II’m I missing something and dos anyone have a suggestion to this? The reason why I need to implement it, in case some one wonderes, is that I’m building a custom webapp and the line “/projects/img/Bathurst/PhotoGallery.xml” and “/projects/img/Bathurst/” is dynamic variables.

All answers are very much appreciated! 🙂

Answer 1

The problematic line ($('<script type="text/javascript">...) is a convluted and unnecessarily complicated way to run two lines of Javascript.

You should replace it with simple method calls. (Shadowbox.clearCache(); Shadowbox.setup();)