[TUTORIAL] Widget "Álbum" personalizado

Neste tutorial você irá aprender como pode fazer um Widget personalizado como o widget "Album" através de códigos HTML e, com os mesmos efeitos e sem limites de imagens.
Os pontos de maior relevância do mesmo é o facto de, o administrador poder escolher quais fotos deseja manter, o tamanho, o texto e o endereço (link) das imagens que serão utilizadas.

--> Tutorial <--
Widget "Álbum" personalizado

/ ! \ Atenção, pois a inserção deste widget não poderá acontecer juntamente com o widget original "Álbum", pois são incompatíveis, provocando a desactivação dum dos widgets.


1º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;

Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal
Depois terá de escolher:
Estrutura -> Criar um widget personalizado

Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.

Criar um widget personalizado - Terá de carregar neste botão para poder criar o seu novo widget;

2º - Teremos de configurar a aparência do nosso Widget:

Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle;

Utilizar um table type - Escolhe a opção "Não", para que o widget, não apresente nenhuma estrutura, ou, poderá escolher "sim para que tenha a estrutura dos Widgets do seu fórum;

Título do widget - Neste campo, terá de atribuir um título, o que será visualizado no seu fórum. Caso tenha marcado a opção acima, colocar ou não será indiferente;

Fonte do widget - Aqui deverá colocar o código do Bloco de notas, código esse, que será fornecido nos passos seguintes;

Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página.

3º - Agora teremos de aplicar o conteúdo no widget. Copie exactamente como está em baixo, para poder distinguir, quais as partes que terá de modificar;

• Código normal que iremos utilizar:

<script type="text/javascript">
var ssfx = { 'clock' : null, 'fade' : true, 'count' : 1 };
var slideShowSpeed = 5;
var Pic = new Array();
var Tit = new Array();
var Link = new Array();

Pic[0] = 'Endereço da imagem';
Tit[0] = 'Título da imagem';
Link[0] = 'Endereço de redireção';

var j = 0;
var i = 0;
var p = Pic.length;
var rnd_nmbv = 0;
ssfx.cache = [];
for (i = 0; i < p; i++)
{ssfx.cache = new Image;ssfx.cache[i].src = Pic[i];}
function runSlideShow(){
if ( ssfx.cache[0] ){rnd_nmb = (Math.round((Math.random() + 0.5) * 4) - 1);
if (document.all){document.getElementById('SlideShowPic').style.filter="blendTrans(duration=FXDuration)";
if ( navigator.appName == 'Opera' ){document.getElementById('SlideShowPic').filters.blendTrans.Apply;
}
else
{document.getElementById('SlideShowPic').filters.blendTrans.Apply();
}}document.getElementById('SlideShowPic').src = ssfx.cache[j].src;
if (document.all){if ( navigator.appName == 'Opera' ){document.getElementById('SlideShowPic').filters.blendTrans.Play;
}
else{document.getElementById('SlideShowPic').filters.blendTrans.Play();
}}document.getElementById('PicTitle').innerHTML = Tit[j];
document.getElementById('PicTitle').href = Link[j];
document.getElementById('PicImg').title = Tit[j];
document.getElementById('PicImg').alt = Tit[j];
document.getElementById('PicImg').href = Link[j];
j = j + 1;if (j > (p - 1)){j = 0;
}}t = setTimeout('runSlideShow()', (slideShowSpeed * 1000));
}
</script>

<p class="center">
<a href="#" id="PicTitle"></a>
<br />
<div class="center" style="min-height:125px;">
<a href="#" id="PicImg"><img src="http://illiweb.com/fa/empty.gif" alt="" title="" id="SlideShowPic" style="border: 2px dashed #cfcfcf; padding: 8px; margin-top: 5px;"></a>
</div>
</p>
<script type="text/javascript">runSlideShow();</script>

O número 5 assinalado a azul representa a velocidade de transição entre imagens.

Agora que já colocamos o código no widget, vamos modificar o que está a vermelho pelo conteúdo:
Primeiramente, você terá que, sempre que adicionar uma imagem utilizar o código, apenas copiando um abaixo do outro e, fazendo as modificações que serão mostradas abaixo:

Pic[0] = 'Endereço da imagem';
Tit]0] = 'Título da imagem';
Link]0] = 'Endereço de redireção';

Mas, para cada imagem o valar que existe dentro dos colchetes (valor indicando o número da imagem) terá de ser mudado por exemplo: [i] [1] [2] [3] .
- Endereço da imagem -> Aqui você deverá substituir pelo endereço da imagem que será exibida. lembre-se, este campo deve conter um endereço terminado em formatos de imagem ( .jpg .gif .png ) são os mais recomendados.
- Título da imagem -> Aqui você deverá colocar o título que será exibido quando a imagem for mostrada.
- Endereço de redireção -> Aqui você deverá colocar o endereço para qual o título irá redirecionar quando clicado.

Por exemplo, para quatro imagens, iríamos substituir a parte vermelha no código por:

Pic[0] = 'Endereço da imagem 1';
Tit[0] = 'Título da imagem 1';
Link[0] = 'Endereço de redireção 1';

Pic[1] = 'Endereço da imagem 2';
Tit[1] = 'Título da imagem 2';
Link[1] = 'Endereço de redireção 2';

Pic[2] = 'Endereço da imagem 3';
Tit[2] = 'Título da imagem 3';
Link[2] = 'Endereço de redireção 3';

Pic[3] = 'Endereço da imagem 4';
Tit[3] = 'Título da imagem 4';
Link[3] = 'Endereço de redireção 4';

4º - Agora teremos de colocar o widget criado, na estrutura do Portal.
Para isso terá de aceder a:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura

Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.

Widget personalizado - Depois de entrar na estrutura da página, terá de localizar o widget personalizado, que se encontra no separador "Widgets pessoais", por baixo da matriz do Portal.

"Salvar" Portal - Agora que está localizado o widget, mova-o para a matriz do Portal, através do método drag&drop (arrastar e soltar). Depois de efectuar essa acção, terá de carregar em "salvar", para que o Portal seja actualizado.

5º - Veja o resultado final em uma animação;
Este é um possível resultado, utilizando a velocidade de 2 segundos e um conjunto de 4 imagens:

--> FAQ <--
Widget "Álbum"

• Quantas imagens posso colocar?!
  Poderá colocar quantas imagens quiser mas, lembre-se que, a numeração das imagens começa no zero (0) e, termina na última imagem.

• As imagens podem ser de tamanhos variados?
  sim, poderá utilizar imangens do tamanho que desejar mas, cuidado pois, elas pdem deformar o portal.
  
• Mas, elas se redimensionam automáticamente?!
  Não, o script fornecido não fazz nenhum tipo de alteração nas dimensões da imagem, tendo que o administrador hospeda-las já no tamanho desejado.

• Porque meu código não está funcionando?!
  Isso pode ocorrer pois você não adicionou corretamente as imagens no local onde devia. Para resolver este problema crie um tópico no fórum "Problemas com um script" para que possamos ajudar.

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Widget "Galeria"