Introdução ao PhotoSwipe

O PhotoSwipe é uma biblioteca otimizada para dispositivos móveis touch, projetada para criar galerias de imagens interativas. Ele é compatível com navegadores desktop e dispositivos como iPhone, iPad e BlackBerry 6+. Desenvolvido com HTML, CSS e JavaScript, é uma solução open-source gratuita para visualização de imagens.

Cnofiguração Inicial do Ambiente

Para começar, inclua as folhas de estilo e scripts necessários no cabeçalho do seu documento HTML. Certifique-se de adicionar a meta tag viewport para otimização mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

Em seguida, adicione os arquivos CSS e JS do PhotoSwipe:

<link href="caminho/para/photoswipe.css" rel="stylesheet">
<link href="caminho/para/default-skin.css" rel="stylesheet">
<script src="caminho/para/photoswipe.js"></script>
<script src="caminho/para/photoswipe-ui-default.js"></script>

Estrutura HTML para a Galeria

Crie uma etsrutura HTML para agrupar as imagens. Cada imagem deve estar dentro de um elemento <a> com atributos de dados essenciais:

<div id="minha-galeria" class="container-galeria">
    <a href="imagem-grande1.jpg" data-size="1600x1600" data-med="imagem-media1.jpg" data-med-size="1024x1024">
        <img src="miniatura1.jpg" alt="Descrição da imagem 1">
    </a>
    <a href="imagem-grande2.jpg" data-size="1600x1068" data-med="imagem-media2.jpg" data-med-size="1024x1024">
        <img src="miniatura2.jpg" alt="Descrição da imagem 2">
    </a>
</div>

Os atributos data-size e data-med são obrigatórios para garantir a exibição adequada em diferentes dispositivos.

Marcador do PhotoSwipe

Adicione o marcador HTML subjacente que serve como base para o overlay do PhotoSwipe. Esta estrutura é necessária para o funcionamento correto:

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Fechar (Esc)"></button>
                <button class="pswp__button pswp__button--fs" title="Tela cheia"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom"></button>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Anterior"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Próximo"></button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

Inicialização via JavaScript

Escreva o código JavaScript para ativar o PhotoSwipe. A função principal processa os elementos da galeria e configura os eventos:

<script>
(function() {
    var configurarGaleria = function(seletor) {
        var extrairDadosImagem = function(container) {
            var elementos = container.childNodes;
            var lista = [];
            for (var i = 0; i < elementos.length; i++) {
                var no = elementos[i];
                if (no.nodeType !== 1) continue;
                
                var dimensoes = no.getAttribute('data-size').split('x');
                var item = {
                    src: no.getAttribute('href'),
                    largura: parseInt(dimensoes[0], 10),
                    altura: parseInt(dimensoes[1], 10),
                    autor: no.getAttribute('data-author')
                };
                
                var filhos = no.children;
                if (filhos.length > 0) {
                    item.miniatura = filhos[0].getAttribute('src');
                    if (filhos.length > 1) {
                        item.titulo = filhos[1].innerHTML;
                    }
                }
                
                var srcMedio = no.getAttribute('data-med');
                if (srcMedio) {
                    var dimensoesMedia = no.getAttribute('data-med-size').split('x');
                    item.medio = {
                        src: srcMedio,
                        largura: parseInt(dimensoesMedia[0], 10),
                        altura: parseInt(dimensoesMedia[1], 10)
                    };
                }
                
                item.original = { src: item.src, largura: item.largura, altura: item.altura };
                item.elemento = no;
                lista.push(item);
            }
            return lista;
        };
        
        var obterElementoProximo = function(el, condicao) {
            return el && (condicao(el) ? el : obterElementoProximo(el.parentNode, condicao));
        };
        
        var aoClicarMiniatura = function(evento) {
            evento.preventDefault();
            var alvo = evento.target || evento.srcElement;
            var linkClicado = obterElementoProximo(alvo, function(elem) {
                return elem.tagName === 'A';
            });
            if (!linkClicado) return;
            
            var galeriaContainer = linkClicado.parentNode;
            var itens = extrairDadosImagem(galeriaContainer);
            var indice = Array.prototype.indexOf.call(galeriaContainer.children, linkClicado);
            if (indice >= 0) {
                abrirPhotoSwipe(indice, galeriaContainer, itens);
            }
        };
        
        var abrirPhotoSwipe = function(indice, container, itens) {
            var elementoPswp = document.querySelector('.pswp');
            var opcoes = {
                getThumbBoundsFn: function(idx) {
                    var thumbnail = itens[idx].elemento.querySelector('img');
                    var scrollY = window.pageYOffset || document.documentElement.scrollTop;
                    var rect = thumbnail.getBoundingClientRect();
                    return { x: rect.left, y: rect.top + scrollY, largura: rect.width };
                },
                index: indice,
                showHideOpacity: true,
                history: false
            };
            
            var galeria = new PhotoSwipe(elementoPswp, PhotoSwipeUI_Default, itens, opcoes);
            galeria.init();
        };
        
        var containers = document.querySelectorAll(seletor);
        containers.forEach(function(container) {
            container.onclick = aoClicarMiniatura;
        });
    };
    
    configurarGaleria('.container-galeria');
})();
</script>

Modularização do Código

Para manter o código organizado, você pode separar o marcador HTML e o script em arquivos externos. Crie um arquivo JavaScript que insira dinamicamente a estrutura HTML necessária e inicialize o plugin. Isso facilita a manutenção e reutilização em múltiplas páginas.