Lytebox: Como usar?

Publicada originalmente em 5 de Abril de 2010.
Texto corrigido e actualizado com novas ligações.

Osvaldo

Mocheco⊗Marafado

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.

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

ver código

imprimir?

01	#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }

02	#lbOverlay.grey { background-color: #000000; }

03	#lbOverlay.red { background-color: #330000; }

04	#lbOverlay.green { background-color: #003300; }

05	#lbOverlay.blue { background-color: #011D50; }

06	#lbOverlay.gold { background-color: #666600; }

07

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

09	#lbMain a img { border: none; }

10

11	#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }

12	#lbOuterContainer.grey { border: 3px solid #888888; }

13	#lbOuterContainer.red { border: 3px solid #DD0000; }

14	#lbOuterContainer.green { border: 3px solid #00B000; }

15	#lbOuterContainer.blue { border: 3px solid #5F89D8; }

16	#lbOuterContainer.gold { border: 3px solid #B0B000; }

17

18	#lbDetailsContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; overflow: auto; margin: 0 auto; }

19	#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }

20	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }

21	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }

22	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }

23	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

24

25	#lbImageContainer, #lbIframeContainer { padding: 10px; }

26	#lbLoading {

27	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;

28

}

29

30	#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

31	#lbImageContainer>#lbHoverNav { left: 0; }

32	#lbHoverNav a { outline: none; }

33

34	#lbPrev { width: 49%; height: 100%; background: transparent url(URL-SITE-ALOJAMENTO/blank.gif) no-repeat; display: block; left: 0; float: left; }

35	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_grey.gif) left 15% no-repeat; }

36	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_red.gif) left 15% no-repeat; }

37	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_green.gif) left 15% no-repeat; }

38	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_blue.gif) left 15% no-repeat; }

39	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(URL-SITE-ALOJAMENTO/prev_gold.gif) left 15% no-repeat; }

40

41	#lbNext { width: 49%; height: 100%; background: transparent url(URL-SITE-ALOJAMENTO/blank.gif) no-repeat; display: block; right: 0; float: right; }

42	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_grey.gif) right 15% no-repeat; }

43	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_red.gif) right 15% no-repeat; }

44	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_green.gif) right 15% no-repeat; }

45	#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_blue.gif) right 15% no-repeat; }

46	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(URL-SITE-ALOJAMENTO/next_gold.gif) right 15% no-repeat; }

47

48	#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }

49	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }

50	#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }

51	#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }

52	#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }

53	#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }

54

55	#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }

56	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }

57	#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }

58	#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }

59	#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }

60	#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }

61

62	#lbDetailsData { padding: 0 10px; }

63	#lbDetailsData.grey { color: #333333; }

64	#lbDetailsData.red { color: #620000; }

65	#lbDetailsData.green { color: #003300; }

66	#lbDetailsData.blue { color: #01379E; }

67	#lbDetailsData.gold { color: #666600; }

68

69	#lbDetails { width: 60%; float: left; text-align: left; }

70	#lbCaption { display: block; font-weight: bold; }

71	#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }

72	#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }

73

74	#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }

75	#lbClose.grey { background: url(URL-SITE-ALOJAMENTO/close_grey.png) no-repeat; }

76	#lbClose.red { background: url(URL-SITE-ALOJAMENTO/close_red.png) no-repeat; }

77	#lbClose.green { background: url(URL-SITE-ALOJAMENTO/close_green.png) no-repeat; }

78	#lbClose.blue { background: url(URL-SITE-ALOJAMENTO/close_blue.png) no-repeat; }

79	#lbClose.gold { background: url(URL-SITE-ALOJAMENTO/close_gold.png) no-repeat; }

80

81	#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }

82	#lbPlay.grey { background: url(URL-SITE-ALOJAMENTO/play_grey.png) no-repeat; }

83	#lbPlay.red { background: url(URL-SITE-ALOJAMENTO/play_red.png) no-repeat; }

84	#lbPlay.green { background: url(URL-SITE-ALOJAMENTO/play_green.png) no-repeat; }

85	#lbPlay.blue { background: url(URL-SITE-ALOJAMENTO/play_blue.png) no-repeat; }

86	#lbPlay.gold { background: url(URL-SITE-ALOJAMENTO/play_gold.png) no-repeat; }

87

88	#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }

89	#lbPause.grey { background: url(URL-SITE-ALOJAMENTO/pause_grey.png) no-repeat; }

90	#lbPause.red { background: url(URL-SITE-ALOJAMENTO/pause_red.png) no-repeat; }

91	#lbPause.green { background: url(URL-SITE-ALOJAMENTO/pause_green.png) no-repeat; }

92	#lbPause.blue { background: url(URL-SITE-ALOJAMENTO/pause_blue.png) no-repeat; }

93	#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):

ver código

imprimir?

1	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".

ver código

imprimir?

01	/*** Configure Lytebox ***/

02	this.theme              = 'grey';   // temas: grey (cinza - definido por norma), black (preto), red (vermelho), green (verde), blue (azul), gold (dourado)

03	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)

