0

Нужна помощь, хочу на сайте для галереи с фотографиями использовать этот плагин. Альтернатив не нашел и хочу использовать именно его.

Знания html и css есть + немного понимаю js , но дело в том что не могу разобраться как хотя бы подключить эту галерею .

Пробовал по инструкциям, копировал код с секции rapid start (оба варианта и с гитхаба тоже) - в итоге не получается.

Инструкция vodkabears.github.io/galereya

Сама Галерея vodkabears.github.io/galereya/demo.html

Сначала подключаю сам jquery, затем файлы js и css самого плагина и потом свой js файл с инициализацией галереи. Всегда в консоли получаю ошибку $(...).galereya is not a function Кто работал с этип плагином или разобрался, помогите, пожалуйста.

Подключение скриптов

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript" src="libs/galereya/dist/js/jquery.galereya.min.js"></script> 
<script type="text/javascript" src="js/scripts.min.js"></script> 
<link rel="stylesheet" href="css/main.min.css"> 
<link rel="stylesheet" href="libs/galereya/dist/css/jquery.galereya.css"> 

ниже в body просто

<div id="gallery"></div>

Мой js файл

$('#gallery').galereya({
    load: function(next) {
        $.getJSON('images.json', function(data) {
            next(data);
        });
    }
});
2
  • Покажите код как подключаете 24 сен 2018 в 15:06
  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="libs/galereya/dist/js/jquery.galereya.min.js"></script> <script type="text/javascript" src="js/scripts.min.js"></script> <link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="libs/galereya/dist/css/jquery.galereya.css"> ниже в body просто <div id="gallery"></div> 25 сен 2018 в 0:57

1 ответ 1

0

Какие я вижу ошибки:

  1. Стили лучше разместить перед вызовом js

  2. Ошибка

$(...).galereya is not a function

вызвана тем, что вы пытаетесь вызвать галерею до того как загрузилась страница с вашим div. Вызывать надо после загрузки страницы, обернув вызов в конструкцию

$(function() {
    ...
});

Привел рабочий пример. Правда вместо загрузки json использовал массив из двух объектов с картинками

$(function() {
  $('#gallery').galereya({
    load: function(next) {
        next([{
          lowsrc: "https://avatars.mds.yandex.net/get-pdb/1390202/b4f11282-4d7a-4833-98bd-6b592b8b447b/s375",
          fullsrc:	"https://avatars.mds.yandex.net/get-pdb/1390202/b4f11282-4d7a-4833-98bd-6b592b8b447b/s1200",
          description:	"Demo Auto",
          category:	"photography"
        },
        {
          lowsrc: "https://avatars.mds.yandex.net/get-pdb/1408921/eb6c751b-b580-4759-aa62-91313aaed782/s375",
          fullsrc:	"https://avatars.mds.yandex.net/get-pdb/1408921/eb6c751b-b580-4759-aa62-91313aaed782/s800",
          description:	"Demo Auto",
          category:	"photography"
        }]);
    }
  });
});
<html>

<head>
  <link rel="stylesheet" href="css/main.min.css">
  <link rel="stylesheet" href="http://vodkabears.github.io/galereya/css/jquery.galereya.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://vodkabears.github.io/galereya/js/jquery.galereya.min.js"></script>
</head>

<body>
  <div id="gallery"></div>
 
</body>

</html>

1
  • Спасибо за ответ. Сегодня утром на свежую голову сам разобрался, в чем была проблема. 1 - это то, что использовался js файл из стартового шаблона, который я использую. Он вызывал одну из ошибок, которая у меня так же возникала. 2 - это сам плагин. Он работает на версии jquery 1.9.1, тогда как я подключал последнюю. Щас оставил 1.9.1 все работает даже при старом порядке подключения всех доп. файлов 25 сен 2018 в 8:17

Ваш ответ

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

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