Simple Bootstrap Gallery - просмотр фото на вашем сайте

Простенькая галерея похожая на Lightbox

post image

   2 года назад   0 403

Поделиться:

Simple Bootstrap Gallery - просмотр фото на вашем сайте

В общем потребовалось мне сделать просмотр картинок на сайте, чтоб ткнул и открылась картинка на весь экран. После недолгоuj гугления наткнулся на lightbox. Но разве это решение? На кой я должен оборачивать все картинки тегом <a>? Так пришла идея сделать свой просмотрщик.

Ну и собственно результат вы можете увидеть ткнув по любой картинке в этом посте. Принцип работы прост. Прописываете класс sbs-gallery и собственно все). Если у вас кропнутые картинки, а вам при нажатии надо открывать полноразмерные, то добавте атрибут data-src. Должно получиться что-то типа <img class="sbs-gallery" data-src="/bigimage.jpg" src="/smallimage.jpg" alt="pic"/>

Для работы необходимы jQuery и TouchSwipe. Шаблон сделан с использованием Bootstrap 4.1.

Ну и вот исходники. Пользуйтесь на здоровье. И благодарим, поделившись этим постом с другими)


$(document).ready(function () {
    var set = $('body').find('.sbs-gallery');
    var slide;
    $('body').on('click', '.sbs-gallery', function () {
        set = $('body').find('.sbs-gallery');
        slide = $(this);
        $('#sbs-gallery-modal').modal('show');
        setSlide(slide);
    });

    $('#sbs-slide-next').click(function () {
        var id = set.index(slide);
        if (set.length - 1 > id) {
            slide = set.filter(':eq(' + (id + 1) + ')');
        }
        else {
            slide = set.filter(':eq(0)');
        }
        setSlide(slide);
    });

    $('#sbs-slide-prev').click(function () {
        var id = set.index(slide);
        if (0 < id) {
            slide = set.filter(':eq(' + (id - 1) + ')');
        }
        else {
            slide = set.filter(':eq(' + (set.length - 1) + ')');
        }
        setSlide(slide);
    });

    $("#sbs-slide-prev,#sbs-slide-next").swipe({
        swipeLeft: function (event, direction, distance, duration, fingerCount) {
            $('#sbs-slide-prev').trigger('click');
        },
        swipeRight: function (event, direction, distance, duration, fingerCount) {
            $('#sbs-slide-next').trigger('click');
        }
    });

    function setSlide(slide) {
        var preview = $('#sbs-gallery-preview');
        var src;
        if (slide.data('src') == undefined) {
            src = slide.attr('src');
        }
        else {
            src = slide.data('src');
        }
        
        preview.stop(true, true).fadeTo(300, 0, function () {
            preview.css('background-image', "url('" + src + "')");
            if ($(slide)[0].naturalHeight > preview.height() || $(slide)[0].naturalWidth > preview.width()) {
                preview.css('background-size', 'contain');
            }
            else {
                preview.css('background-size', 'auto');
            }
            preview.fadeTo(300, 1);
        });

        $('#sbs-gallery-modal .sbs-current').html(set.index(slide) + 1);
        $('#sbs-gallery-modal .sbs-total').html(set.length);
    }
});

#sbs-slide-prev, #sbs-slide-next {
  position: absolute;
  text-shadow: 2px 2px 2px black;
  top: 0;
  bottom: 0;
  width: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  align-items: center;
  font-size: 8rem;
  color: white;
  opacity: 0.1;
  user-select: none;
  cursor: pointer; }

#sbs-slide-prev:hover, #sbs-slide-next:hover {
  opacity: 0.4; }

#sbs-slide-prev {
  left: 0;
  padding-left: 3rem; }

#sbs-slide-next {
  right: 0;
  text-align: right;
  padding-right: 3rem;
  justify-content: flex-end; }

#sbs-gallery-preview {
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; }

#sbs-gallery-modal .modal-dialog {
  display: -ms-flexbox;
  display: flex;
  max-width: 95%;
  max-height: 90%;
  min-width: 95%;
  min-height: 90%;
  height: 90%;
  justify-content: center;
  align-content: space-between;
  align-items: center;
  flex-direction: column;
  -ms-flex: 1;
  flex: 1;}

#sbs-gallery-modal .modal-content {
  -ms-flex: 1;
  flex: 1; }

#sbs-gallery-modal .modal-body {
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  height: 100%; }

.sbs-gallery{
  cursor: pointer;
}
<div id="sbs-gallery-modal" class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Фото: <span class="sbs-current"></span> / <span class="sbs-total"></span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>
<div class="modal-body">
<div id="sbs-slide-prev">&lt;</div>
<div id="sbs-slide-next">&gt;</div>
<div id="sbs-gallery-preview" ></div>
</div>
</div>
</div>
</div>

 

 


Теги:  разработка  галерея

logo

Комментарии:

Оставьте комментарий первым :)

Нажимая отправить вы соглашаетесь с политикой конфиденциальности