X
Заказать услугу

Эффект lightbox для галерей, скрипт увеличения изображений для галерей лендингов

Плагины и Шаблоны для Wordpress
  • 2020-02-23
  • 137 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Недавно мне попалась одна интересная библиотека, которая поможет организовать увеличения изображений для галерей, так называемый эффект lightbox. То бишь, при нажатии на миниатюру, маленькую картинку - она открывалась уже как большая для детального просмотра. Данная статья будет интересна для тех, кто верстает лендинги, посадочные страницы.

Эффект lightbox для галерей, скрипт увеличения изображений для галерей лендингов

На системах управления сайтом, так званых 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 есть информация, которую тоже можно и нужно использовать.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 1, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.