jQuery Карусель не работает по назначению

Question

Я реализовал карусель jQuery на сайте Wordpress с запросами на страницу AJAX. Теперь карусель работает на этой странице:

working gallery

Но не открывая страницу с просьбой AJAX.

not working gallery

Как я могу исправить эту проблему?

Я получаю некоторые ошибки JavaScript

jCarousel: No width/height set for items. This will cause an infinite loop. Aborting... 

это странно, потому что с нормальной связи он работает как надо ..

Это код для вызова каруселью

<script type="text/javascript"> 
    jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'}); 
    jQuery('ul#about-jcarousel li').width(234); 
</script> 

Редактировать: Проблема решается путем добавления сценария для вызова карусели в файл js, который инициирует загрузку страницы ajax. Он работает сейчас, но каким-то образом изображения отображаются друг на друга и, изменяя размер браузера, отображаются отлично ... странно ...

Answer 1

Похоже, что вы не можете передавать изображения правильно:

Syntax error, unrecognized expression: [href=http://different-agency.com/site/gallery/] 

Я предполагаю, что у вас не должно быть скобок массива в синтаксисе, особенно без содержания кавычек.

Answer 2

Как я уже говорил ранее, изображения загружаются после карусели, поэтому карусель считает, что у него нет изображений для загрузки, когда он называется.

Вы можете проверить это, открыв консоль Firebug и работает:

jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'}); 

в командной строке. Это делает работу карусели.

Я не знаю, как вы загружаете эти изображения, но мое предложение состояло в том, чтобы сделать ajax-вызов из вашего javascript, когда страница загружена, чтобы получить изображения.

Что-то такое, как:

jQuery(document).ready(function() { 

jQuery.ajax({ 
      url: '/view/getImages', 
      type: 'GET', 
      dataType:"json", 
      contentType: 'application/json', 
      success: function (data){ 
       if (data.errorMsg){ 
        alert(data.errorMsg); 
       }else{ 
        for(i=0; i < data.images.length; i++) 
        { 
         jQuery('ul#about-jcarousel').append(li).append('<img src='+data.images[i]+'/>') 
        } 
        jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular', itemFallbackDimension: 234}); 
       } 
      } 
     }); 
} 

Есть, вероятно, проще способы сделать это, например, с использованием функции обратного вызова в зависимости от того функция загрузки ваших изображений. Если вы используете фреймворк для их загрузки, это может быть невозможно, так что это единственный ответ, который я могу дать вам, который будет работать.