Nivo Slider-加载AJAX内容后如何调用滑块 [英] Nivo Slider - how to call slider after AJAX content load

问题描述

我的代码:

<script type="text/javascript">
 jQuery(window).load(function() {
  jQuery('#slider02').nivoSlider({
   controlNav: true,
   effect: 'boxRainGrow',
   animSpeed: 1500,
   pauseTime: 8000  
  });
 });
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
   <script type="text/javascript">
    jQuery('#zone933').load('/content.phtml);
   </script>
  </span>
 </div>
</div>

如何使Nivo Slider等到ajax内容被加载? 因为，有时它有时起作用，但有时不起作用..它取决于浏览器的刷新. 页面的首次访问未显示Slider，刷新和Ajax内容加载后， 它显示确定.

How to make Nivo Slider waits until the ajax content will be loaded? Because, sometimes it works sometimes not.. it depends on refreshes of browsers. The first visit of page doesn't display the Slider, after refresh and ajax content load, it displays is OK.

因此，我需要做一些类似的事情，直到ajax请求完成，然后再调用Slider. 我尝试添加: jQuery(document).ajaxComplete(function{ "here my code" });

SO i need to do something like wait until the ajax request is completed and than call the Slider. I have tried to add: jQuery(document).ajaxComplete(function{ "here my code" });

但是它不起作用. 我在PHP函数中使用它，所以我在PHP函数中调用了Slider 因此该函数正在调用滑块和参数的jQuery代码和html代码 功能的名称是元素ID的名称，例如"zone933". PHP可以正常工作；如果我使用简单图像或带有链接的图像，则效果很好. 仅使用ajax加载我无法正常工作.

But it doesn't work. I am using it with PHP functions so I have the calling of slider in PHP function so the function is calling the jQuery code and html code of slider and the parameter of function is the name of element id for example "zone933". The PHP works correctly; if I use simple images or images with links it works perfect. I doesn't work properly only I use ajax load.

推荐答案

尝试如下操作:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#zone933').load('/content.phtml', function () {
        jQuery('#slider02').nivoSlider({
            controlNav: true,
            effect: 'boxRainGrow',
            animSpeed: 1500,
            pauseTime: 8000  
        });
    });
});
</script>

<div class="slider-wrapper theme-default">
 <div id="slider02" class="nivoSlider">     
  <span id="zone933">
  </span>
 </div>
</div>

这篇关于Nivo Slider-加载AJAX内容后如何调用滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！