APOSTILA VISUAL LIGHTBOX
Contents
1. sejam eles provenientes de uma p gina Web ou que estejam salvos em nosso computador Em uma mesma galeria podemos mesclar imagens oriundas de sites ou de arquivos medida que as imagens s o inseridas podemos organiz las conforme sua ordem de disposi o podendo alterar atrav s das setas UP e DOWN que se encontram na barra de ferramentas Ap s montar a galeria com a inser o de imagens o passo agora gerar a galeria atrav s do bot o Gerar que se encontra na barra de ferramentas ou no menu Galeria Para completar essa a o devemos apenas indicar onde a galeria gerada dever ser salva No seu local de destino ser criada uma p gina chamada Index arquivo este que ser usado para visualiza o do LightBox que fora criado Publish gallery il xl U 2 Siw Imagens Templates Exportar Gerar M todo de Gerar Gerar para pasta E JAULASJAUXILIAR WEB DESIGN VisuallightBoxjDemo xl Procurar Index file name findex html Gerar para Servidor FTP Editar Pasta FTP I 81T Write the name of the folder where your gallery will be situated on the server Notice that you should specify this field otherwise your gallery will be uploaded into root folder of your server Insert to Page Procurar Open your HTML page Glick inside the page to select where you want your gallery to appear then click Insert After Procurar Joomla 1 5 module Ta create Gallery module2. VISUAL LIGHTBOX FERRAMENTA WEB DESIGN FABIANO KEIJI TAGUCHI Pagina 12 INTRODUCAO Trabalhar com imagens em Internet algo comum ali s s o as imagens que criar efeitos e nos chamam aten o em ambiente Web Trabalhando paralelamente com os v deos temos um software que permite a cria o de galerias din micas para trabalhar com imagens essa ferramenta chamada Visual LightBox permite tal tarefa Ap s a cria o dessas galerias podemos facilmente incrementar em nossos projetos atrav s da inser o dessas galerias em nosso site 1 VISUAL LIGHTBOX O software disponibilizado em duas vers es uma paga e outra gratuita a grande diferen a entre as vers es que a vers o free cria algumas propagandas da ferramenta em nossas cria es mas nada que pode nos atrapalhar O download pode ser feito atrav s do seguinte endere o http visuallightbox com Para entendimento da ferramenta podemos resumir nos seguintes passos a cria o de uma galeria Cria o de uma nova galeria Inser o de imagens Gera o da galeria Aplica o dos efeitos Gg A do Pe Disponibiliza o no site I x kud Nes Nu F W visualLightBox 5 0 1 Free version New gallery Galeria Imagens Op es Ajuda 1 ry a 9 Gerar Computador Tercei Computador Desktop Apple LCD ASUS Notebook Netbook 8 items Ue Figura 1 Apresenta o Inicial Vi
3. ge Thumbnail format PG IPG PEGFormat II TA Qualidade da miniatura 7 ST TA 7 90 Page color E Hex 0f0e0d T Use default Number of columns a J Thumbnail titles text graphic wl td Figura 3 Customizando Thumbnails 7 CUSTOMIZANDO A EXPORTACAO Da mesma forma que podemos customizar os thumbnails podemos customizar o aspecto da nossa apresentacao Essa customizacao acontece na hora da execucao a apresenta o das imagens vejamos quais aspectos podemos alterar e Template e Resolu o da imagem e Cor de sombra para execu o da apresenta o da imagem Publish gallery xj u aw Imagens Templates Exportar Gerar Template 2 Propriedades do Template A Resolu o da Imagem 640x480 SS Rice IV Preserve aspect ratio T Shrink large images Prever Template Stretch small images Qualidade da imagem TE E SETTE 72 1 1 1 1 1 W Hex jocqnnn FF Use default W Adicionar marca d gua Seleccione para activar esta op o Text VisualLightBox com Figura 4 Customizando V deos P gina 6 8 ADICIONADO UM LIGHTBOX A UM P GINA WEB Com o projeto salvo e a galeria gerada podemos iniciar a publica o de nossa Visual LightBox em um site para isso observamos a figura abaixo onde temos a op o para procurar em qual p gina iremos inserir nosso LightBox e em seguida nos mostrada a p gina onde devemos apenas
4. inserir o conte do Visual LightBox no local desejado Escolhemos o local clicaremos ent o no bot o Gerar e as modifica es ser o feitas automaticamente na p gina selecionada anteriormente Depois de inserido o LightBox podemos notar a cria o de duas tags de coment rios nos informando que um conte do LightBox foi inserido O detalhe que se quisermos excluir a LightBox da p gina devemos excluir os c digos que est o entre as tags de in cio e final dos c digos A escrita dessas tags segue o padr o lt start visuallightbox com BODY section id 1 gt zl End visuallightbox com BODY section zl Start visuallightbox com HEAD section zl End visuallightbox com HEAD section gt lt head gt visualLightBox 5 0 1 Page structure i HEAD ConhecimentoLivre net BODY Rondon polis Mato Grosso Brasil suporte conhecimentolivre net y Principal Quem So CONHECIMENTO O seu mais novo portal de educa o Informati Ca C ConhecimentoNews Tecnologia da Inform o Grupo ativista Anonymous ataca Figura 5 Publicando um LightBox
5. or plugin select folder where you want to save it and click Publish button Gallery ID 1 abrir p gina ap s gerar galeria iy Gerar x Fechar Figura 2 Gerando uma galeria P gina 14 3 ESTRUTURA DE UM DIRETORIO CRIADO A PARTIR DO VISUAL LIGHTBOX No momento que geramos uma galeria ou seja estamos publicando ela para ser disponibilizada ja em um site A estrutura de um diret rio de uma galeria cont m um arquivo chamado favicon e uma pasta que cont m todos os conte dos que foram utilizados em nossa galeria tomando como exemplo a cria o acima conter as imagens que serviram de base para montagem da galeria Somado a isso tudo o conte do JQuery e os objetos que ser o usados no momento da inser o desta galeria em uma p gina j se criam tamb m Este arquivo chamado de favicon nada mais que um cone a ser utilizado na visualiza o do arquivo index criado na galeria Uma ressalva a quest o dos navegadores que devido a incompatibilidades alguns n o permitem a visualiza o Na hora da execu o da p gina Index o software cria uma apresenta o dessas imagens trazendo o foco para visualiza o delas que fica centralizado na p gina 4 SALVANDO UMA GALERIA Aten o salvar uma galeria diferente de gerar uma galeria O processo de gera o de uma galeria na qual cria se um diret rio e nele os conte dos necess rios para publica o de um LightBox como visto no
6. sual LightBox O software dividido em quatro menus Galeria Imagens Op es e Ajuda cada um deles sendo respons vel pelas etapas de cria o de um Visual LightBox O primeiro menu chamado de Galeria permite que fa amos a cria o das galerias e das manipula es b sicas dessas galerias Novo Abrir e Salvar outra ferramenta encontrada neste menu a ferramenta Gerar que veremos mais a frente No menu Imagens temos as op es de inser o de imagens em nossas galerias podemos inserir imagens de tr s formas que estejam publicados em algum site Flickr Picasa lt QL Pagina 3 Google Photobucket imagens que estejam salvas em nosso computador e tamb m a op o de importar todas as imagens que est o dentro de uma pasta Quanto s extens es dessas imagens o software n o n s imp e limita es j que permitidas a inser o das mais tradicionais extens es que existem para manipula o de imagens variando desde as mais comuns JPG JPEG BMP GIF at outras menos conhecidas como TIFF DIB RLE e demais Por fim o menu Op es permite que possam trocar o idioma de apresenta o do software e o menu Ajuda nos informa es sobre o software e o manual de utiliza o 2 CRIANDO UMA GALERIA Quando iniciamos a utiliza o do software uma galeria nova automaticamente j criada bastando ent o que comecemos a inserir as imagens que far o parte desta galeria O passo agora inserir essas imagens
7. t pico acima a sua estrutura Salvar uma galeria vai ser til na hora da edi o pois n o conseguimos editar uma galeria somente com sua gera o precisamos salva l e sempre que necess ria edi o abrir a galeria que for salva para devidas altera es A extens o de uma galeria criada a partir do software a VISLB 5 EDITANDO UMA GALERIA Galeria salva a qualquer momento podemos fazer altera es para isso basta que seja aberta atrav s do menu Galeria e da op o Carregar Galeria Com isso permitido excluir ou inserir imagens Terminamos a edi o devemos salvar a galeria por m n o podemos esquecer de gerar novamente essa galeria alterada para que a estrutura de diret rios seja atualizada consequentemente o arquivo index gerado tamb m atualizado 6 CUSTOMIZANDO THUMBNAILS TEMPLATE Thumbnails s o imagens que o software extrai das imagens que inserimos em nossa galeria para utilizar como representa o na cria o da p gina HTML esses thumbnails s o utilizados como forma de bot o para iniciar a execu o da apresenta o das imagens Podemos customizar esses thumbnails em alguns aspectos como lt P gina 5 e Template e Tamanho da resolu o e formato da imagem e Cor da p gina de fundo e N mero de thumbnails por coluna Publish gallery x UE Templates Exportar Gerar Template Propriedades do Template Resolu o das miniatu zoo A EE T Fit ima
Download Pdf Manuals
Related Search