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