Простой лайтбокс на bitrix js api

Универсальная галерея - модуль для битрикс

Существует множество всевозможных лайтбоксов, фансибоксов и других плагинов для показа фотографий во всплывающих окнах. Богатый функционал, множество опций, цветовые схемы, поддержка старых браузеров и даже плагины для плагинов, и... Огромный вес и почти что невозможность доработки.
[spoiler]
В последнее время, лично я предпочитаю использовать вместо всего этого простой короткий код, который всегда легко доработать. Данный лайтбокс написан на битрикс 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>

20.01.201719:2120.01.2017 19:21:35

<Без имени>

20.01.201719:2120.01.2017 19:21:35

Просмотров:11352 Комментариев:0

Чтобы оставить сообщение, авторизуйтесь, или войдите с помощью:

Скрыть форму

Ваше имя

Ваш E-mail*

Услуга

Информация

* - обязательные поля

Скрыть форму

При покупке любого продукта 1С-Битрикс, на Ваш внутренний счет на этом сайте начисляются средства, которые можно потратить на покупку любых модулей, компонентов, и пр. Бонусы начисляются в рублях, размер бонуса зависит от редакции продуктов 1С-Битрикс (минимальный бонус, при покупке редакции "Первый сайт" 1С-Битрикс "Управление сайтом" - 1000 р.). Кроме стандартных лицензий на ПО "Управление сайтом" и "Корпоративный портал", бонус можно получить при покупке любых других продуктов 1С-Битрикс - продлений техподдержки, переходов на более дорогую редакцию и т.д. (в данном случаем бонус рассчитывается индивидуально, обращайтесь чтобы узнать величину бонуса).

Ваш E-mail*

Редакция битрикс (выберите чтобы узнать Ваш бонус)

Дополнительная информация

* - обязательные поля

Скрыть форму

Отправить сообщение

ОБЩИЕ ВОПРОСЫ ПО МОДУЛЯМ ПИШИТЕ, ПОЖАЛУЙСТА, НА ФОРУМ
Регистрироваться на форуме необязательно, также можно войти с использованием соцсетей

Простой лайтбокс на bitrix js api

Заказать сайт или доработку

Заказать типовую услугу

Купить лицензию Битрикс

Отправить сообщение