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

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

Итак:



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


$.fn.extend({

   
lightBox: function(){
      $(
this).each(function(){
         $(
this).on('click', $.proxy(function(e) {
            
e.preventDefault();
            var 
link this;
            var 
obLightBoxprevnexttitlegallery;
            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<|| 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>

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