class Gallery {
constructor(config) {
this.container = document.querySelector(config.container);
this.items = this.container.querySelectorAll(config.item);
this.lightbox = this.container.querySelector(config.lightbox);
this.modal = this.lightbox.querySelector(config.modal);
this.config = config;
this.addCustomAttribute();
this.initEventListener();
}
addCustomAttribute() {
let next = 0;
let back = 0;
for(let i = 0; i < this.items.length; i++) {
next = i + 1;
back = i - 1;
// Caso especial del último item
if (i === this.items.length - 1) {
next = 0;
}
// Caso especial del primer item
if (i === 0) {
back = this.items.length - 1;
}
this.items[i].setAttribute('data-next_item', next);
this.items[i].setAttribute('data-back_item', back);
}
}
initEventListener() {
this.items.forEach(item => {
item.addEventListener('click', () => {
let img = this.getImg(item);
this.showLightbox(img.getAttribute('src'), item.dataset.next_item, item.dataset.back_item);
});
});
this.modal.addEventListener('click', (e) => {
let element = e.target;
if (element.classList.contains(this.config.controls.back)) {
this.changeImg(false);
} else if (element.classList.contains(this.config.controls.next)) {
this.changeImg(true);
} else if (element.classList.contains(this.config.controls.close)) {
this.lightbox.classList.remove(this.config.showLightbox);
}
});
}
getImg(item) {
return item.querySelector(this.config.galleryImgClass);
}
showLightbox(imgSrc, nextItem, backItem) {
this.lightbox.classList.add(this.config.showLightbox);
this.addImgModal(imgSrc, nextItem, backItem);
}
addImgModal(imgSrc, nextItem, backItem) {
this.modal.setAttribute('data-next_item', nextItem);
this.modal.setAttribute('data-back_item', backItem);
let imgModal = this.modal.querySelector(this.config.modalImgClass);
imgModal.setAttribute('src', imgSrc);
}
changeImg(isNext) {
let indexItem = this.modal.dataset.back_item;
if (isNext) {
indexItem = this.modal.dataset.next_item;
}
let item = this.items[indexItem];
let img = this.getImg(item);
this.addImgModal(img.getAttribute('src'), item.dataset.next_item, item.dataset.back_item);
}
}
new Gallery({
container: '.gallery',
item: '.gallery__item',
galleryImgClass: '.gallery__img',
lightbox: '.gallery-lightbox',
showLightbox: 'show',
modal: '.gallery-lightbox__modal',
modalImgClass: '.gallery-lightbox__img',
controls: {close: 'icon-close', next: 'icon-next', back: 'icon-back'}
});
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
padding: 15px;
}
.gallery {
display: grid;
grid-template-columns: auto;
grid-gap: 5px 5px;
font-size: 16px;
max-width: 1200px;
margin: auto;
}
.gallery__item {
position: relative;
cursor: pointer;
}
.gallery__img {
display: block;
max-width: 100%;
}
.gallery__item:before, .gallery__item:after {
position: absolute;
transition: all .2s;
}
.gallery__item:before {
color: #fff;
font-size: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.gallery__item:hover:before {
font-size: 1.5rem;
}
.gallery__item:after {
display: block;
content: '';
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
background-color: rgba(0 ,0 , 0, .4);
z-index: 1;
}
.gallery__item:hover:after {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.gallery__item:after, .gallery__item, .gallery__img {
border-radius: 5px;
}
.gallery-lightbox {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0 ,0 , 0, .8);
font-size: 16px;
padding: 0 15px;
display: none;
justify-content: center;
align-items: center;
z-index: 3;
}
.gallery-lightbox.show {
display: flex;
}
.gallery-lightbox__modal {
position: relative;
background-color: #fff;
padding: 5px;
max-width: 650px;
border-radius: 5px;
}
.gallery-lightbox__img {
display: block;
width: 100%;
}
.gallery-lightbox__control {
position: absolute;
cursor: pointer;
}
.gallery-lightbox__control:before {
display: block;
}
.gallery-lightbox__control.icon-close {
top: -14px;
right: -14px;
padding: 5px;
background-color: #fff;
border-radius: 50%;
font-size: .8rem;
}
.gallery-lightbox__control.icon-back, .gallery-lightbox__control.icon-next {
top: 50%;
font-size: 2rem;
transform: translateY(-50%);
color: #fff;
}
.gallery-lightbox__control.icon-back {
left: 10px;
}
.gallery-lightbox__control.icon-next {
right: 10px;
}
@media screen and (min-width: 576px) {
.gallery {
grid-template-columns: repeat(2, auto);
}
}
@media screen and (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, auto);
}
.gallery-lightbox__control.icon-close {
top: -19px;
right: -19px;
font-size: 1.2rem;
}
.gallery-lightbox__control.icon-back, .gallery-lightbox__control.icon-next {
font-size: 3rem;
}
}
@media screen and (min-width: 992px) {
.gallery {
grid-template-columns: repeat(4, auto);
}
}
@charset "UTF-8";
@font-face {
font-family: "gallery-lightbox";
src:url("../fonts/gallery-lightbox.eot");
src:url("../fonts/gallery-lightbox.eot?#iefix") format("embedded-opentype"),
url("../fonts/gallery-lightbox.woff") format("woff"),
url("../fonts/gallery-lightbox.ttf") format("truetype"),
url("../fonts/gallery-lightbox.svg#gallery-lightbox") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "gallery-lightbox" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "gallery-lightbox" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-expand:before {
content: "\61";
}
.icon-next:before {
content: "\62";
}
.icon-back:before {
content: "\63";
}
.icon-close:before {
content: "\64";
}
<div class="root">
<div class="gallery">
<div class="gallery__item icon-expand">
<img src="http://lorempixel.com/400/200/sports/1/" alt="Imagen de galería" class="gallery__img">
</div>
<div class="gallery__item icon-expand">
<img src="http://lorempixel.com/400/200/sports/2/" alt="Imagen de galería" class="gallery__img">
</div>
<div class="gallery__item icon-expand">
<img src="http://lorempixel.com/400/200/sports/3/" alt="Imagen de galería" class="gallery__img">
</div>
<div class="gallery__item icon-expand">
<img src="http://lorempixel.com/400/200/sports/" alt="Imagen de galería" class="gallery__img">
</div>
<div class="gallery-lightbox">
<div class="gallery-lightbox__modal">
<span class="gallery-lightbox__control icon-close"></span>
<span class="gallery-lightbox__control icon-back"></span>
<span class="gallery-lightbox__control icon-next"></span>
<img src="" class="gallery-lightbox__img">
</div>
</div>
</div>
</div>
Como se podría anular el scroll solo cuando el lightbox esta abierto? Lo que necesito seria que al abrir cualquiera de las fotos no se pueda hacer scroll hasta salir de la foto , asi no pasaría "por encima" del demás fondo La foto quedaría "fija" mientras esté abierta y el scroll se podria volver a usar al salir de dicha foto