Garatujar

Lightbox2 | Blogger



Lightbox2 no seu blog da Blogger, passo a passo

Como instalar o Lightbox2 no seu Blog da Blogger passo-a-passo



Pode optar por duas alternativas de instalação (uma fácil outra mais difícil), pode arranhar um pouco de código javascript e instalar os diversos files necessários onde pretender, num servidor com ftp ou no Google sites se tem uma conta de email da Google tem a possibilidade de criar um site na Google sites com 100MB de alojamento, grátis mas sem ftp e sem a possibilidade de ter pastas e subpastas, mais à frente explicarei como usar o Google Sites.

Pode optar por uma solução mais simples, onde apenas terá que copiar o código a inserir no seu Blog. Isto será explicado passo a passo.



Vamos abordar as duas formas de instalar o Lightbox no seu Blog, em jeito de tutorial, passo-a-passo.

Menu - as várias opções

» Forma de instalação simples » Forma de instalação com alojamento » Download Lightbox2 » Google sites

A vantagem para alem da parte estética é que com este script instalado no seu Blog o visitante para ver a imagem em tamanho maior não tem que mudar de pagina e depois regressar novamente, para alem de apresentar as imagens de forma atraente acaba por ser pratico e útil. Teste o lightbox no logo da Blogger ou nas imagens em baixo, cuidado com as abelhas :)



Download

* Clique na imagem ou aqui para download dos files em formato zip: http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.05.zip Lightbox v2.05 - 3/18/11 - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes. Site do autor do script Lightbox

Instalação simples

Para fazer a instalação simples não necessita de alterar qualquer ficheiro, eu já fiz previamente esse trabalho para si, já alojei os diversos files necessários ao Lightbox, nesse caso apenas tem que copiar o código fornecido na tabela em baixo, e ir seguindo as indicações fornecidas passo-a-passo.

Passo 1

Código que irá colocar no seu blog da Blogger (blogspot)
Copie este código:

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';cssNode.rel = 'stylesheet';
cssNode.href = "https://sites.google.com/site/carlanfoto/links/lightbox.css";
cssNode.media = 'screen';
cssNode.title = 'using lightbox 2 with GPC';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
<script src="https://sites.google.com/site/carlanfoto/links/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/carlanfoto/links/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="https://sites.google.com/site/carlanfoto/links/lightbox.js" type="text/javascript"></script>

Nota: Este é o código que irá colocar no seu Blog, tal como está, para a instalação simples, sem mexer em códigos, siga os passos...é muito fácil. . * Se pretender alojar o script Lightbox no seu site ou no Google sites, usará também este código mas terá que alterar o url dos 4 endereços que estão no código. Exemplo: cssNode.href = "https://sites.google.com/site/carlanfoto/links/lightbox.css"; * Se usar o Google sites alterar para: cssNode.href = "https://sites.google.com/site/SEUSITE/SUAPAGINA/lightbox.css";   * Se usar um alojamento partilhado HTML ou PHP, alterar para: cssNode.href = "https://SEUSITE.com/SUAPASTA/lightbox.css";

Passo 2

Colocar o código no Blog
Vá agora para o seu Blog clique na aba "Design" e seleccione "Elementos de página" deverá estar logado no seu Gmail (sua conta de email da Google, que está associada ao seu Blog), para aceder ao painel controle clique aqui.


Após seguir os passos referidos, poderá agora adicionar uma mini-aplicação ao seu Blog, dando ao mesmo funcionalidades extras.

Nota: Reparou que são vários os comandos que podem ser utilizados com o Lightbox2; fechar o lightbox com a tecla "Esc" ou clicar fora da área da imagem, pode-se saltar de imagem em imagem com as teclas de direcção. Repare que esta foto embora não esteja junto das três primeiras é agregada pela ancora [nomedasérie] às outras imagens, aparecendo assim juntos das outras três no mesmo slideshow, pois tem o mesmo Nome de Série.

O sitio onde vai ficar a mini-aplicação na sua barra lateral (sidebar) é irrelevante, poderá deixa-la no cimo ou em baixo das diversas mini-aplicações  que já tem activas no seu Blog, como não vai colocar "titulo" na mini-aplicação ela não ira aparecer no sidebar do seu Blog, ira ser identificada em "Design" como "HTML/JavaScript", assim você saberá com facilidade onde se encontra, pois poderá sempre ser editada ou removida.

Nota:  De referir que este script não funciona correctamente em todos os blogues, isto porque poderá entrar em conflito com outros javascripts já instalados, se tem um modelo nativo da Blogger é possível que funcione bem, se tem instalado um template desenvolvido por terceiros, é possível que já venha no seu código-fonte com javasctipts e poderá entrar em conflito, poderá perder alguma funcionalidade que já tinha, ou poderá simplesmente não funcionar. Se for esse o caso terá que ir a janela da mini-aplicação que acabou de criar, abri-la e remover a mesma.  Existem outras alternativas ao Lightbox2 tais como Lytebox, thickbox, colorbox ou ainda o Slimbox2 que é exactamente igual ao Lightbox.

