Lytebox: Como usar? Parte 2

Neste segundo artigo desta série vou explicar como colocar o Lytebox no seu site ou blogue.

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

1. Lytebox: Como usar? Parte 1

A vantagem do Lytebox sobre outros scripts deste género é que não necessita de outras bibliotecas como o jQuery ou o Prototype/Scriptaculous, já que foi desenhado para funcionar sozinho, além de que é dos scripts deste tipo mais leves até ao momento.

Primeiro necessita de descarregar o seguinte ficheiro zipado em Inglês, que pode fazer directamente do site oficial ou do link abaixo se por acaso o site oficial estiver indisponível:

Lytebox Versão Inglesa

Descarregar

clica para baixar

39,4 KB .zip

Ou se preferir pode descarregar a versão que traduzi para Português:

Devido ao avanços no CSS e com o que se pode fazer actualmente, esta versão em Português foi modificada para funcionar sem imagens de fundo por isso não contém a pasta images, sendo também mais leve e sem ser necessário alterações no ficheiro CSS.
Eventualmente a única modificação a ser feita será para definir o tema no ficheiro .JS tal como demonstrado abaixo caso prefira um tema diferente do cinzento (grey).

Lytebox Versão Portuguesa

Descarregar

clica para baixar

9,19 KB .zip

Depois de retirar os ficheiros do zip, vai reparar que tem um ficheiro .js e outro .css, além duma pasta com imagens.

Aloje as imagens num site da sua confiança, pode ser o Picasa ou o Photobucket ou até o Imageshack.

Hoje em dia o Picasa foi substituído pelo Fotos e serve somente como arquivo de imagens que carregamos para serviços do Google, por exemplo é onde encontramos as imagens que carregamos directamente para o blogue.

O Photobucket e o Imageshack deixaram de ser grátis por isso já não são uma boa escolha para a maioria dos bloguistas.

Actualmente utilizo o Imgur em lugar de qualquer dessas opções pagas quando preciso dum site alternativo ao Fotos e até ao momento em que escrevo estas linhas, estou bastante satisfeito. (c)

Após alojar as imagens, abra o ficheiro css num editor de texto (recomendo o Notepad++) e substitua onde estão os locais das imagens, como por exemplo url(images/prev_grey.gif), deve substituir a parte em vermelho tal como no exemplo pela url das respectivas imagens no site onde as alojou.

Deve fazer isso com cada uma das imagens.
Para facilitar a localização, veja o código a seguir que é o que está no ficheiro .css e note as linhas em destaque:

Ver Código

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
#lbOverlay.grey { background-color: #000000; }
#lbOverlay.red { background-color: #330000; }
#lbOverlay.green { background-color: #003300; }
#lbOverlay.blue { background-color: #011D50; }
#lbOverlay.gold { background-color: #666600; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
#lbOuterContainer.grey { border: 3px solid #888888; }
#lbOuterContainer.red { border: 3px solid #DD0000; }
#lbOuterContainer.green { border: 3px solid #00B000; }
#lbOuterContainer.blue { border: 3px solid #5F89D8; }
#lbOuterContainer.gold { border: 3px solid #B0B000; }

#lbDetailsContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; }
#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(URL-SITE-ALOJAMENTO/loading.gif) center no-repeat;
}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrev { width: 49%; height: 100%; background: transparent url(URL-SITE-ALOJAMENTO/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_grey.gif) left 15% no-repeat; }
#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_red.gif) left 15% no-repeat; }
#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_green.gif) left 15% no-repeat; }
#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_blue.gif) left 15% no-repeat; }
#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_gold.gif) left 15% no-repeat; }

#lbNext { width: 49%; height: 100%; background: transparent url(URL-SITE-ALOJAMENTO/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_grey.gif) right 15% no-repeat; }
#lbNext.red:hover, #lbNext.red:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_red.gif) right 15% no-repeat; }
#lbNext.green:hover, #lbNext.green:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_green.gif) right 15% no-repeat; }
#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_blue.gif) right 15% no-repeat; }
#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_gold.gif) right 15% no-repeat; }

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }
#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }
#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }
#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }

