Как подключить jquery плагин galereya?

160

12 января 2019, 08:40

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

Знания 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);
        });
    }
});

Answer 1

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

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

$(...).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>