jQuery Cycle Plugin - Ошибка

Это мой первый вопрос, поэтому я постараюсь быть максимально описательным ... Я использую jQuery Cycle Plugin с Joomla. Он полностью взрывается в IE7. Хотя, похоже, он отлично работает в Chrome, я заметил следующую ошибку при проверке консоли.jQuery Cycle Plugin - Ошибка

Uncaught TypeError: Cannot read property 'cycleW' of undefined

Слайд-шоу, кажется, работает в Chrome 17.0.963.56, Firefox 9.0.1 и Safari 5.1.3. Я не тестировал его в IE8 +, так как у меня нет компьютера Windows, легко доступного для меня. Я звоню в слайд-шоу с внешним файлом JS в заголовке, как так ...

<head> 
     <script type="text/javascript" src="js/jquery.min.js" /></script> 
     <script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
     <script type="text/javascript" src="js/init.js"></script> 
</head>

Вот init.js:

$(document).ready(function() { 

    $('#slideshow').cycle({ 
     fx:  'fade', 
     speed:  '900', 
     timeout: 4000, 
     pause:  1, 
     pager:  '#nav', 
     slideExpr: 'div.slide', 
     next:  '#forward', 
     prev:  '#backward', 
    }); 

    $('#slideshow').hover(function() { 
     $("#backward").fadeIn(400); 
     $("#forward").fadeIn(400); 
    }, 
     function() { 
     $("#backward").fadeOut(300); 
     $("#forward").fadeOut(300); 
    }); 

    $('#imax').before('<ul id="nav_imax">').cycle({ 
     fx:  'scrollHorz', 
     speed:  '1000', 
     timeout: 5000, 
     pause:  1, 
     pager:  '#nav_imax', 
     slideExpr: 'div.slide', 

     // callback fn that creates a thumbnail to use as pager anchor 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>'; 
     }, 

    }); 

});

И, наконец, вот разметка. «Модулируемые» и «пользовательские» divs генерируются CMS. Однако мой слайдExpr должен обойти их, поскольку он должен быть нацелен на div с классом «слайд».

<div id="slideshow"> 
    <div id="nav"></div> 
    <a id="backward">Backward</a> 
    <a id="forward">Forward</a> 
    <div class="moduletable"> 
     <div class="custom"> 
      <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div> 
     </div> 
    </div> 
</div>

Надеюсь, я все покрыл. Если есть дополнительная полезная информация, которую я могу предоставить, сообщите мне. Спасибо!

UPDATE: Вначале я не предполагал, что я использую другое слайд-шоу с идентификатором «imax» и альтернативными параметрами на другой странице. Поскольку они не были на той же странице, я не включил ее. Однако, когда я комментирую функцию $ ('# imax'), ошибки уходят в Chrome, FF и т. Д. Слайд-шоу все еще НЕ работает в IE7 ...

Так что я думаю, что это на самом деле две проблемы ...

Вот тест ссылка: http://jsfiddle.net/V6EeS/3/

источник

2012-02-21 Patrick Appelman

Dont нагрузки JQuery с другого сервера. убедитесь, что jquery загружен сначала загрузкой/копированием и помещен в файл на вашем сервере. – ggzone

@ggzone. Это не проблема. Сначала загружается jQuery. Тем не менее, я скорректировал свою разметку, чтобы вызвать локальную версию jQuery, и я все еще получаю те же ошибки. Есть предположения? –

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

Я понял вопрос IE7. Последняя опция параметра не должна иметь запятую (,). Я не знаю, почему Chrome по-прежнему дает мне ошибку, но, по крайней мере, слайд-шоу функционирует независимо в каждом браузере.

$(document).ready(function() { 

    $('#slideshow').cycle({ 
     fx:  'fade', 
     speed:  '900', 
     timeout: 4000, 
     pause:  1, 
     pager:  '#nav', 
     slideExpr: 'div.slide', 
     next:  '#forward', 
     prev:  '#backward' // Comma has been removed 
    }); 

    $('#slideshow').hover(function() { 
     $("#backward").fadeIn(400); 
     $("#forward").fadeIn(400); 
    }, 
     function() { 
     $("#backward").fadeOut(300); 
     $("#forward").fadeOut(300); 
    }); 

    $('#imax').before('<ul id="nav_imax">').cycle({ 
     fx:  'scrollHorz', 
     speed:  '1000', 
     timeout: 5000, 
     pause:  1, 
     pager:  '#nav_imax', 
     slideExpr: 'div.slide', 

     // callback fn that creates a thumbnail to use as pager anchor 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>'; 
     } // Comma has been removed 

    }); 

});

Вот рабочая ссылка: http://jsfiddle.net/V6EeS/4/

источник

2012-02-21 22:36:27

jQuery Cycle Plugin - Ошибка

ответ

Смежные вопросы