#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }
#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }
#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }
#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }

#lbDetailsData { padding: 0 10px; }
#lbDetailsData.grey { color: #333333; }
#lbDetailsData.red { color: #620000; }
#lbDetailsData.green { color: #003300; }
#lbDetailsData.blue { color: #01379E; }
#lbDetailsData.gold { color: #666600; }

#lbDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbClose.grey { background: url(URL-SITE-ALOJAMENTO/close_grey.png) no-repeat; }
#lbClose.red { background: url(URL-SITE-ALOJAMENTO/close_red.png) no-repeat; }
#lbClose.green { background: url(URL-SITE-ALOJAMENTO/close_green.png) no-repeat; }
#lbClose.blue { background: url(URL-SITE-ALOJAMENTO/close_blue.png) no-repeat; }
#lbClose.gold { background: url(URL-SITE-ALOJAMENTO/close_gold.png) no-repeat; }

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPlay.grey { background: url(URL-SITE-ALOJAMENTO/play_grey.png) no-repeat; }
#lbPlay.red { background: url(URL-SITE-ALOJAMENTO/play_red.png) no-repeat; }
#lbPlay.green { background: url(URL-SITE-ALOJAMENTO/play_green.png) no-repeat; }
#lbPlay.blue { background: url(URL-SITE-ALOJAMENTO/play_blue.png) no-repeat; }
#lbPlay.gold { background: url(URL-SITE-ALOJAMENTO/play_gold.png) no-repeat; }

#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbPause.grey { background: url(URL-SITE-ALOJAMENTO/pause_grey.png) no-repeat; }
#lbPause.red { background: url(URL-SITE-ALOJAMENTO/pause_red.png) no-repeat; }
#lbPause.green { background: url(URL-SITE-ALOJAMENTO/pause_green.png) no-repeat; }
#lbPause.blue { background: url(URL-SITE-ALOJAMENTO/pause_blue.png) no-repeat; }
#lbPause.gold { background: url(URL-SITE-ALOJAMENTO/pause_gold.png) no-repeat; }

Ocultar Código

Por norma, o tema que está definido no javascript do Lytebox é cinzento (grey) mas pode alterar para um dos disponíveis, editando o ficheiro .js antes de alojar no site da sua escolha na seguinte linha de código (está logo ao inicio):

this.theme = 'grey';	// themes: grey (default), red, green, blue, gold
        

As restantes opções são Azul (blue), Dourado (gold), Vermelho (red) e Verde (green).
Para alterar o tema basta substituir onde está a vermelho na linha de código acima pela cor do tema desejado.

Ainda se pode mudar mais algumas coisas no codigo .js mas na minha opinião, para utilizar no Blogger é melhor não alterar mais do que a cor do tema.

No entanto caso tenham curiosidade em ver a lista das configurações disponiveis:

Ver Código

O Lytebox pode ser configurado editando o arquivo JavaScript principal: lytebox.js.
Abaixo são mostradas as linhas em lytebox.js que são configuráveis e aplicadas como padrão para todos os visualizadores.
Os comentários (texto após os caracteres "//") são bastante autoexplicativos, portanto, não entrarei em maiores detalhes.
De notar que a maioria dessas opções também pode ser definida por elemento usando o atributo "data-lyte-options".

/*** Configure Lytebox ***/
this.theme              = 'grey';   // temas: grey (cinza - definido por norma), black (preto), red (vermelho), green (verde), blue (azul), gold (dourado)
this.innerBorder        = true;     // controla se deve ser mostrada a borda interna ao redor do conteúdo da imagem/conteúdo html: true (sim), false (não)
this.outerBorder        = true;     // controla se deve mostrar a borda externa - da cor definida pelo tema: true (sim), false (não)
this.resizeSpeed        = 8;        // controla a velocidade de redimensionamento da imagem (1 = mais lento e 10 = mais rápido)
this.maxOpacity	        = 80;       // controla a opacidade da sobreposição: valor maior = sobreposição mais escura, valor menor = sobreposição mais clara 
this.borderSize         = 12;       // se alterarem o padding no CSS, precisarão actualizar esta variável - caso contrário, deixem ficar assim... 
			
