Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 4 usuários online :: 0 registrados, 0 invisíveis e 4 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Slides em widgets
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
[TUTORIAL] Slides em widgets
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | 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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
1 - Código a ser utilizado:
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
<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: [ 'https://2img.net/r/ihimizer/img801/833/left.gif', 'https://2img.net/r/ihimizer/img185/4655/playf.gif', 'https://2img.net/r/ihimizer/img824/9263/right.gif', 'https://2img.net/r/ihimizer/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>
Imagem -> Imagem que aparecerá no slide
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: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
["Imagem", "Link]", "_new", "Título"]
Sempre adicionando uma virgula após cada código.
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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Módulos [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Portal & Widgets [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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: [Dúvida] Slides em widgets |
Tópicos semelhantes
» [TUTORIAL] Ocultar os widgets do fórum
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
» [TUTORIAL] Tabelas em BBCode
» [TUTORIAL] Logo aleatório
» [TUTORIAL] Enfeites de natal
» [TUTORIAL] O que são bots e sua finalidade
» [TUTORIAL] Tabelas em BBCode
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Scripts HTML, BBCode e Javascript
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry