如何启动NIVO滑块AJAX加载的内容?滑块、加载、内容、NIVO

2023-09-10 15:47:32 作者:转身、遗忘似水年华

我有麻烦NIVO滑块开始时已经装载了AJAX包含它的页面。

I am having trouble getting Nivo slider to initiate when the page containing it had been loaded by 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="&gt;" /> <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滑块工程是一个我想获得工作...

Here is a live demo: http://www.spiritlevel.co.uk/clicktest/divclicknivotest.html The "Nivo Slider Project" is the one I want to get working...

可能做一些基本的东西错了,因为我是新来的jQuery所以将AP preciate任何帮助,您可以给。

Probably doing something basic wrong as i am new to jQuery so would appreciate any help you can give.

非常感谢。

推荐答案

事实证明,这里的问题不是code,但(NIVO滑块的旧版本和jQuery的当前版本之间有冲突1.7.1)。当我回去的jQuery 1.4.2它的工作。然后,我更新NIVO滑块到最新版本与当前的jQuery和它也工作了。

As it turns out, the problem here was not the code, but a conflict between an older version of Nivo Slider and the current version of jQuery (1.7.1). When I went back to jQuery 1.4.2 it worked. Then I updated Nivo Slider to the latest version with the current jQuery and it also worked.