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

В последнее время, лично я предпочитаю использовать вместо всего этого простой короткий код, который всегда легко доработать. Данный лайтбокс написан на битрикс js api, что делает особенно уместным его использование в админке (или битрикс 24). Jquery версия будет чуть позже. Данный лайтбокс адаптивен и использует возможности современного CSS.

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

Итак:



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

 BX.ready(function(){

   var lightBox = BX.proxy(function(){
      var links = BX.findChildren(
         document,
         function(el){ 
            return (
               !!el.tagName 
               && el.hasAttribute('data-lightbox') 
            ); 
         },
         true
      );
      for(var i in links) {
         BX.bind(links[i], 'click', BX.proxy(function(e) {
            e.preventDefault();
            var link = BX.proxy_context;
            var obLightBox, prev, next, title, gallery;
            if(!!link.getAttribute('data-lightbox')) gallery = BX.findChildren(
               document,
               function(el){ 
                  return (
                     !!el.tagName 
                     && el.getAttribute('data-lightbox')==link.getAttribute('data-lightbox')
                  ); 
               },
               true
            );
            var setNavActivity = function(index) {
               if(index==0)
                  BX.addClass(prev,'lightbox-inactive');
               else 
                  BX.removeClass(prev,'lightbox-inactive');
               if(index==(gallery.length-1))
                  BX.addClass(next,'lightbox-inactive');
               else 
                  BX.removeClass(next,'lightbox-inactive');
            }
            var navigate = function(e) {
               e.preventDefault();
               var cur_index = BX.util.array_search(link,gallery);
               cur_index=BX.data(this,'nav')=='prev'?cur_index-1:cur_index+1;
               if(cur_index<0 || cur_index>=gallery.length)
                  return;
               var img = BX.findChild(obLightBox, { tag: 'img' });
               link = gallery[cur_index];
               BX.adjust(img, { props: { src: link.href } });
               BX.adjust(title, { html: link.hasAttribute('title')?link.getAttribute('title'):'' });
               setNavActivity(cur_index);
            };
            obLightBox = BX.create({
               tag: 'div',
               props: { className: 'lightbox' },
               events: {}, 
               children: [
                  BX.create({
                     tag: 'img',
                     props: { src: link.href },
                     events: {}
                  }),
                  title = BX.create({
                     tag: 'div',
                     props: { className: 'lightbox-title' },
                     html: link.hasAttribute('title')?link.getAttribute('title'):'',
                  }),
                  BX.create({
                     tag: 'a',
                     props: { className: 'lightbox-close', title: "Close", href: "#" },
                     events: {
                        click: function(e) {
                           e.preventDefault();
                           BX.remove(obLightBox);
                        }
                     }
                  }),
                  prev = BX.create({
                     tag: 'a',
                     props: { className: 'lightbox-prev lightbox-inactive', title: "Previous", href: "#" },
                     attrs: { 'data-nav': 'prev' },
                     events: {
                        click: navigate
                     }
                  }),
                  next = BX.create({
                     tag: 'a',
                     props: { className: 'lightbox-next lightbox-inactive', title: "Next", href: "#" },
                     attrs: { 'data-nav': 'next' },
                     events: {
                        click: navigate
                     }
                  })                        
               ]
            });
            if(!!gallery && gallery.length>1) {
               setNavActivity(BX.util.array_search(link,gallery));                     
            } else {
               BX.remove(prev);
               BX.remove(next);
            }                  
            BX.append(obLightBox,document.getElementsByTagName("BODY")[0]);
         }, this));
      }
      return false;
   },this);
   
   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