Как запустить Nivo Slider в ajax-загруженном контенте?
У меня возникают проблемы при запуске слайдера Nivo, когда страница, содержащая его, была загружена ajax.
Вот HTML
<div class="work">
<img class="introPic" src="images/thumb.jpg" width="250" height="99" />
<h3><img class="arrow" src="images/arrow_open.gif" alt=">" /> <a class="titlelink" href="testcontent4.html" rel="address:testcontent4.html">Nivo Slider Project</a></h3>
<div class="projectIntro">
<p>This is some intro text for Nivo Slider Project</p>
</div>
<div class="pictures"></div>
</div>
Вот jQuery
$(function(){
function close_other() {
var selected_work = $('.selected_work');
selected_work.children('.pictures').empty();
$('.selected_work img.arrow').attr("src", "images/arrow_open.gif");
selected_work.removeClass("selected_work");
}
$('div.work a').click(function(e) { e.preventDefault(); });
$('div.work').bind('click', function() {
$('html,body').animate({ scrollTop: $(this).offset().top }, 500);
var href = $(this).find('a').attr('href'),
lastPart = href.split('/'),
hash = lastPart[lastPart.length - 1];
window.location.hash = hash;
var parent = $(this);
var content_holder = parent.children(".pictures");
if (parent.hasClass("selected_work")) {
close_other();
return;
}
close_other();
parent.addClass("selected_work");
content_holder.load(href + ' #ajaxContent', function() {
$(this).find('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
animSpeed:300,
pauseTime:4000,
controlNav:true,
pauseOnHover:true //Stop animation while hovering
});
});
$('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
});
});
Вот живая демонстрация:http://www.spiritlevel.co.uk/clicktest/divclicknivotest.html "Nivo Slider Project" - это то, что я хочу получить ...
Возможно, я делаю что-то не так, поскольку я новичок в jQuery, поэтому буду признателен за любую помощь, которую вы можете оказать.
Большое спасибо.