1. Gallery How To
    1. Demo
    2. Configuração inicial
    3. Primeiro modo: lista em html
    4. Segundo modo: criar a galeria programaticamente
    5. Métodos adicionais

Gallery How To

Este componente permite criar uma galeria de imagens de duas formas:

  • a partir de uma lista em html
  • programaticamente, para uso em outros componentes javascript

Quando criada a partir do primeiro modo, a lista degrada graciosamente na falta de javascript.

Demo

 http://js.sapo.pt/SAPO/Component/Gallery/sample/



Configuração inicial

Para utilizar este componente são necessários os seguintes ficheiros: 

<link href="http://js.sapo.pt/Assets/Images/Gallery/style.css" type="text/css" media="screen" rel="Stylesheet" />
<script type="text/javascript" src="http://js.sapo.pt/SAPO/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Event/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Css/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Utility/Dimensions/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Gallery/0.1/"></script>

O ficheiro de estilos pode ser omitido, mas neste caso é necessário especificar css semelhante ao presente neste ficheiro que permita o mesmo comportamento.





Primeiro modo: lista em html


Código HTML necessário

<div id="gallery" class="SAPOGallery">
    <a href="#" class="first">Primeira</a>
    <a href="#" class="previous">Anterior</a>
    <a href="#" class="next">Próxima</a>
    <a href="#" class="last">Última</a>
    <ul class="thumbs">
        <li>
            <a href="http://image.url/file_original.jpg" title="titulo da imagem">
                <img src="http://image.url/file_thumbnail.jpg" alt="titulo da imagem" />
            </a>
            <div class="caption">Legenda para a imagem</div>
        </li>
	</ul>
</div>
  • A id do div container pode ser especificada pelo utilizador.
  • Os links são opcionais, e podem ser usados apenas anterior/proxima ou primeira/ultima.
  • O div de caption também é opcional.
  • As classes presentes são necessárias ao funcionamento do componente e podem ser também usadas para styling do componente
  • Os links de Anterior/Próxima têm uma classe disabled quando se está na primeira/última imagem, respectivamente
  • No código gerado, irá existir um container com uma classe SAPOGalleryStage para a imagem que está a ser mostrada
  • No código gerado, irão existir 2 links anterior/proxima que aparecem ao fazer hover sobre a imagem, com classes prev/next respectivamente, e disabled quando na primeira/última. Estes links estão dentro do div com a classe SAPOGalleryStage



Código JS necessário

new SAPO.Component.Gallery({
    container: "gallery"
});

Não esquecer de colocar este código dentro de um dom ready ou apenas no final da página.

Além do parâmetro container que indica o elemento que contém a estrutura de HTML necessária à galeria, existem outros parâmetros adicionais:

  • hoverControls (default: true): Activa botoes de prev/next que aparecem ao fazer hover na imagem
  • hoverThumbs (default: false): Usa thumbnails das imagens em vez de texto nos hover links
  • navThumbs (default: false): Usa thumbnails das imagens nos links exteriores de prev/next
  • pageThumbs (default: false): Define um número por página para fazer paginação das thumbnails visíveis
  • prevLabel (default: Anterior): Texto para o hover link Anterior
  • nextLabel (default: Próxima): Texto para o hover link Próxima
  • prevPageLabel (default: <<): Texto para o link da pagina de thumbnails anterior
  • nextPageLabel (default: >>): Texto para o link da pagina de thumbnails seguinte
  • showList (default: true): Mostrar a lista de thumbnails
  • onChange (default: false): Callback executada a cada mudança de imagem





Segundo modo: criar a galeria programaticamente


Código JS necessário

Neste modo é necessário especificar um array list com objectos relativos a cada imagem a ser carregada. 

var gal = new SAPO.Component.Gallery({
    list: [
		{
			href: "http://image.url/file_original.jpg",
			thumb: "http://image.url/file_thumbnail.jpg",
			title: "image title",
			caption: "image caption"
		}
    ]
});

Após inicializar, é necessário usar o método getGallery para ter acesso à markup gerada para a galeria, e introduzi-la no DOM. Por exemplo: 

document.body.appendChild(gal.getGallery());

Todas as opções do primeiro modo são aplicáveis. Existem mais algumas opções apenas para este modo:

  • navLinks (default: false): Adiciona links externos de navegação Próxima/Anterior?
  • endsLinks (default: false): Adiciona links externos de Primeira/Última
  • prevLabel (default: Anterior): Texto para o hover link Anterior ou para o link externo
  • nextLabel (default: Próxima): Texto para o hover link Próxima ou para o link externo
  • firstLabel (default: Primeira): Texto para o link externo Primeira
  • lastLabel (default: Última): Texto para o link externo Última
  • showCaption (default: true): Mostrar a caption





Métodos adicionais

  • gotoPrev - Avança para a imagem anterior
  • gotoNext - Avança para a próxima imagem