На системах управления сайтом, так званых CMS, той же WordPress можно установить плагин, но на самописных страницах так не сделать. Поэтому данная библиотека вам может помочь. Вся библиотека это 2 файла, сам скрипт и стили CSS. Все это - baguetteBox, Страница baguetteBox на GitHub
Чтобы применить такой эффект лайтбокса для своих нужно сделать несколько шагов. Для начала убедиться, подключена ли к вашей странице библиотека jQuery. Если нет, то это нужно сделать. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Далее, сразу после библиотеки подключаем скрипт нашего lightbox для галерей. Он есть в архиве, который вы скачали, это файл - baguette.js. Его подключить можете тоже по инструкции из статьи упомянутой выше.
Так же нужно инициализировать наш скрипт. Для этого, если у вас есть файл со своими скриптами для страницы, можете добавить в него или просто в код страницы в спец тегах, в общим, как нравится. Для начала добавим простейший вариант, потом расскажу как задать настройки лайтбоксу.
//В ява среду
baguetteBox.run('.gallery');
//В html среду
<script>
jQuery(function($){
baguetteBox.run('.gallery');
});
</script>
В этой инициации мы указываем класс родительского блока, внутри которого будут ссылки с картинками. В нашем случаи это будет обычный список.
<ul class="gallery"> <li><a href="images/11.jpg"><img alt="Галерея" src="images/1.jpg"></a></li> <li><a href="images/22.jpg"><img alt="Галерея" src="images/2.jpg"></a></li> <li><a href="images/33.jpg"><img alt="Галерея" src="images/3.jpg"></a></li> </ul>
Внутри списка размещаете ссылки внутри которых изображения. Задумка такая: изображение в теге img - это миниатюра, маленькая картинка, а уже в самой ссылке указан путь к большому изображению. То бишь в нашем примере изображение 1.jpg - это миниатюра, а 11.jpg это полное.
Ну и чтобы все это работало, остался последний шаг - подключение стилей нашей библиотеки лайтбокса. В скачанном вами архиве - это файл baguette.css. Подключите его к своему сайту или скопируйте стили и перенесите в свой файл стилей. Пример подключения:
<link href="baguette.css" type="text/css" rel="stylesheet">
Не забудьте указать свой путь к файлу, если он лежит не в корне, а в какой-то папке
Вот и все. Если сделали правильно, то все должно работать. Данный скрипт имеет некоторые настройки, если вы хотите задать их, чтобы настроить эффект увеличения для просмотра галереи.
Если решили задавать опции, то инициализация будет немного другой, ее код уже таков
baguetteBox.run('.gallery', {
//Сюда опции
});
У скрипта есть следующие опции, укажу основные, ознакомится всеми можно на странице самого скрипта на GitHub (Ссылка указана в начале статьи).
- buttons: false, - По умолчанию true. Этот параметр отключает показ кнопок для перелистывания изображений, например, если вы хотите, чтобы показывались только по одному.
- fullScreen: true, - По умолчанию false. Этот параметр включает показ галереи в полно экранном режиме. Поверх браузера.
- noScrollbars: true, - По умолчанию false. Этот параметр отключает показ скролбара, полосы прокрутки на сайте, во время просмотра изображений.
- animation: 'fadeIn', - По умолчанию slideIn. Этот параметр задает вид анимации перелистывании изображений.
- async: true, - По умолчанию false. Этот параметр включает асинхронную подгрузку файлов.
Если их применять, то инициализация будет такой. Разделите параметры запятой, не забудьте!
baguetteBox.run('.gallery', {
animation: 'fadeIn',
noScrollbars: true,
buttons: false,
});
Сложного с этим скриптом не вижу ничего. Если руки растут правильно, то справитесь без проблем, к тому же на GitHub есть информация, которую тоже можно и нужно использовать.
На этом все, спасибо за внимание. 🙂
