Blog

12 de March 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.

>>> Step-by-Step <<

Time needed: 3 minutes

  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]”

Share:

Download

Others

Tips

Protótipo em site

Prototype on site

View more

Pulsar

Pulse

View more

Procurando na URL

Procurando na URL

View more