[TUTORIAL] Slides em widgets
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1 • Compartilhe
[TUTORIAL] Slides em widgets
Slides em widgets |
Usando como base este tutorial, pode-se adicionar imagens e textos em um determinado widget em forma de slides. Dessa forma, é possível adicionar imagens e de modo que as imagens fiquem mais organizadas e dando um tom de elegância ao fórum.
--> Tutoriais & Astúcias <--
Slides em widgets
Slides em widgets
Para que possamos prosseguir com o tutorial, é preciso que tenha noção sobre a edição dos widgets, que serão necessários para a continuação deste tutorial. Para isso, veja: [FAQ] Gerenciar os Widgets do Fórum |
1 - Código a ser utilizado:
- Código:
<script type="text/javascript" src="http://steeph.vilabol.uol.com.br/slidedenovidades/slide3_script1.js"></script>
<script type="text/javascript" src="http://steeph.vilabol.uol.com.br/slidedenovidades/slide3_script2.js"></script>
<script>
var simpleGallery_navpanel={
panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
images: [ 'http://img801.imageshack.us/img801/833/left.gif', 'http://img185.imageshack.us/img185/4655/playf.gif', 'http://img824.imageshack.us/img824/9263/right.gif', 'http://img291.imageshack.us/img291/3786/paused.gif' ], //nav panel images (in that order)
imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
slideduration: 500 //duration of slide up animation to reveal panel
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [500, 220], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["Imagem", "Link]", "_new", "Título"],
],
autoplay: [true, 2500, 50], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script><div class="slideshowborda" id="simplegallery1" style="z-index:1;">
</div>
Link -> Link de redireção de quando for clicado na imagem
Título -> O título que se apresenta no cabeçalho
Caso queira adicionar mais imagens e links, é só multiplicar a parte:
- Código:
["Imagem", "Link]", "_new", "Título"]
2 - Criar um widget para sustentar o código:
Para que possamos adicionar o código, teremos de criar um widget, que será onde o código ficará. Para isso é necessário aceder à:
Painel de controle Módulos Portal & Widgets Widgets
Nome do widget - Pode colocar o título que quiser para o widget, não irá afetar em nada. |
Utilizar um table type : - Esta terá de ser obrigatóriamente sim. Caso marque-a, o código não irá funcionar adequadamente. |
Título do widget : - O título que desejar, também não afeta em nada. |
Fonte do widget: - Coloque aqui o código que trabalhamos no item anterior. |
- Resultado:
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Slides em widgets |
Tópicos semelhantes
» Slides nos widgets
» Slides em widgets
» [TUTORIAL] Ocultar os widgets do fórum
» Slides em widgets
» [TUTORIAL] Multiplicar os widgets de votação
» Slides em widgets
» [TUTORIAL] Ocultar os widgets do fórum
» Slides em widgets
» [TUTORIAL] Multiplicar os widgets de votação
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos