Конфликт слайдера jquery и nivo

Я пытаюсь запустить слайдер nivo на сайте joomla 2.5, а также в пользовательском модуле html + php, где мне нужно поместить средство выбора даты.

В пользовательский модуль я вставляю этот код:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<?php
/* Here the code for the module */

Слайдер Nivo вставляет этот HTML-код:

<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#vt_nivo_slider196').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
...
});
});
</script>

Таким образом, с этим кодом я не вижу календарь (выбор даты), а ползунок nivo не работает (показывается только пробел).

Если я удалю строку jQyery.noConflict(); в коде ползунка nivo я вижу календарь (выбор даты), но слайдер nivo по-прежнему не работает (показывается только пробел).

Если я удалю строку со сценарием type="text/javascript" src="js/jquery-1.4.2.min.js">, то я увижу, что слайдер nivo работает, но я не вижу календарь (выбор даты).

В datepicker.js у меня есть $(document).ready(function() { $(function() { ('#linkedDatepicker')... больше кода и (function($){$.extend($.ui, {datepicker:{версия:"1.7.2"}});var PROP_NAME="datepicker";функция Datepicker(){ ... больше кода

Кажется, это конфликт с JQuery, но я не знаю, как его решить.

Любая помощь высоко ценится.!


person Cesar    schedule 06.02.2014    source источник


Ответы (2)


Согласно веб-сайту NivoSlider, требуется jQuery 1.7+.

Обновите свою версию jQuery и, в конечном итоге, версию datepicker, и все должно быть в порядке.

NB: jQyery.noConflict(); только в том случае, если вы используете другую библиотеку javascript одновременно с jQuery.

person Skwal    schedule 06.02.2014
comment
Спасибо за ответ. Я пытался обновить с помощью src=js/jquery-1.8.3.js›, но что-то не так, так как слайдер nivo показывает только пустое место. Поскольку в datepicker.js есть собственный код, например $(document).ready(function() { $(function() { ('#linkedDatepicker') интересно, не конфликтует ли он с ползунком nivo. Я пробовал также обновить код jquery datepicker, но, похоже, это не решает проблему. - person Cesar; 06.02.2014
comment
@user3279618 user3279618 У вас есть ошибка в консоли? Можно ли где-то увидеть результат? - person Skwal; 06.02.2014

Спасибо Скаваль за ответ.

Не уверен в том, что происходит, но, похоже, это решено после многих испытаний. Я думаю, что это может помочь кому-то с похожими проблемами, поэтому вот шаги, которые я выполнил:

1) Удалить вызов jquery-1.4.2.min.js в коде модуля, теперь вызывается только datepicker.js

2) В datepicker.js

2.1) Раньше у меня было $(document).ready(function() { $(function() { ('#linkedDatepicker') ... больше кода, теперь заменил все символы $ в коде цепочкой jQuery, так что теперь код выглядит как jQuery(document).ready(function() { … больше кода

Я не знаю почему, но кажется, что $ что-то не так.

2.2) У меня было раньше (function($){$.extend($.ui,{datepicker:{version:"1.7.2"}});var PROP_NAME="datepicker";function Datepicker(){ ... подробнее код, теперь заменен новой версией средства выбора даты, загруженной с сайта JQuery.jquery-ui-1.9.2.custom.min.js добавлена ​​замена кода ранее (добавлен код al из jquery-ui-1.9.2.custom.min.js включает : jquery.ui.core.js, jquery.ui.datepicker.js). Теперь код начинается с function(e,t){function i(t,i){var ... больше кода

Последняя проблема заключалась в том, что визуализация календаря становилась фоном изображения слайдера nivo. Решено изменением datepicker.css добавлением правила z-index: #ui-datepicker-div { width: 180px; z-индекс: 50 !важно;}

person Cesar    schedule 07.02.2014