партнер компании 1с-битрикс
сайт фрилансера Сергея Эстрина
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Универсальная галерея - модуль для битрикс
Существует множество всевозможных лайтбоксов, фансибоксов и других плагинов для показа фотографий во всплывающих окнах. Богатый функционал, множество опций, цветовые схемы, поддержка старых браузеров и даже плагины для плагинов, и... Огромный вес и почти что невозможность доработки.
[spoiler]
В последнее время, лично я предпочитаю использовать вместо всего этого простой короткий код, который всегда легко доработать. Данный лайтбокс написан на битрикс js api, что делает особенно уместным его использование в админке (или битрикс 24). Jquery версия будет чуть позже. Данный лайтбокс адаптивен и использует возможности современного CSS.

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

Итак:



CSS


.lightbox {

   
box-sizingborder-box;
   
padding20px !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-overflowellipsis;
   
height10%;
   
left:10%;
   
right:10%;
   
bottom:0px;
   
font-size14px;
   
line-height1.4;
   
colorwhite;
   
text-aligncenter;
}
.
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);
   
outlinenone !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;
   
outlinenone !important;
}
.
lightbox-prev.lightbox-inactive, .lightbox-next.lightbox-inactive {
   
opacity0.2;
}
.
lightbox-prev {
   
left0px;
}
.
lightbox-next {
   
right0px;
}
.
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
{
   
left16.6%;
   
margin-left: -16px;
}
.
lightbox-next:before,
.
lightbox-next:after
{
   
right16.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-top11px;
}

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 
obLightBoxprevnexttitlegallery;
            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<|| cur_index>=gallery.length)
                  return;
               var 
img BX.findChild(obLightBox, { tag'img' });
               
link gallery[cur_index];
               
BX.adjust(img, { props: { srclink.href } });
               
BX.adjust(title, { htmllink.hasAttribute('title')?link.getAttribute('title'):'' });
               
setNavActivity(cur_index);
            };
            
obLightBox BX.create({
               
tag'div',
               
props: { className'lightbox' },
               
events: {}, 
               
children: [
                  
BX.create({
                     
tag'img',
                     
props: { srclink.href },
                     
events: {}
                  }),
                  
title BX.create({
                     
tag'div',
                     
props: { className'lightbox-title' },
                     
htmllink.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: {
                        
clicknavigate
                     
}
                  }),
                  
next BX.create({
                     
tag'a',
                     
props: { className'lightbox-next lightbox-inactive'title"Next"href"#" },
                     
attrs: { 'data-nav''next' },
                     
events: {
                        
clicknavigate
                     
}
                  })                        
               ]
            });
            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>

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