Nivo Slider - как вызвать слайдер после загрузки контента AJAX - PullRequest
Новая
       9

Nivo Slider - как вызвать слайдер после загрузки контента AJAX

0 голосов
/ 29 марта 2012

Мой код: 

<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 будет загружен? Потому что, иногда это работает, иногда нет .. это зависит от обновлений браузеров. При первом посещении страницы ползунок не отображается, после обновления и загрузки содержимого ajax, отображается нормально.

Так что мне нужно сделать что-то вроде подождать, пока запрос ajax не будет завершен, и затем вызвать ползунок. Я попытался добавить: jQuery(document).ajaxComplete(function{ "here my code" });

Но это не работает. Я использую его с функциями PHP, поэтому у меня есть вызов слайдера в функции PHP поэтому функция вызывает код jQuery и HTML-код слайдера и параметра of function - это имя элемента id, например, "zone933". PHP работает правильно; если я использую простые изображения или изображения со ссылками, это прекрасно работает. Я не работаю должным образом, только использую ajax load.

1 Ответ

0 голосов
/ 29 марта 2012

Попробуйте что-то вроде этого: 

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