CarlAn - Garatujar. Com tecnologia do Blogger.
13.8.11

postheadericon Como instalar Lightbox2 no seu blog da Blogger, passo a passo

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.

Script testado! Instale o Lightbox2 no seu Blog seguindo o tutorial 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.


Passo 3

Adicionar mini-aplicação
Clique em "adicionar uma mini-aplicação" e escolha, das várias que por defeito a Blogger disponibiliza, a referente a "HTML/Javascript", esta aplicação permite adicionar código de terceiros aos seu blog, para que fique com mais funções ou mais ao seu gosto (veja as 2 imagens seguintes).

Cole agora o código que copiou no campo "Conteúdo", deve estar em modo "Editar Html", não coloque Titulo deixe em branco esse campo e termine clicando em "Guardar".


Nota: Desta forma utilizando uma mini-aplicação para código de terceiros, não está a manipular o código-fonte do Blogue, não correndo  qualquer risco de desconfigurar o código-fonte original da Blogger, nem necessita de fazer uma cópia de segurança do template que usa, se o Lightbox não funcionar no seu Blog, simplesmente abre a mini-aplicação que criou e "Remove" a mesma, é simples e seguro.

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 IMAGEMou   
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 ;-)

1 comentários:

José Oliveira disse...

Obrigado pela referência aos créditos. Sabemos que fizemos um bom trabalho quando somos citados. Parabéns pelo blogue! Abraço.

FacebooK

Related Posts Plugin for WordPress, Blogger...

Google+ Followers

Ocorreu um erro neste dispositivo

Posts mais vistos

Ocorreu um erro neste dispositivo

800ISO no Facebook

Troca de Livros no Facebook

garatujar

verbo no Infinitivo pessoal

do It. grattugiare, esfarelar com ralo

v. tr. e int.,
cobrir com garatujas;
fazer garatujas;
rabiscar.
Gerúndio - garatujando

"Foi o tempo que dedicaste à tua rosa que fez tua rosa tão importante." -- Antoine de St. Exupery (in "O princepezinho")

para pensar...

"...sob certas condições, os capitalistas privados inevitavelmente controlam, directa ou indirectamente, as principais fontes de informação (imprensa, rádio, educação). É então extremamente difícil, e na maior parte dos casos na verdade quase impossível, para o cidadão individual chegar a conclusões objectivas".

Albert Einstein, 1949

________________________________
«Uma revolução pode mudar as instituições, mas em nada alterou o carácter dos homens. Eles continuarão a ser o que eram: perversos e imbecis.»

Carlos da Maia, um dos oficiais da Armada no 5 de Outubro, em carta ao político republicano João Chagas, Junho de 1911
" Estamos perdidos há muito tempo... O país perdeu a inteligência e a consciência moral. Os costumes estão dissolvidos, as consciências em debandada. Os caracteres corrompidos (...) Ninguém crê na honestidade dos homens políticos."
EÇA DE QUEIROZ

Não quero garatujar mais a cidade. A cidade já é diferente com tanto verde-azeitona e tanta varanda caída. Tantas vedações e instruções, tantas palavras de ordem que os cartazes políticos nos recomendam. Nada disso. Nem mais uma ordem, nem mais um só homem a mandar na minha vida.

Todos se van (Diários de Havana), Wendy Guerra 2006


Amorim acusado de evasão fiscal

O Plano Nacional de Barragens

Isaltino pode não cumprir pena

BBC esplica a crise na Europa

"Gosto muito de te ver Coelhinho"

tags

Sócrates Vídeo Face oculta PS PT Wikileaks Cavaco Silva google TVI Facebook Madeira Portugal Rui Pedro Soares divida da republica video YouTube humor Moody's Temporal Saúde banca BPN EDP Funchal Luís Figo Twitter ASAE BCP Bolsa Corrupção Mário Soares Paulo Penedos vídeo humor Bush Comissão de Ética Justiça Marinho Pinto News PSD SNS Solidariedade Social short-selling Ana Sofia Cuba DESIGUALDADES Durão Barroso FMI Fernando Nobre Fidel Castro Free Download Galp Google Buzz Gripe A Internet Iraque Julian Assange Manuel Alegre Mário Crespo Publico Ricardo Rodrigues Tiago Caiado Guerreiro Vaticano Vieira da Silva escutas iPad iPhone rating português AMI Ana Gomes BdP CERN CMVM Chávez DECO Demagogias Felícia Cabrita Google Earth H1N1 Hospital Amadora-Sintra Islandia vulcão Jorge Coelho Jornal de sexta João Cravinho Maddie Microsoft Mirrors OMS Oeiras PEC Pablo Picasso Paulo Rangel Saúde EUA Tablet Vítor Constâncio Zeinal Bava firefox openleaks remuneração de administradores transportes públicos (H1N1) BES Barack Obama Berlusconi Blindness Catarina Furtado Che Chomsky Dawkins Dire Straits Elton Elvis Entre-os-Rios Eric Clapton Esmeralda Euro 2012 FPF Farmville Festival de Veneza Francisco George Gonçalo Amaral Google Sky Greenpeace Gripe Guevara Hugo Chávez Jorge Batista José Penedos José Saramago João Soares Juan Carlos Laura Torrisi Lei do Financiamento Partidário Luís Montenegro MP3 Madeleine McCann Manuela M. Guedes Mapa mundo Maria José Morgado Mario Lino McCann Mercosul Michael Jackson Naide Gomes Nobel da Paz PSP PT/TVI Paul Pfizer Pirelli Portugal Telecom (PT) Potts Presley Radio Nowhere Ramos Horta Richard Rihanna SEDES SOL Segurança Social Setúbal Sporting Star Tracking Sting TIME Teixeira dos Santos The Police UNICEF Viagens Virgil Wikiscanner Yahoo dinossauros discriminações iPod jornal sexta obstetra pobreza infantil raio-x sandes slideshow template ucrania

Últimos 30 dias

Quintas com Livros

Outros Garatujadores

Ocorreu um erro neste dispositivo

Público

Siga o Blog por Email