партнер компании 1с-битрикс
сайт фрилансера Сергея Эстрина
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Простой адаптивный форум - модуль для битрикс
Существует множество всевозможных лайтбоксов, фансибоксов и других плагинов для показа фотографий во всплывающих окнах. Богатый функционал, множество опций, цветовые схемы, поддержка старых браузеров и даже плагины для плагинов, и... Огромный вес и почти что невозможность доработки.

В последнее время, лично я предпочитаю использовать вместо всего этого простой короткий код, который всегда легко доработать. Данный лайтбокс написан на jQueryi, и не содержит ничего лишнего. Его css адаптивен и использует современеные возможности языка.

>> Если вам нужна версия на Bitrix JS API, то она здесь

Итак:



CSS

.lightbox {
   box-sizing: border-box;
   padding: 20px !important;
   position:fixed;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:rgba(0,0,0,.7);
   z-index:15000 !important;
}
.lightbox img {
   position:absolute;
   margin:auto;
   top:0;
   left:0;
   right:0;
   bottom:0;
   max-width:80%;
   max-height:80%;
}
.lightbox-title {
   display:block;
   position:absolute;
   overflow:hidden;
   text-overflow: ellipsis;
   height: 10%;
   left:10%;
   right:10%;
   bottom:0px;
   font-size: 14px;
   line-height: 1.4;
   color: white;
   text-align: center;
}
.lightbox-close {
   display:block;
   position:absolute;
   overflow:hidden;
   height:50px;
   width:50px;
   right:10px;
   top:10px;
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   -o-transform:rotate(45deg);
   transform:rotate(45deg);
   outline: none !important;
}
.lightbox-close:before {
   content:'';
   display:block;
   position:absolute;
   height:36px;
   width:2px;
   left:24px;
   top:7px;
   background:white;
   border-radius:1px;
}
.lightbox-close:after {
   content:'';
   display:block;
   position:absolute;
   width:36px;
   height:2px;
   top:24px;
   left:7px;
   background:white;
   border-radius:1px;
}
.lightbox-prev, .lightbox-next {
   display:block;
   position:absolute;
   overflow:hidden;
   width:30%;
   top:70px;
   bottom:70px;
   outline: none !important;
}
.lightbox-prev.lightbox-inactive, .lightbox-next.lightbox-inactive {
   opacity: 0.2;
}
.lightbox-prev {
   left: 0px;
}
.lightbox-next {
   right: 0px;
}
.lightbox-prev:before,
.lightbox-prev:after,
.lightbox-next:before,
.lightbox-next:after {
   content:'';
   display:block;
   position:absolute;
   width:32px;
   height:2px;
   top:50%;
   background:white;
   border-radius:1px;
}
.lightbox-prev:before,
.lightbox-prev:after
{
   left: 16.6%;
   margin-left: -16px;
}
.lightbox-next:before,
.lightbox-next:after
{
   right: 16.6%;
   margin-right: -16px;
}
.lightbox-prev:before,
.lightbox-next:before
{
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   transform:rotate(-45deg);
}
.lightbox-prev:after,
.lightbox-next:after
{
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   -o-transform:rotate(45deg);
   transform:rotate(45deg);
}
.lightbox-prev:before,
.lightbox-next:after
{
   margin-top: -11px;
}
.lightbox-prev:after,
.lightbox-next:before
{
   margin-top: 11px;
}

JS

$.fn.extend({
   lightBox: function(){
      $(this).each(function(){
         $(this).on('click', $.proxy(function(e) {
            e.preventDefault();
            var link = this;
            var obLightBox, prev, next, title, gallery;
            if(!!$(this).data('lightbox')) 
               gallery = $('[data-lightbox="'+$(this).data('lightbox')+'"]');
            var setNavActivity = function(index) {
               if(index==0)
                  prev.addClass('lightbox-inactive');
               else 
                  prev.removeClass('lightbox-inactive');
               if(index==(gallery.length-1))
                  next.addClass('lightbox-inactive');
               else 
                  next.removeClass('lightbox-inactive');
            }
            var navigate = function(e) {
               e.preventDefault();
               var cur_index = $(gallery).index(link);
               cur_index=$(this).data('nav')=='prev'?cur_index-1:cur_index+1;
               if(cur_index<0 || cur_index>=gallery.length)
                  return;
               var img = obLightBox.find('img');
               link = gallery[cur_index];
               img.prop('src',link.href);
               title.html(link.hasAttribute('title')?link.getAttribute('title'):'');
               setNavActivity(cur_index);
            };
            obLightBox = $('<div/>')
               .addClass('lightbox')
                  .append(
                     $('<img>')
                        .attr('src',link.href)
                        .attr('alt',''))
                  .append(
                     title = $('<div/>')
                        .addClass('lightbox-title')
                        .html(link.hasAttribute('title')?link.getAttribute('title'):''))
                  .append(
                     $('<a/>')
                        .addClass('lightbox-close')
                        .attr('title',"Close")
                        .attr('href',"#")
                        .on('click',function(e){
                           e.preventDefault();
                           obLightBox.remove();
                        }))
                  .append(
                     prev = $('<a/>')
                        .addClass('lightbox-prev')
                        .addClass('lightbox-inactive')
                        .attr('title',"Previous")
                        .attr('href',"#")
                        .data('nav','prev')
                        .on('click',navigate))
                  .append(
                     next = $('<a/>')
                        .addClass('lightbox-next')
                        .addClass('lightbox-inactive')
                        .attr('title',"Next")
                        .attr('href',"#")
                        .data('nav','next')
                        .on('click',navigate));
            if(!!gallery && gallery.length>1) {
               setNavActivity($(gallery).index(link));                               
            } else {
               prev.remove();
               next.remove();
            }
            $(document.body).append(obLightBox);
         }, this));
      });
   }
});
 
$('[data-lightbox]').lightBox();

HTML

<a href="/path/to/image.png" data-lightbox="gallery1">Картинка 1 из галереи 1</a>
<a href="/path/to/image2.png" data-lightbox="gallery1">Картинка 2 из галереи 1</a>
<a href="/path/to/image3.png" data-lightbox="gallery2">Картинка 1 из галереи 2</a>
<a href="/path/to/image4.png" data-lightbox="gallery2">Картинка 2 из галереи 2</a>

Чтобы оставить сообщение, авторизуйтесь, или войдите с помощью:
Главная   ·   Модули для 1С-Битрикс   ·   Типовые услуги   ·   Форум   ·   Блог   ·   Контакты
Рейтинг@Mail.ru