this.__hideObjects      = true;     // controla se os objetos (como Flash, Java, etc.) devem ser ocultados quando o visualizador é aberto
this.__autoResize       = true;     // controla se as imagens devem ou não ser redimensionadas se maiores do que as dimensões da janela do navegador
this.__doAnimations     = true;     // controla se a animação do Lytebox, ou seja, redimensiona a transição entre imagens, efeitos de aparecimento/desaparecimento gradual, etc.
this.__forceCloseClick  = false;    // se verdadeiro (true), os utilizadores são forçados a clicar no botão "Fechar" ao visualizar o conteúdo
this.__refreshPage      = false;    // força a atualização da página após fechar o Lytebox
this.__showPrint        = false;    // verdadeiro (true) para mostrar o botão de impressão, falso (false) para ocultar
this.__navType          = 1;        // 1 = botões "Anterior / Seguinte" no canto superior esquerdo e esquerdo (por norma)
                                    // 2 = "<< anterior | seguinte >>" ligações ao lado do número da imagem
                                    // 3 = navType_1 + navType_2 (mostrar ambos)
		
/*** Configure Opções Lyteframe (vizualizador html) ***/
this.__width            = '80%';    // largura padrão do visualizador de conteúdo
this.__height           = '80%';    // altura padrão do visualizador de conteúdo
this.__scrollbars       = 'auto';   // controla as barras de visualização dos visualizadores de conteúdo - as opções são: automáticas (auto)|sim (yes)|não (no)
		
/*** Configure Opções Lyteshow (apresentação de slides) ***/
this.__slideInterval    = 4000;     // altera o valor (em milissegundos) para aumentar/diminuir o tempo entre os "slides"
this.__showNavigation   = false;    // verdadeiro (true) para exibir os botões/texto Próximo/Anterior durante a apresentação de slides, falso (false) para ocultar
this.__showClose        = true;     // verdadeiro (true) para exibir o botão Fechar, falso (false) para ocultar
this.__showDetails      = true;     // verdadeiro (true) para exibir detalhes da imagem (legenda, contagem), falso (false) para ocultar
this.__showPlayPause    = true;     // verdadeiro (true) para exibir os botões de pausa/reproduzir ao lado do botão Fechar, falso (false) para ocultar
this.__autoEnd          = true;     // verdadeiro (true) para fechar automaticamente o Lytebox após a última imagem ser alcançada, falso (false) para manter aberto
this.__pauseOnNextClick = false;    // verdadeiro (true) para pausar a apresentação de slides quando o botão "Seguinte" for clicado
this.__pauseOnPrevClick = true;     // verdadeiro (true) para pausar a apresentação de slides quando o botão "Anterior" for clicado
this.__loopSlideshow    = false;    // verdadeiro (true) para percorrer continuamente os slides, falso (false) caso contrário
		
/*** Configure Opções Lytetip (dicas) ***/
this.changeTipCursor    = true;     // verdadeiro (true) para mudar o cursor para 'help', falso (false) para deixar o padrão (herdado)
this.tipStyle           = 'classic';// define o estilo de dica padrão se nenhum for especificado via data-lyte-options.
                                    // Os valores possíveis são classic, info, help, warning, error
		
/*** Configure Event Callbacks ***/
this.__beforeStart      = '';       // função a ser chamada antes que o visualizador comece
this.__afterStart       = '';       // função a ser chamada após o visualizador iniciar
this.__beforeEnd        = '';       // função a ser chamada antes que o visualizador termine (após clique de fechamento)
this.__afterEnd         = '';       // função a ser chamada após o término do visualizador

