Ajuda

Antes de começar a usar a ShowCase, você precisa fazer o download dos arquivos.

O próximo passo é instalar a ShowCase.
Para isso apenas adicione algumas linhas no cabeçalho da sua página html:

<!-- scripts --> <script src="scripts/showcase.js" type="text/javascript"> </script> <script src="lib/prototype.js" type="text/javascript"> </script> <script src="lib/scriptaculous.js" type="text/javascript"> </script> <!-- CSS --> <link rel="stylesheet" href="styles/showcase.css" type="text/css" media="screen">

Usando o DOM

A maneira mais recomendada de carregar os dados é através do DOM. Assim, você não comprometerá a acessibilidade da sua página além do conteúdo poder ser visualizado mesmo em navegadores sem suporte à JavaScript.

Um código simples para carregar os dados direto da página:
<!-- Dados das imagens --> <div class="slideshow" id="slideshow"> <div class="frame"> <h2>Título da imagem</h2> <p>Descrição da imagem</p> <a href="alguma_pagina.html" title="Imagem XYZ"></a> <img src="link_para_a_imagem.jpg"> <img src="link_para_o_icone.jpg" class="icon"> </div> </div> <!-- Fazendo a mágica acontecer --> <script type="text/javascript"> // apenas crie o objeto slideshow usando o elemento acima. new ShowCase("slideshow"); </script> » Veja um exemplo do código em ação!

Simples, não?

• um elemento da classe "frame" é usado para cada frame da ShowCase. Aqui eu usei o DIV, mas você pode usar qualquer elemento com a classe "frame"
• H2 é usado para o título da imagem
• P é usado para a descrição da imagem
• A é usado para o link da imagem. O único atributo usado pela ShowCase é href, mas outros atributos podem ser usados normalmente no elemento.
• IMG é usado tanto para a imagem quanto para o ícone da imagem. O ícone deve ser da classe "icon".

A ordem dos elementos não é importante, e você pode omitir elementos como a descrição ou título da imagem. O único elemento obrigatório é a imagem.

Usando um arquivo XML

Alternativamente, você pode carregar os dados diretamente de um arquivo XML externo.

Os arquivos XML usados pela showcase têm esse formato: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE showcase [ <!ELEMENT showcase (item)*> <!ELEMENT item (image,(title)?,(short)?,(link)?,(icon)?)> <!ELEMENT image (#PCDATA)> <!ELEMENT title (#PCDATA)> <!ELEMENT short (#PCDATA)> <!ELEMENT link (#PCDATA)> <!ELEMENT icon (#PCDATA)> ]> <showcase> <item> <image>case/image1.jpg</image> <title>Lake Angel</title> </item> <item> <image>case/image2.jpg</image> <title>A Tree</title> </item> <item> <image>case/image3.jpg</image> <title>The City at Night</title> </item> <item> <image>case/image4.jpg</image> <title>Field of Dreams</title> </item> </showcase> E com um pouco de JavaScript... new ShowCase("slideshow", { filename: "slideshow.xml" }); » Voílà! Veja o código em ação