Blog

12 de março de 2024

ShadowBox

ShadowBox

ShadowBox é uma técnica que permite exibir imagens em uma sobreposição sobre a página atual, muitas vezes com um efeito de escurecimento do restante da página para destacar a imagem em exibição.

O código a seguir irá permitir que você adicione esta função ao seu código.

>>> Passo-a-Passo <<

Tempo necessário: 3 minutos

  1. Acrescente ao Projeto

    Colocar as pastas css, js e img dentro do seu projeto.

  2. Colocar na ultima linha da sua página o seguinte script

    <!– SHADOWBOX –>
    <link rel=”stylesheet” href=”/css/shadowbox.css”>
    <script type=”text/javascript” src=”/js/shadowbox.js”></script>
    <script type=”text/javascript”> Shadowbox.init(); </script>
    <!– SHADOWBOX –>

  3. Para fazer a chamada do arquivo na galeria utilizamos:

    <a href=”link-da-sua-imagem.png” rel=”shadowbox[galeria]” style=”background-image: url(‘link-da-sua-imagem.png’);”></a>

Lembre-se que o “shadowbox[galeria]” é o nome da sua galeria, todas as imagens com o mesmo nome pertencem a mesma galeria, caso tenha mais de uma na mesma página, terá que colocar um nome diferente. Ex.: “shadowbox[galeria1]”, “shadowbox[galeria2]” e “shadowbox[galeria3]”

Compartilhe:

Download

Outras

Dicas

Redirecionamento para outro site

Redirecionamento para outro site

Ver mais

Os arquivos do Pen Drive sumiram!

Os arquivos do Pen Drive sumiram!

Ver mais

Publicando o projeto React

Publicando o projeto React

Ver mais