Slidebox How To

Este componente permite criar um slideshow de imagens em popup a partir de uma lista em html que degrada graciosamente na falta de javascript.

Demo

 http://js.sapo.pt/SAPO/Component/Slidebox/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/Element/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/Effects/Core/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Effects/Fade/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Dialog/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Gallery/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Slidebox/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: configura??o inicial

C?digo HTML necess?rio

<div id="gallery" class="SAPOSlidebox">
    <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.Slidebox({
    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
• prevLabel (default: Anterior): Texto para o hover link Anterior
• nextLabel (default: Pr?xima): Texto para o hover link Pr?xima
• onChange (default: false): Callback executada a cada mudan?a de imagem
• showCaption (default: true): Mostrar a caption
• initialWidth (default: 50): Largura inicial do popup antes de este ser reajustado para o tamanho da imagem
• initialHeight (default: 50): Altura inicial do popup antes de este ser reajustado para o tamanho da imagem

Segundo modo: criar o slideshow programaticamente

C?digo JS necess?rio

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