04	this.outerBorder        = true;     // controla se deve mostrar a borda externa - da cor definida pelo tema: true (sim), false (não)

05	this.resizeSpeed        = 8;        // controla a velocidade de redimensionamento da imagem (1 = mais lento e 10 = mais rápido)

06	this.maxOpacity         = 80;       // controla a opacidade da sobreposição: valor maior = sobreposição mais escura, valor menor = sobreposição mais clara

07	this.borderSize         = 12;       // se alterarem o padding no CSS, precisarão actualizar esta variável - caso contrário, deixem ficar assim...

08

09	this.__hideObjects      = true;     // controla se os objetos (como Flash, Java, etc.) devem ser ocultados quando o visualizador é aberto

10	this.__autoResize       = true;     // controla se as imagens devem ou não ser redimensionadas se maiores do que as dimensões da janela do navegador

11	this.__doAnimations     = true;     // controla se a animação do Lytebox, ou seja, redimensiona a transição entre imagens, efeitos de aparecimento/desaparecimento gradual, etc.

12	this.__forceCloseClick  = false;    // se verdadeiro (true), os utilizadores são forçados a clicar no botão "Fechar" ao visualizar o conteúdo

13	this.__refreshPage      = false;    // força a atualização da página após fechar o Lytebox

14	this.__showPrint        = false;    // verdadeiro (true) para mostrar o botão de impressão, falso (false) para ocultar

15	this.__navType          = 1;        // 1 = botões "Anterior / Seguinte" no canto superior esquerdo e esquerdo (por norma)

16	// 2 = "<< anterior | seguinte >>" ligações ao lado do número da imagem

17	// 3 = navType_1 + navType_2 (mostrar ambos)

18

19	/*** Configure Opções Lyteframe (vizualizador html) ***/

20	this.__width            = '80%';    // largura padrão do visualizador de conteúdo

21	this.__height           = '80%';    // altura padrão do visualizador de conteúdo

22	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)

23

24	/*** Configure Opções Lyteshow (apresentação de slides) ***/

25	this.__slideInterval    = 4000;     // altera o valor (em milissegundos) para aumentar/diminuir o tempo entre os "slides"

26	this.__showNavigation   = false;    // verdadeiro (true) para exibir os botões/texto Próximo/Anterior durante a apresentação de slides, falso (false) para ocultar

27	this.__showClose        = true;     // verdadeiro (true) para exibir o botão Fechar, falso (false) para ocultar

28	this.__showDetails      = true;     // verdadeiro (true) para exibir detalhes da imagem (legenda, contagem), falso (false) para ocultar

29	this.__showPlayPause    = true;     // verdadeiro (true) para exibir os botões de pausa/reproduzir ao lado do botão Fechar, falso (false) para ocultar

30	this.__autoEnd          = true;     // verdadeiro (true) para fechar automaticamente o Lytebox após a última imagem ser alcançada, falso (false) para manter aberto

31	this.__pauseOnNextClick = false;    // verdadeiro (true) para pausar a apresentação de slides quando o botão "Seguinte" for clicado

32	this.__pauseOnPrevClick = true;     // verdadeiro (true) para pausar a apresentação de slides quando o botão "Anterior" for clicado

33	this.__loopSlideshow    = false;    // verdadeiro (true) para percorrer continuamente os slides, falso (false) caso contrário

34

35	/*** Configure Opções Lytetip (dicas) ***/

36	this.changeTipCursor    = true;     // verdadeiro (true) para mudar o cursor para 'help', falso (false) para deixar o padrão (herdado)

37	this.tipStyle           = 'classic';// define o estilo de dica padrão se nenhum for especificado via data-lyte-options.

38	// Os valores possíveis são classic, info, help, warning, error

39

40	/*** Configure Event Callbacks ***/

41	this.__beforeStart      = '';       // função a ser chamada antes que o visualizador comece

42	this.__afterStart       = '';       // função a ser chamada após o visualizador iniciar

43	this.__beforeEnd        = '';       // função a ser chamada antes que o visualizador termine (após clique de fechamento)

44	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...

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 :

ver código

imprimir?

1	<script type="text/javascript" language="javascript" src="URL-SITE-ALOJAMENTO/lytebox.js"></script>

2	<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:

ver código

imprimir?

1	<script type='text/javascript'>

2	//<![CDATA[

3	/*** Conteúdo Ficheiro .js ***/

4

//]]>

5

</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:

ver código

imprimir?

1	<script  type='text/javascript'>

2	/*** Conteúdo Ficheiro .js ***/

3

</script>

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

ver código

imprimir?

1	<style type='text/css'>

2	/*** Conteúdo Ficheiro .css ***/

3

</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:

ver código

imprimir?

01	<b:widget id='HTMLXX' locked='false' title='Lytebox' type='HTML' version='2' visible='true'>

02	<b:widget-settings>

03	<b:widget-setting name='content'>←→</b:widget-setting>

04	</b:widget-settings>

05	<b:includable id='main'>

06	<!-- <b:include name='widget-title'/> -->

07	<div class='widget-content'>

08	<data:content/>

09

</div>

10	</b:includable>

11	</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.

Queres ler outro artigo ao calhas?