Ocultar Código

Agora existem 3 maneiras de colocar o Lytebox, qualquer uma delas funciona e depende da opção de cada um como fazer.

A primeira é a mais simples, mas requere que aloje os ficheiros num site de alojamento externo que aceite ficheiros javascript e css.
A grande maioria deste sites de alojamento não são gratuitos e aqueles que são, geralmente têm algum inconveniente agarrado... x-P

Mas se escolher ou tiver esta opção, basta que após alojar as imagens faça as alterações necessárias no ficheiro .css, carregue os ficheiros .js e .css num site que permita esse tipo de ficheiros e na posse das respectivas urls, vá à aba Tema Clique na seta do botão Personalizar e escolha a opção Editar HTML.

A seguir procure por </head> e coloque o seguinte imediatamente antes, substituindo onde diz URL-SITE-ALOJAMENTO, é claro :

<script type="text/javascript" language="javascript" src="URL-SITE-ALOJAMENTO/lytebox.js"></script>
<link rel="stylesheet" href="URL-SITE-ALOJAMENTO/lytebox.css" type="text/css" media="screen" />

Pré-visualize e se tudo estiver em ordem, Salve o modelo.

A segunda maneira é colocar os ficheiros directamente no código HTML do blogue.
Então na aba Tema Clique na seta do botão Personalizar e escolha a opção Editar HTML.

Abra os ficheiros .js e .css num editor de texto, cole o conteúdo do ficheiro .css acima de ]]></b:skin> junto do restante CSS (Não esquecer de fazer a necessárias alterações como mencionado acima) e coloque o conteúdo do ficheiro .js mesmo antes de </head>, mas no caso do ficheiro .js deve colar o conteúdo da seguinte maneira para que o Blogger não o altere:

<script type='text/javascript'>
//<![CDATA[
/*** Conteúdo Ficheiro .js ***/ 
//]]>
</script>

Pré-visualize e se tudo estiver em ordem, Salve o modelo.

A terceira e última maneira é a que eu utilizo...
Na aba Esquema Clique em Adicionar uma gadget em qualquer das opções disponíveis embora se for na que estiver mais acima das restantes será melhor.
Escolha a opção HTML/Javascript, dê-lhe o titulo de Lytebox para poder encontrar mais tarde e na janela que se abre, cole o conteúdo do ficheiro .js da seguinte maneira:

<script  type='text/javascript'>
/*** Conteúdo Ficheiro .js ***/
</script>

E o conteúdo do ficheiro .css logo abaixo da seguinte maneira:

<style type='text/css'>
/*** Conteúdo Ficheiro .css ***/
</style>

Salve o novo elemento, e se ir ver o seu blogue nesta altura vai notar que no local que escolheu tem lá o novo elemento com o titulo.

Para evitar que se veja isso no blogue, siga os passos descritos acima para ir a Editar HTML, e utilize a opção Avançar para o widget para ir para o elemento recém-criado ou procure pelo titulo que deu ao elemento, no caso Lytebox (se utiliza o Firefox pode utilizar ctrl+F e digitar o que procura).
Quando achar o elemento certo, basta alterar <b:include name='widget-title'/> para ficar tal como no exemplo abaixo na linha 06:

<b:widget id='HTMLXX' locked='false' title='Lytebox' type='HTML' version='2' visible='true'>
    <b:widget-settings>
       <b:widget-setting name='content'>←→</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
      <!-- <b:include name='widget-title'/> -->
      <div class='widget-content'>
        <data:content/>
      </div>
    </b:includable>
</b:widget>

Isso vai fazer com o título permaneça visível na aba Esquema mas escondido/oculto no blogue.

Como mais uma vez me alonguei neste artigo, amanhã em breve prometo que termino e explico como os exemplos que mostrei na Parte 1 se pode aplicar no blogue.

Até Breve. :-F

Queres ler outro artigo ao calhas?