Lytebox: Como usar? Parte 3

Neste terceiro e último artigo desta série de artigos sobre o Lytebox e como prometido vou mostrar como funcionam os exemplos que demonstrei na Parte 1.

Para melhor entender esta série de artigos é recomendado ler antes:

1. Lytebox: Como usar? Parte 1
2. Lytebox: Como usar? Parte 2

ACTUALIZAÇÃO Janeiro 2012: Os exemplos demonstrados neste artigo abrem numa nova página porque devido a incompatibilidade com o actual sistema de comentários do Blogger, tive que deixar de utilizar o Lytebox neste blogue.

---

ACTUALIZAÇÃO Janeiro 2022: O texto seguinte está praticamente tal como o escrevi no artigo original, salvo a inclusão de algumas ligações e/ou algum código que tenha sido actualizado pelo Blogger e seja necessário alterar para o Lytebox funcionar agora...

Após ter colocado o Lytebox no seu blogue, agora tem que modificar cada imagem onde quer utilizar o dito cujo.

Eu aqui neste blogue, já é prática editar cada imagem que coloco mas ainda estou adiando ir um dia dar uma limpeza a artigos mais antigos e colocar o Lytebox em cada uma dessas imagens...
Talvez um dia o faça...

Bem, mas esse é o meu caso que mantenho um blogue dirigido para imagens em que publico os meus trabalhos digitais e gosto do efeito que produz o Lytebox nelas.

Você ao decidir colocar o Lytebox, pode querer só utilizar algumas das suas funcionalidades tal como o slideshow ou a galeria...
Continuando, vamos então aos códigos e explicações de cada exemplo demonstrado no primeiro artigo desta série:

• Exemplo 1

  • Imagem simples:
    
    Ver Código

    <div style="margin-left: 1em; text-align: center;"><a href="http://lh3.ggpht.com/_Jm8aDaSCrFU/SlOr9Vg6hDI/AAAAAAAAAHM/s_snTE_ahzw/s00/Supergirl-copia.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lytebox" title="SuperGirl: Demo Lytebox"><img src="http://lh3.ggpht.com/_Jm8aDaSCrFU/SlOr9Vg6hDI/AAAAAAAAAHM/s_snTE_ahzw/s128/Supergirl-copia.jpg" style="height: 90px; width: 128px; cursor: url(&quot;http://lh6.ggpht.com/_Jm8aDaSCrFU/S7jRhpjjShI/AAAAAAAABIM/bdv-diwIA2A/find.png&quot;), auto;" border="0" /></a></div>
    

    Ocultar Código

    Ora bem, este é como coloco o Lytebox aqui nas imagens do blogue com imagens carregadas para o Picasa tal como o Blogger faz com cada imagem que se coloca através do painel ao escrever os artigos.

    Atenção que no caso de imagens carregadas pelo painel ao escrever um artigo, o código da imagem não aparece bem como está neste exemplo já que costumo alterar esse código para colocar as imagens como desejo.
    O que não faz diferença já que as alterações que precisamos fazer são feitas da mesma maneira na aba Vista de HTML em Editar/Nova Mensagem:

    

    1. Se a imagem for do Picasa devemos alterar para s00 o que normalmente aparece que geralmente é s1600-h, estes números são um código próprio do Picasa para as imagens (tem a ver com a dimensão de cada imagem e faz com a imagem não se veja no blogue se não tiver o código certo) e para que o Lytebox funcione é necessário alterar para os dois zeros que é o código para o tamanho original da imagem.

       Se utilizar imagens alojadas noutro site de alojamento tal como o Photobucket ou o Imageshack, o passo acima não será necessário mas provavelmente será preciso incluir a parte do style="height: **px; width: ***px;", principalmente a parte da height e width: ***px; e que define as dimensões com que a imagem aparece no blogue.

    2. O passo a seguir será incluir o código que faz o Lytebox funcionar: rel="lytebox" title="SuperGirl: Demo Lytebox" , a parte em vermelho é o que faz a chamada ao Lytebox e a parte em laranja é o titulo que vai aparecer na janela do Lytebox.

       Note que neste caso duma imagem simples, basta só colocar rel="lytebox" mas nos exemplos a seguir vai notar que essa parte será um pouco diferente.

    3. Ao publicar uma imagem através do Blogger, a parte com as dimensões da imagem como aparece no artigo pode ser com o style="height: **px; width: ***px;" ou somente com width="***"  ou/e  height="**", mas é recomendado que caso não esteja presente nenhuma dessas opções, que inclua uma dessas maneiras com as dimensões com que quer a imagem no artigo a publicar.