Passo 4


Editar os atributos das imagens

Como já deve ter reparado pode mostrar uma imagem em modo único ou um grupo de imagens tipo slideshow, navegando desta forma de foto em foto. Para isso tem que inserir um atributo nas propriedades de cada imagem que pretender que o Lightbox mostre ao visitante. Ao inserir uma imagem no seu post terá que adicionar o atributo rel="lightbox" para accionar o Lightbox, ou pode usar  rel="lightbox" title="TÍTULO DA IMAGEM" para accionar o Lightbox e atribuir um título à imagem que aparecerá na janela quando a imagem for exibida.

Para várias imagens em slideshow use o atributo  rel="lightbox[NOMEDASÉRIE]" para accionar o lightbox, ou  rel="lightbox[NOMEDASÉRIE]" title="TÍTULO DA IMAGEM" para acionar o lightbox e mostrar um título para a  imagem. De referir ainda que para cada imagem que pretender exibir no Lightbox em slidehow terá que adicionar estas ordens, a ordem rel="lightbox" é obrigatória, a ordem title="XXX" é facultativa.


Pode ter diversas séries de imagens em slideshow em cada post, nesse caso o [NOMEDASERIE] terá que ser diferente para cada slideshow, o [NOMEDASERIE] poderá ser o que quiser (serie1, parís, ferias2011, grupo1 ou despedidasolteiro, etc), o [TÍTULO DA IMAGEM] é o texto que pretender, um título para cada imagem.

Vermelho "não alterar" - Azul "campo editavel"	rel="lightbox" title="TÍTULO DA IMAGEM"  ou    rel="lightbox[NOMEDASÉRIE]"

Explicação para cada ordem
Use para 1 imagem sem legenda na exibição	rel="lightbox"
Use para 1 imagem com legenda na exibição	rel="lightbox" title="TÍTULO DA IMAGEM"
Use para várias imagem no Post sem legenda (cada série terá que ter um nome igual)	rel="lightbox[NOMEDASÉRIE]"
Use para várias imagem no Post com legenda (cada imagem terá a sua legenda)	rel="lightbox[NOMEDASÉRIE]" title="TÍTULO DA IMAGEM"

Clique na imagem para ver como editar 'rel' e 'title'na altura de fazer o seu post




Em modo "Editar HTML" coloque o atributo "rel" e o "title" conforme ilustrado na imagem, ou a seguir à ordem ancora da imagem, respeitando 1 espaço.

Passo 5

Editar o modelo de mensagens
É um pouco chato ter que colocar sempre este código à
unha? Pois é, mas não precisa de o fazer sempre.
O código poderá aparecer no editor sempre que abrir um novo Post no seu blog.

É simples implementar isto e ira facilitar-lhe a vida. Vá à aba "Definições" depois vá a "Formatação" e no fundo da página insira os códigos necessários aos atributos das imagens no campo "Modelo de Mensagens" e grave as alterações.


Veja a imagem, agora sempre que abrir um novo post os códigos já lá estão, prontinhos a serem colados ou marcados e arrastados para o local certo nos atributos da imagens. Não vai publicar nenhuma imagem? Não tem crise, no seu Post vá na aba "Editar HTML" e apague os códigos.

Agora só falta ensaiar, faça um post, coloque uma imagens, dê as ordens rel="lightbox" title="XXX" e confirme.

Topo

Instalação com alojamento dos ficheiros

Instalação do Lightbox com alojamento da folha de estilo .css e dos diversos ficheiros .js bem como das imagens necessárias ao script. Se não tem muita pratica em código, se pretende colocar a lightbox apenas num Blog, a solução de instalação facil é mais indicada. Se tem onde alojar os files e as imagens, num servidor sem ftp como o "Google sites", se está disposto a alterar umas linhas de código, ou se pretende colocar o lightbox em vários dos seus Blogues, nesse caso talvez queira alojar os files do script Lightbox e alterar no código os URL's relativos das imagens usadas pelo Lightbox.

Passo 1


Download
Comece por fazer o Download dos ficheiros em formato .zip fornecidos pelo criador do script, os files são gratuitos e disponibilizados sem condições pelo criador vá a Download, após o download extraia o ficheiro lightbox2.05.zip para uma pasta à sua escolha.

Se tem um alojamento com FTP pago saberá com certeza manipular as urls, http://OMeuSite.com/images para as imagens, /js para os javascripts e /css ou outro para a folha de estilo, não vamos perder tempo aqui, até porque a folha de estilo lightbox.css e o script lightbox.js já vêem com a configuração correcta para sites com alojamento partilhado em HTML ou PHP.

Passo 2

Editar os ficheiros

Nota:  Abra e use o Bloco de Notas do para alterar os files (pode usar também o wordpad, expression Web, SeaMonkey, KompoZer, Araneae entre outros) não use o MS Word nem o OppenOffice, pois estes colocam códigos indesejáveis na altura que for salvar o file.

