Конфликт jquery и bootstrap 4

24 марта 2021, 14:50

Я совсем не силён в js, поэтому пользуюсь готовыми решениями.

У меня сборщик gulp, верстаю с помощью bootstrap 4. js из "коробки" используется только для навигации (гамбургера). Я хотел воспользоваться плагином fancybox для организации галереи на будущем сайте, однако ничего не получается.

Что я имею:

Файл main.min.js, который формируется сборщиком gulp.

Что я делаю:

Подключаю jquery (подключал разные версии, подключал как до файла main.min.js так и после)
Создаю html разметку, как пример:

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Запускаю скрипт в head

$(document).ready(function() {
    /* This is basic - uses default settings */
    
    $("a#single_image").fancybox();
});

Файл head.html выглядит следующим образом:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.min.css">
<title>Стартовая страница</title>
<script src="https://kit.fontawesome.com/5504bc3ed9.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
});
</script>

На выходе - галерея не работает. Изображения открываются отдельными страницами. В console вылезает следующие ошибки:

Uncaught TypeError: Cannot read property 'msie' of undefined

Uncaught TypeError: $(...).fancybox is not a function

Answer 1

Судя по всему у вас несколько ошибок:

Несоответствие версий jQuery и используемых библиотек: последний Bootstrap 4.3 требует версию jQuery >=3.3.1, а fancibox 1.3 нужна версия jQuery < 1.9
Вы цепляете к странице jQuery дважды - первый раз тегом <script>, второй раз из main.min.js. соответственно, из них двоих работать без костылей будет только одна, скорее всего та, что позже подгрузилась, но для уверенности можно в консоли DevTools выполнить код $().jquery; или $.fn.jquery, который покажет используемую версию jQuery.

Судяпо ошибке, которую вы получаете, предположу, что используется jQuery >= 1.9, т.к. свойство $.browser в котором и лежал флаг msie было удалено начиная с версии 1.9.

Возможные решения

На мой взглян, оптимальный вариант - найти другую библиотеку на замену устаревшей, уже как 9 лет, fancybox 1.3. В своем текущем проекте я использую magnific-popup, но есть множество других.
Так же, можно использовать более старую версию Bootstrap или отказаться от него совсем. Но я бы не рекомендовал использовать устаревшие библиотеки, что fancybox, что jQurey.
Ну и самое нерациональное, в рамках озвученной задачи - использовать $.noConflict(), как то так:

<!-- грузим js 1.4 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var jq_1_4 = $.noConflict(true);
</script>
<!-- грузим main.min.js, в котором старшая верися jQuery -->
<script type="text/javascript" src="/js/main.min.js"></script>
<!-- fancybox -->
<script type="text/javascript" src="/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
    jq_1_4("a#single_image").fancybox();
});
</script>