0

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>
Hice una galería lightbox que funciona correctamente El problema es que al abrir una foto,y hacer scroll,la galería tambien hace el scroll y esto hace que se desplace por toda la pagina lo que desconfigura toda mi estructura en general

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

1 respuesta 1

0

Puedes eliminar el scroll con seteando el overflow a hidden. Quedaría tal que así.

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) => {
        document.querySelector("body").style.overflow = "scroll"; //Volver a setear el scroll para que aparezca la barra.
        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) {
    document.querySelector("body").style.overflow = "hidden"; //Quitar el scroll
    return item.querySelector(this.config.galleryImgClass);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.