Antes de carregar os files para o servidor,  precisa de alterar dois dos ficheiros, o lightbox.css e o lightbox.js, estão em pastas diferentes, o primeiro na pasta css e o segundo na pasta js.

Abra o ficheiro lightbox.css e faça as seguintes alterações:
(use o Localizar do Bloco Notas "Crt+L" e no campo use a expressão .gif, assim apanhará todas as imagens )

Expressão no ficheiro original		como deverá ficar	imagem usada
url](../images/prevlabel.gif)	alterar para	url](https://sites.google.com/site/SEUSITE/NOMEPASTA/prevlabel.gif)
url](../images/nextlabel.gif)	alterar para	url](https://sites.google.com/site/SEUSITE/NOMEPASTA/nextlabel.gif)

Agora abra o ficheiro lightbox.js e faça as seguintes alterações:

Expressão no ficheiro original		como deverá ficar	imagem usada
fileLoadingImage:        'images/loading.gif'	alterar para	fileLoadingImage:        'https://sites.google.com/site/SEUSITE/NOMEPASTA/loading.gif'
fileBottomNavCloseImage: 'images/closelabel.gif'	alterar para	fileBottomNavCloseImage: 'https://sites.google.com/site/SEUSITE/NOMEPASTA/closelabel.gif'
src="images/loading.gif">	alterar para	src="https://sites.google.com/site/SEUSITE/NOMEPASTA/loading.gif">
<img src="images/close.gif">	alterar para	<img src="https://sites.google.com/site/SEUSITE/NOMEPASTA/close.gif">

Passo 3

Google sites - enviar os ficheiros para o site

Visto ter um blogue da Blogger é certo que tem uma conta de email da Google, nesse caso tem acesso a uma serie de ferramentas da Google, incluindo a possibilidade de criar um site no "Google sites".

No Google sites tem a possibilidade de criar um site com 100MB de alojamento, gratuito, mas sem ftp e sem a possibilidade de ter pastas e sub-pastas. Não é perfeito, mas nem a perfeição existe, e o que esta lá perto custa €uros, assim sendo desenrascamo-nos com o que temos, e não é mau de todo, pode alojar files como anexos em diversas paginas, e para o que se pretende é óptimo.

Se tiver logado no seu email da Google basta clicar no link acima e criar o seu site na Google, se tiver diversas contas Google, escolha em qual delas quer ter o site associado e se for caso disso, mude de conta. Após a criação da conta é muito fácil criar paginas e anexar os files que pretender. É simples e intuitivo, não me vou aqui debruçar sobre isso.


Apenas um pequeno reparo... ao tentar obter o link de um file, o link fornecido pela Google sites é um link para download, assim o link (imagem ou file) é deste género:


Imagem com a lista  dos files a alojar no Google sites.











[ https://sites.google.com/site/carlanfoto/links/lightbox.css?attredirects=0&d=1 ] na verdade não poderá utilizar assim o link para alterar os caminhos (url's) na folha de estilo lightbox.css e no javascript  lightbox.js, terá que eliminar a parte assinalada a vermelho, o link correcto depois de alterado será:  
https://sites.google.com/site/SEUSITE/NOMEPASTA/closelabel.gif

Para os URLs a serem usados no código a ser copiado para o seu Blog a situação é igual  https://sites.google.com/site/SEUSITE/NOMEPASTA/lightbox.css.
Quer dizer, quando alojar os files no seu site o link será deste tipo:

https://sites.google.com/site/NOMEDOSEUSITE/SUAPASTA/lightbox.css, obviamente a parte assinalada será o nome que escolher para o seu site Google sites e o nome da pasta onde resolver alojar os diversos files. Esta alteração e para os 4 (quatro) endereços que vai copiar no código fornecido e que vai usar no seu Blog. Os ficheiros que vai necessitar de enviar e alojar estão descritos na imagem, confira. São 6 imagens, 1 folha de estilo e 5 scripts.

Após o envio dos diversos files para o alojamento no Google sites, pode agora utilizar o código fornecido (depois de alterado com o endereço correcto do seu site, são 4 alterações!)
no seu Blog, passe agora para o Passo 1 no modo instalação simples.

Topo

Créditos

Espero que este post possa ter sido util, eu passei diversas horas a fussar pela net, com informações erradas ou incompletas, scripts apresentados e não testados e recomendações que não funcionavam. Os créditos deste artigo evidentemente serão para o criador do Lightbox e para um excelente artigo de José Oliveira do Blog Sentidos Livres a quem cabe o grosso deste trabalho, apenas tendo-me limitado a actualizar a info sobre o Google sites (as googlepages foram desactivadas) a fornecer o código prontinho com os files já alojados, e editar as diversas imagens de forma que a informação pudesse ser mais facilmente apreendida e compreendida.

De resto, comente se a instalação lhe correu bem ou se teve alguma dificuldade ou problema não abordado nest post. Tentarei ajudar, bom trabalho ;-)