• Exemplo 2

  • Galeria de imagens, utilizando um link para abrir:
    Clique Aqui
    Ver Código

    <div style="margin-left: 1em; text-align: center;"><a href="http://lh4.ggpht.com/_Jm8aDaSCrFU/Sz6g0_j-7mI/AAAAAAAAAXk/5vgymEyWBbE/Blink.jpg" rel="lytebox[galeria]" title="Blink" class="grower">Clique Aqui</a><span style="display: none;"><a href="http://lh3.ggpht.com/_Jm8aDaSCrFU/Sz6g0wJVAcI/AAAAAAAAAXo/YK-qMyUGF1E/GataNegra.jpg" rel="lytebox[galeria]" title="Gata Negra"></a><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/Sz6g08hwPDI/AAAAAAAAAXg/GL3ZJO8Ofik/s00/Batgirl.jpg" rel="lytebox[galeria]" title="Batgirl"></a><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/Sz6g0w14V8I/AAAAAAAAAXs/Zu_j8OBe2h0/ViuvaNegra.jpg" rel="lytebox[galeria]" title="Viúva Negra"></a></span></div>

    Ocultar Código

    Neste exemplo da galeria e nos próximos vou só explicar o que diz respeito a cada exemplo já que algumas coisas são comuns a todos os exemplos, para não me tornar repetitivo.

    E então neste exemplo vai notar que onde aparecia a chamada para o Lytebox (rel="lytebox"), desta vez deve ficar rel="lytebox[galeria]" , sendo que [galeria] é um nome que deve colocar para agrupar um conjunto de imagens na mesma galeria.

    DEVE sempre colocar um nome, mesmo que coloque somente uma galeria numa página.

    Nos exemplos com múltiplas imagens, escolhi também só mostrar uma em que ao clicar, abre a janela para a galeria com as restantes imagens, daí o uso do <span style="display: none;"> imagens que não se quer visíveis </span>.
    Caso deseje que todas as imagens fiquem sempre visíveis, basta retirar a parte em amarelo.

• Exemplo 3

  • Tal como no exemplo anterior, no Lytebox podemos tanto colocar um link de texto como colocar uma imagem:
    
    Ver Código
    
    

    <div style="margin-left: 1em; text-align: center;">
    <a href="http://lh5.ggpht.com/_Jm8aDaSCrFU/SlOT5t-v9UI/AAAAAAAAAFM/nmtxFpU5_JE/s00/Chaos_Jade%20copy.jpg" rel="lytebox[galeriadois]" title="Jade"><img src="http://lh5.ggpht.com/_Jm8aDaSCrFU/SlOT5t-v9UI/AAAAAAAAAFM/nmtxFpU5_JE/s128/Chaos_Jade%20copy.jpg" style="height: 149px; width: 128px; cursor: url(&quot;http://lh6.ggpht.com/_Jm8aDaSCrFU/S7jRhpjjShI/AAAAAAAABIM/bdv-diwIA2A/find.png&quot;), auto;" border="0" /></a>
    <span style="display: none;"><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/SlOT5rIwhuI/AAAAAAAAAFQ/pEpm-LD3aLA/s00/Darkchylde_manip.jpg" rel="lytebox[galeriadois]" title="Darkchylde"></a><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/SlOT59zndXI/AAAAAAAAAFU/nRCly2xyoRw/s00/GhostRider.jpg" rel="lytebox[galeriadois]" title="GhostRider por Thayne, cores por mim"></a><a href="http://lh4.ggpht.com/_Jm8aDaSCrFU/SlOUlTIvU2I/AAAAAAAAAFc/sysr23Yejko/s00/logan_v%C3%A9te.jpg" rel="lytebox[galeriadois]" title="Logan por véte, cores por mim"></a></span></div>
    

    Ocultar Código

    A única diferença deste exemplo para o anterior é que em lugar dum link para abrir a galeria, desta vez colocamos uma imagem, neste caso a primeira imagem da galeria com o código em destaque na linha 2 e as dimensões em style="height: 149px; width: 128px;" para melhor entender como funciona.

• Exemplo 4

  • Slideshow:
    
    Ver Código

    <div style="margin-left: 1em; text-align: center;"><a href="http://lh3.ggpht.com/_Jm8aDaSCrFU/SlOqzM3jrOI/AAAAAAAAAG8/YGTo-vVQsW4/s00/NZelandia-Scar.jpg" rel="lyteshow[exemplo]" title="Scar"><img src="http://lh3.ggpht.com/_Jm8aDaSCrFU/SlOqzM3jrOI/AAAAAAAAAG8/YGTo-vVQsW4/s128/NZelandia-Scar.jpg" style="height: 128px; width: 111px; cursor: url(&quot;http://lh6.ggpht.com/_Jm8aDaSCrFU/S7jRhpjjShI/AAAAAAAABIM/bdv-diwIA2A/find.png&quot;), auto;" border="0" /></a><span style="display: none;"><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/SlOqzaRpnTI/AAAAAAAAAHA/04LAncB98lQ/s00/Proj%20He-Man%20Skeletor_1%20%281%29.jpg" rel="lyteshow[exemplo]" title="He-Man: Feiticeira"></a><a href="http://lh6.ggpht.com/_Jm8aDaSCrFU/SlOqzfPlX_I/AAAAAAAAAHE/IvThzL5O9HE/s00/She-hulk%20c%C3%B3pia.jpg" rel="lyteshow[exemplo]" title="She-Hulk"></a><a href="http://lh3.ggpht.com/_Jm8aDaSCrFU/SlOput7Fc6I/AAAAAAAAAGg/vgkI2meWrIg/s00/Photon_manip.jpg" rel="lyteshow[exemplo]" title="Photon"></a></span></div>

    Ocultar Código

    Neste exemplo vai notar que mais uma vez a chamada para o Lytebox muda, sendo que agora como é para um slideshow será rel="lyteshow[exemplo]" , onde tal como no exemplo da galeria, a parte [exemplo] é onde DEVE colocar um nome para o slideshow.

• Exemplo 5

  • Utilizando uma Iframe: Abrir um site Ver Código

    <a href="https://cqapa.blogspot.com/" rel="lyteframe" title="Coisas K Aprendi por Aí" rev="width:800px; height:600px; scrolling:yes;" class="grower">Coisas K Aprendi por Aí</a>
    

    Ocultar Código

    Este exemplo mostra a maneira como se coloca uma iframe para um site externo à pagina, que pode ser para outra página do blogue ou até para outro local qualquer na Net, neste exemplo para a página inicial deste mesmo blogue.

    Explicando:

    1. href="https://cqapa.blogspot.com/" é onde colocamos o endereço da página a mostrar.

    3. A chamada para o Lytebox também é diferente mais uma vez, sendo agora rel="lyteframe"

    4. title="Coisas K Aprendi por Aí" é o é o titulo que vai aparecer na janela do Lytebox e geralmente também é o que se coloca no link para clicar e abrir a janela, neste caso é um texto mas podíamos colocar uma imagem também seguindo as indicações de um dos exemplos acima.

    5. rev="width:800px; height:600px; scrolling:yes;" é onde definimos a dimensão que a janela Lytebox vai ter e se permite rolar ou não.

    Nota: Nos exemplos acima onde tem class="grower" , não ligue porque é um código que utilizo para dar o aspecto a certos links.

• Exemplo 6

  Um último exemplo que foi um pedido num comentário no artigo original: Usar o Lytebox para mostrar Vídeos do Youtube ou similar..

  • Mostrar vídeo:
    
    Ver Código

    <div class="separator" style="clear: both; text-align: center;"><a title="Tutorial Lista com jQuery" href="https://www.youtube.com/embed/zZLYjMqipZ4" rel="lyteframe" rev="width:800px; height:650px; scrolling:no;"><img class="imgcursor" src="https://img.youtube.com/vi/zZLYjMqipZ4/maxresdefault.jpg" width='256'/></a></div>
    

    Ocultar Código

    No caso de desejarmos mostrar um vídeo com Lytebox, neste exemplo do youtube, utilizamos a rel="lyteframe" em que como no exemplo 5, a parte rev="width:800px; height:650px; scrolling:no;" são as dimensões da janela Lytebox e <img class="imgcursor" src="https://img.youtube.com/vi/zZLYjMqipZ4/maxresdefault.jpg" width='256'/> é a imagem ou texto visível no blogue.

    href="https://www.youtube.com/embed/zZLYjMqipZ4" é a url do vídeo, o que no caso do YouTube se obtém no código que o próprio site nos dá em Partilhar Incorporar:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/zZLYjMqipZ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Para a imagem que aparece visível no blogue, podemos colocar a que quisermos, o que pode ser uma imagem do próprio vídeo ou no caso do YouTube, umas das imagens disponíveis do próprio site que funcionam da seguinte maneira:

    1	"https://img.youtube.com/vi/zZLYjMqipZ4/maxresdefault.jpg"

    Em que maxresdefault.jpg é o tamanho com maior qualidade mas em alguns videos mais antigos podemos ter que usar 0.jpg,e zZLYjMqipZ4 é o código do vídeo que se encontra na url do dito cujo.

Já agora, o vídeo do exemplo 6 é uma das minhas duas experiências a gravar um tutorial em vídeo lá nos anos de 2010.
Está um pouco desactualizado mas para este efeito serve e até pode servir para dar uma ideia do que fazer já que o Blogger hoje em dia está tão diferente que praticamente tudo o que mostro no vídeo precisa ser adaptado aos códigos actuais. ~X

Até Breve. :-F

Queres ler outro artigo ao calhas?