lightbox галереи, которые мне нравятся

Пишу для себя, поссле очередново перепахивания десятков лайтбоксов.
Так, памятка, чтобы сразу вспомнить, что на глаз легло.
На полноценный обзор не претендует.


VenoBox

jQuery лайтбокс плагин.

Поддерживает images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos.
Содержит разные спиннеры и + настройки.

инициализация:

$(document).ready(function(){
    $('.venobox').venobox(); 
});

демо — http://veno.es/venobox/
github — https://github.com/nicolafranchini/VenoBox


lightGallery

jQuery лайтбокс плагин.

Поддерживает images, inline contents, iFrames, Touch and Drag, Vimeo and YouTube videos, Zoom & Fullscreen.
+ доп модули thumbnails, full screen, zoom, которые можно отключить
Содержит разные анимации и + настройки.
В версии lightGallery 2.0 отвязали от jQuery

инициализация:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#lightgallery").lightGallery(); 
        });
    </script>

демо — http://sachinchoolur.github.io/lightGallery/
github — https://github.com/sachinchoolur/lightGallery


Lightcase.js

Адаптивный Lightbox based on jQuery and SASS

Поддерживает images, inline contents, iFrames, Google-Maps, Ajax form, Vimeo and YouTube videos

инициализация:

    <script type="text/javascript">
    	jQuery(document).ready(function($) {
    		$('a[data-rel^=lightcase]').lightcase();
    	});
    </script>

демо — https://cornel.bopp-art.com/lightcase/
github — https://github.com/cbopp-art/lightcase/


baguetteBox.js

Интересный lightbox написан на чистом JS.
Позволяет подгружать адаптированные под размер экрана изображения

<a href="img/2-1.jpg"
    data-at-450="img/thumbs/2-1.jpg"
    data-at-800="img/small/2-1.jpg"
    data-at-1366="img/medium/2-1.jpg"
    data-at-1920="img/big/2-1.jpg">
        <img src="img/thumbs/2-1.jpg">
</a>

Есть варианты переходов, возможность отключать кнопки, но нет поддержки видео и дургих форматов (или я не разобрался и поскакал дальше). Но если нулен просто лайтбокс, то самое то.

инициализация:

baguetteBox.run('.baguetteBoxOne');

демо — https://feimosi.github.io/baguetteBox.js/
github — https://github.com/feimosi/baguetteBox.js


Lightbox for Bootstrap

В принципе в названии все сказано. Простой, легкий jQuery лайтбокс для Bootstrap шаблонов.
Поддерживает размещение видео YouTube, Vimeo, фото из Instagram.

Инициализация:

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

демо — http://ashleydw.github.io/lightbox/
github — https://github.com/ashleydw/lightbox


PhotoSwipe

Легкий, модульный лайтбокс плагин заточенный под тач. Со слайдом, зумом и свайпом.
Спиннеры, кнопки фулскрин и соц. сеток.
Написал Dmitry Semenov, автор весьма годного RoyalSlider plugin

Инициализация:

var pswpElement = document.querySelectorAll('.pswp')[0];

// build items array
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // start at first slide
};

// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

демо — https://photoswipe.com/
github — https://github.com/dimsemenov/photoswipe


GLightbox

Пока мой выбор.
Лицензия free для опенсорс и коммерции.

Легкий лайстбокс на чистом JS. анимации, управление с клавиатуры и шаблон как я люблю с кнопками по сторонам, а не на картинке (да, я могу все перепахать, но я ленивый)

Поддерживает images, inline contents, iFrames, Google-Maps, Ajax form, Vimeo and YouTube videos.

инициализация:

<script type="text/javascript">
  const lightbox = GLightbox({ ...options });
</script>

демо — https://biati-digital.github.io/glightbox/
github — https://github.com/biati-digital/glightbox

Метки:,,

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *