Sem resumo de edição |
|||
| (30 revisões intermediárias por 3 usuários não estão sendo mostradas) | |||
| Linha 1: | Linha 1: | ||
=== Introdução === | |||
O [https://www.mediawiki.org/wiki/Extension:JavascriptSlideshow JavaScriptSlideshow] é uma extensão simples para o uso de carrossel de imagens na wiki. | |||
=== Uso de imagens === | |||
Deve ser feito antes o upload das imagens na página de [[Especial:Carregar arquivo|Enviar Arquivos]] | |||
[[Arquivo:fotosCarrosel1.jpg|center|150px]] | |||
=== Código-Base === | |||
<syntaxhighlight lang="html" line="1"> | |||
<slideshow sequence="random" transition="fade" refresh="10000"> | |||
<div>[[Arquivo:Image1.jpg|thumb|right|128px|Caption 1]]</div> | |||
<div>[[Arquivo:Image2.jpg|thumb|right|128px|Caption 2]]</div> | |||
<div>[[Arquivo:Image3.jpg|thumb|right|128px|Caption 3]]</div> | |||
</slideshow> | </slideshow> | ||
</syntaxhighlight> | |||
=== Opções do Carrossel === | |||
* refresh: tempo de troca de imagens em milissegundos; | |||
* transition: estilo de transição de imagens. Opções disponiveis: cut, fade, blindDown; | |||
* sequence: a sequência de exibição das imagens. Opções disponíveis: random(aleatório), forward(ordem normal), backward(ordem inversa); | |||
* transitiontime: tempo que a transição demora pra ser executada; | |||
=== Opções das imagens === | |||
* thumb: miniatura; | |||
* left, center, right: alinhamento; | |||
* XYZpx: tamanho de exibição da imagem; | |||
* Captions são as legendas de cada imagem. | |||
[[Arquivo:fotosCarrosel1.jpg]] | === Exemplos === | ||
<syntaxhighlight line="1"> | |||
<slideshow sequence="forward" transition="fade" refresh="3000" transitiontime="200"> | |||
<div>[[Arquivo:fotosCarrosel1.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel3.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel4.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel5.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel7.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel8.JPG|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel9.JPG|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel10.jpg|center|thumb|400px]]</div> | |||
<div>[[Arquivo:fotosCarrosel11.jpg|center|thumb|400px]]</div> | |||
</slideshow> | |||
</syntaxhighlight> | |||
<slideshow sequence="forward" transition="fade" refresh="1000" transitiontime="200"> | |||
<div>[[Arquivo:fotosCarrosel7.jpg|center|thumb|600px|Laboratório de Inovação Tecnológica]]</div> | |||
<div>[[Arquivo:fotosCarrosel8.JPG|center|thumb|600px|Espaço de inovação - Centro administrativo]]</div> | |||
<div>[[Arquivo:fotosCarrosel9.JPG|center|thumb|600px|Espaço de inovação - Centro administrativo]]</div> | |||
<div>[[Arquivo:fotosCarrosel10.jpg|center|thumb|600px|LIT - Laboratório de Inovação Tecnológica]]</div> | |||
<div>[[Arquivo:fotosCarrosel11.jpg|center|thumb|600px|LIT - Laboratório de Inovação Tecnológica]]</div> | |||
<div>[[Arquivo:fotosCarrosel1.jpg|center|thumb|600px|LIT - Laboratório de Inovação Tecnológica]]</div> | |||
<div>[[Arquivo:fotosCarrosel3.jpg|center|thumb|600px|Espaço Eureka - Granja Marileuza]]</div> | |||
<div>[[Arquivo:fotosCarrosel4.jpg|center|thumb|600px|Espaço Eureka - Granja Marileuza]]</div> | |||
<div>[[Arquivo:fotosCarrosel5.jpg|center|thumb|600px|Espaço Eureka - Granja Marileuza]]</div> | |||
</slideshow> | |||
Edição atual tal como às 20h22min de 2 de maio de 2018
Introdução
O JavaScriptSlideshow é uma extensão simples para o uso de carrossel de imagens na wiki.
Uso de imagens
Deve ser feito antes o upload das imagens na página de Enviar Arquivos
Código-Base
<syntaxhighlight lang="html" line="1"> <slideshow sequence="random" transition="fade" refresh="10000">
</slideshow> </syntaxhighlight>
Opções do Carrossel
- refresh: tempo de troca de imagens em milissegundos;
- transition: estilo de transição de imagens. Opções disponiveis: cut, fade, blindDown;
- sequence: a sequência de exibição das imagens. Opções disponíveis: random(aleatório), forward(ordem normal), backward(ordem inversa);
- transitiontime: tempo que a transição demora pra ser executada;
Opções das imagens
- thumb: miniatura;
- left, center, right: alinhamento;
- XYZpx: tamanho de exibição da imagem;
- Captions são as legendas de cada imagem.
Exemplos
<syntaxhighlight line="1"> <slideshow sequence="forward" transition="fade" refresh="3000" transitiontime="200">
</slideshow> </syntaxhighlight>
<slideshow sequence="forward" transition="fade" refresh="1000" transitiontime="200">
</slideshow>