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

Question

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

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

Это мой (его) код.

Глава

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

тела

<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. Любая помощь приветствуется!

Answer 1

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

Я столкнулся с той же проблемой, когда мне пришлось использовать две версии 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'); 

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