2

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

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

Что я имею:

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

Что я делаю:

  1. Подключаю jquery (подключал разные версии, подключал как до файла main.min.js так и после)
  2. Создаю html разметку, как пример:
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
  1. Запускаю скрипт в 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

введите сюда описание изображения

7
  • дайте код скрипта подключиеня fancybox ну и вызова. Очевидно что вы не там подключили или не подключили fancybox 4 июл 2019 в 10:48
  • @ВиталийШебаниц обновил стартовое сообщение 4 июл 2019 в 10:56
  • попробуйте подключить в таком порядке скрипты: jquery, fancybox, main
    – Skywave
    4 июл 2019 в 11:25
  • @Skywave не помогло) скажем, проблема решилась, но очень прошу Вас прокомментировать) 1. т.к. я использую gulp, то в файле main.js я увидел кучу импортируемых файлов, в т.ч. jquery. 2. я залез на сайт fancybox и увидел, как установить пакет через npm. Установил 3. Подключил, соответственно, fancybox. 4. Заработало... Подскажите, почему вручную не подключалось-то?( 4 июл 2019 в 11:25
  • а что находится внутри main.min.js? отключите его пока, для fancybox он не нужен вроде
    – Skywave
    4 июл 2019 в 11:27

1 ответ 1

1

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

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

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

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

  1. На мой взглян, оптимальный вариант - найти другую библиотеку на замену устаревшей, уже как 9 лет, fancybox 1.3. В своем текущем проекте я использую magnific-popup, но есть множество других.
  2. Так же, можно использовать более старую версию Bootstrap или отказаться от него совсем. Но я бы не рекомендовал использовать устаревшие библиотеки, что fancybox, что jQurey.
  3. Ну и самое нерациональное, в рамках озвученной задачи - использовать $.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>
1
  • 1
    спасибо, проблема была решена переходом на новую версию fancybox, с поддержкой более поздних версий jquery. Но ваш ответ структурировал кашу в моей голове, за что я Вам безмерно благодарен! 5 июл 2019 в 10:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.