Hi all,

I am trying to create a JQuery based slider using ajax to load images url from a xml file and then creating a html li list dynamically.

Till now I am able to append and create DOM structure using Jquery. But I am not able to access the dynamically created list. I have also tried custom events using bind but not able to successfully implement it.

Following is my jquery plugin code:

(function($){  
$.fn.genie = function(options) {  

    var genie_dom = "<div class='genie_wrapper'><ul class='genie'></ul></div>";
    var o, base;
    var genie_styles = "<style>.genie_wrapper{overflow:hidden}.genie{position: relative;margin:0;padding:0}.genie li {position: absolute;margin:0;padding:0}</style>";
    var defaults = {  
        width : '960px',
        height : '300px',
        background_color : '#000000',
        xml : 'genie.xml',
        speed : 1000,
        pause: 1000
    };

    base = $(this);
    o = $.extend(defaults, options);

    return this.each(function() {
        create_elements();
    });

    function create_elements() {
        $(base).html(genie_dom);
        $('head').append(genie_styles);
        $('.genie_wrapper').css({'background-color' : o.background_color, width : o.width, height: '300px', overflow: ''});

        $.ajax({
            type: "GET",
            url: o.xml,
            dataType: "xml",
            success: function(xml) {
                var slides = $(xml).find('slide');
                var count = 0;
                $(slides).each(function(){
                    $('.genie').append('<li class="slide" id="slide'+count+'"><img src="' + $(this).text() + '" /></li>');
                    $('.genie li:last').css({'z-index' : count});
                    count++;
                });
            }
        });

    }

}

})(jQuery);

In my html file:

There is only one empty div to which I am calling my plugin like

$(document).ready(function() {  
    $('.slideshow').genie();
});

I have also tried using following everywhere in JS:

    $(".slide").bind("start_animation", function(e){
    $(this).fadeOut(1000);
    alert($(this).html());
});

$(".slide").trigger("start_animation");

I want to animate li list using animate function, Can anyone please tell me how to implement it...

It would be of great help...

Regards, Neeraj Kumar

EDIT: Can Anyone help me out please????