Библиотеки JavaScript конфликтуют друг с другом - PullRequest
Новая
       33

Библиотеки JavaScript конфликтуют друг с другом

3 голосов
/ 27 июня 2010

Я работаю над сайтом моделирования для моей подруги, и она хочет большое слайд-шоу в качестве фона на сайте. Для этого я использовал галерею JonDesign, которая прекрасно подходит для этой цели и относительно легка.

Теперь, для контактной формы, я бы хотел использовать что-то в стиле Lightbox / Slimbox. Slimbox работает с Mootools, который также используется JD Gallery. К сожалению, Slimbox, похоже, конфликтует с JD Gallery, и я не могу понять, почему. Я проверил CSS на наличие конфликтов, но нет элементов с идентификатором или классом дважды. Я посмотрел на код и не сразу увидел конфликт. Я уверен, что что-то пропустил. Я не могу понять это, потому что у меня нет большого опыта работы с JavaScript, не говоря уже о Mootools или Slimbox.

Вот мой (соответствующий) код.

Head 

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>

<script type="text/javascript" src="scripts/slimbox.js"></script>

Body 

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
 timed: true,
 showArrows: false,
 showCarousel: false,
 delay: 6000,
 embedLinks: false,
 showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
            <a href="contact.php" rel="lightbox" class="menu">Contact her</a>
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
 <h3>Item 2 Title</h3>
 <p>Item 2 Description</p>
 <a href="#" title="open image" class="open"></a>
 <img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`

Насколько я могу судить, конфликт между этими строками: 

<script type="text/javascript" src="scripts/mootools.js"></script>

и 

<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>

в голове.

Я использую неизмененный код из JD Gallery и SlimBox . Любая помощь будет высоко ценится!

Ответы [ 4 ]

3 голосов
/ 27 июня 2010

Единственная проблема, которую я вижу, это дополнительная запятая в конце параметров галереи: 

var myGallery = new gallery($('myGallery'), {
    ...
    showInfopane: false, <--- Right Here
});

По крайней мере, Firefox и Chrome игнорируют конечную запятую, но это синтаксическая ошибка в Internet Explorer.После того, как я это исправил, ваш код работал нормально для меня в Chrome, Firefox и IE.

Как и Анураг, упомянутый в комментариях, вы включаете MooTools дважды.Это не вызвало у меня никаких проблем, но вы можете удалить скрипт scripts/mootools.js, и он все равно должен работать.

1 голос
/ 27 июня 2010

Хорошо, сейчас работает.Вот что происходит: я убрал лишнюю запятую в соответствии с предложением Мэтью Крамли (+1).По словам Анурага, я проверил инструмент разработчика Chrome (я полностью забыл об этом - работает поздно = плохо.) Он не показал никаких ошибок.Затем я заново загрузил файлы SlimBox и попробовал демо, которое не сработало.Затем я заметил, что SlimBox имел две папки с файлами SlimBox JS: js и src.js - это правильная папка с правильной библиотекой, src не работает по любой причине.Я изменил веб-сайт, чтобы использовать файл из папки js, и теперь он работает.

Итог: в конце концов, никакого конфликта сценариев нет, SlimBox был распространен странным образом.Спасибо всем за помощь!

1 голос
/ 27 июня 2010

В JQuery вы можете выбрать новое имя для функции JQuery, чтобы избежать конфликтов с другими библиотеками, например, Прототип. Mootools может поддерживать нечто подобное.

0 голосов
/ 06 июня 2014

Я столкнулся с той же проблемой, когда мне пришлось использовать две версии jquery на одной странице. 

<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);  
</script>

И затем вы можете ссылаться на вашу другую версию jquery, используя что-то вроде этого: 

var $noborders = $jq('.noborders');

Я надеюсь, что что-то подобное решит и вашу проблему.

...