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????
