CODEWITHSUNDEEP
jqueryhtmlajax
Singular1ty
Singular1ty

Reputation: 2615

jQuery/AJAX HTML injection and Gallery Plugins

I've been playing around with some jQuery and loading HTML from files, and have run into trouble. Basically, I want the page to extract a URL parameter, load a file that corresponds to data.html where data is the parameter value of gallery and then inject the HTML stored inside data.html into the div slider, and then have NivoSlider (a Jquery gallery) hook onto that gallery.

Everything is working fine - the parameter is found, the file is loaded, the HTML is changed (according to firebug). But the gallery just sits there idling, like it believes there is no HTML is being changed.

Here's my Jquery:

//With respect to http://www.jquery4u.com/snippets/url-parameters-jquery/
    $.urlParam = function(name){
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
            if (!results) { return 0; }
            return results[1] || 0;     
        }
    $(window).load(function() {
        //Attempt to extract the parameter for gallery.
        var album = $.urlParam('gallery');
        var path = album+ ".html";
        //Is this legit?
        if(album != 0){
            //Kick into loading the gallery.
            $("#slider").load(path);
            //Load the gallery?
            $('#slider').nivoSlider({
                effect: 'fade',
                animSpeed:0,
                directionNav: true
            });
        }else{
            path = "a.html"; //Reset path.
            $("#slider").load(path); //Load.
            //Load gallery
            $('#slider').nivoSlider({
                effect: 'fade',
                animSpeed:0,
                directionNav: true
            });

        }       
    });

And the HTML files are as simple as:

<img src="a/img1.jpg" alt=""/>
<img src="a/img2.jpg" alt=""/>

Do I need to refresh the page or something? I'm doing this all inside a localhost web server, so I know the AJAX requests are working properly, and firebug confirms that the HTML has been injected correctly.

Any thoughts? Thanks in advance!

Upvotes: 0

Views: 129

Answers (1)

Musa
Musa

Reputation: 97672

Maybe you have to wait until ajax request completes before you set up the slider.

    $("#slider").load(path, function(){
        //Load the gallery?
        $('#slider').nivoSlider({
            effect: 'fade',
            animSpeed:0,
            directionNav: true
        });
     });

Upvotes: 4

Related Questions