Colocando um Slideshow no Fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Colocando um Slideshow no Fórum

Mensagem por Tathi em 27/04/11, 11:01 pm

Qual é sua questão:
Oi! Então, eu queria pôr um slider no fórum, mas especificamente no Portal.
Seria um slider como esse: http://nivo.dev7studios.com/
Ou esse: http://www.sohtanaka.com/web-design/examples/image-slider/
Mas eu tb não veria problema se fosse outro.
Alguém tem alguma ideia de como que eu faria isso?

Que medidas você tomou para corrigir o problema:
Bom, não foi bem um 'problema', mas enfim, vou contar o que estive fazendo: O código html eu coloquei num widget próprio que fiz pro slider. O código CSS eu coloquei no CSS do fórum. Mas o código java eu n sei onde coloco.

Apresente-nos imagens do problema (se necessário):


Última edição por Tathi em 04/05/11, 02:36 am, editado 1 vez(es)
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por valeria-o em 27/04/11, 11:38 pm

Muito Interessante esse slide tambem queria esse codigo
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Needke em 28/04/11, 06:39 am

Olá Tathi,

Creio que será possível montar esse slider, no entanto, precisarei que explique-nos como pretende exactamente, com as suas respectivas imagens e endereços.

Att, Needke
avatar

Needke
Usuário experiente

Masculino
Inscrito dia : 19/08/2009
Mensagens : 2761
Pontos Ativos : 4546

Ver perfil do usuário

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por valeria-o em 28/04/11, 08:53 am

esse codigo a seguir atende as suas nessesidades, e so fazer algumas modificações, como endereço da imagen, e url do seu forum.


<style type="text/css">

#tv a {
font-size:16px;
font-weight:bold;
}

#tv span {
color:#434343;
font-size:12px;
font-weight:normal;
}

#hid {
display:none;
left:-5000px;
position:absolute;
top:-5000px;
}

#tv #nav {
height:170px;
left:359px;
overflow:hidden;
position:absolute;
top:5px;
width:46px;
}

#tv #nav img {
cursor:pointer;
height:30px;
margin:0 0 5px;
width:46px;
}

#tv .opac {
margin-bottom:5px;
opacity:1;
}

#tv .transp {
margin-bottom:5px;
opacity:0.1;
}


#tv img {
display:block;
margin-bottom:7px;
margin-left:-10px;
border:thin solid;
}
img {
border:medium none;
}

#tv {
background:url("http://a.imageshack.us/img198/2656/tvbg.png") no-repeat scroll 0 0 transparent;
float:left;
height:255px;
overflow:hidden;
padding:0 61px 0 10px;
position:relative;
width:344px;
}

#corpoh {
text-align:left;
}

</style>


<div id="tv">
<script type='text/javascript'>
// JavaScript para tv //
var index = 1; var menu_time = 6000; var anterior = 5; var timer = setTimeout('trocaMsg()',menu_time);
function trocaMsg() { index = index%5 +1; channel(index); tempo(); }
function tempo() { clearTimeout(timer); timer = setTimeout("trocaMsg()",menu_time);}
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tv' + id).innerHTML; anterior = id;}
function tvch(id, out) {if (out == 1) { clearTimeout(timer); channel(id);} else { tempo();}}
//channel(1);




// JavaScript para tv-papeis //
var index_p = 1; var menu_time_p = 2800; var anterior_p = 5; var timer_p = setTimeout('trocaMsg_p()',menu_time_p);
function trocaMsg_p() { index_p = index_p%5 +1; channel_p(index_p); tempo_p(); }
function tempo_p() { clearTimeout(timer_p); timer_p = setTimeout("trocaMsg_p()",menu_time_p);}
function channel_p(idx) { index_p = idx; document.getElementById("tvp" + anterior_p).className= "transp"; document.getElementById("tvp" + idx).className = "opac"; document.getElementById('paptv').innerHTML=document.getElementById('ptv' + idx).innerHTML; anterior_p = idx;}
function tvch_p(idx, out) {if (out == 1) { clearTimeout(timer_p); channel_p(idx);} else { tempo_p();}}
//channel_p(1);

//Função p/ n Aparecer erro de JS no navegador do Tiozinho
function semerro(){
return true;}
window.onerror=semerro;

</script>


<div id="tvshow">

<!-- SLIDE INICIAL-->

<a href="http://1.bp.blogspot.com/_SQlLjkpotBo/Sm5KJ42ZusI/AAAAAAAAAK4/IegmCz-tjfo/S1600-R/Sem+t%C3%ADtulo+1.jpg"><img height="177" width="354" src="http://elementdowns.blogspot.com/search/label/video%20aulas" title="Fernando Lou" />

eleiçoes 2012


<span>
Em 2012 Vote Com o Coraçao

</span></a></div>



<div id="nav">

<!-- SLIDE DE NAVEGAÇÕES // escolher o slide a ser visto-->

<!-- SLIDE DE NAVEGAÇÃO 1-->

<a href="http://elementdowns.blogspot.com/search/label/video%20aulas"><img height="30" width="46" onmouseout="tvch(1,0)" onmouseover="tvch(1,1)" src="http://1.bp.blogspot.com/_SQlLjkpotBo/Sm5KJ42ZusI/AAAAAAAAAK4/IegmCz-tjfo/S1600-R/Sem+t%C3%ADtulo+1.jpg" class="transp" id="tvn1" /></a>

<!-- SLIDE DE NAVEGAÇÃO 2-->

<a href="http://elementdowns.blogspot.com/search/label/Linux"><img height="30" width="46" onmouseout="tvch(2,0)" onmouseover="tvch(2,1)" src="http://databytegrajau.files.wordpress.com/2009/12/linux1.jpg" class="opac" id="tvn2" /></a>

<!-- SLIDE DE NAVEGAÇÃO 3-->

<a href="http://elementdowns.blogspot.com/search/label/Anti-Virus"><img height="30" width="46" onmouseout="tvch(3,0)" onmouseover="tvch(3,1)" src="http://2.bp.blogspot.com/_6wpjcdoMXQc/SZSO1sAFQZI/AAAAAAAAAA0/Rwid1mY82ag/s320/antivirus.gif.jpg" class="transp" id="tvn3" /></a>

<!-- SLIDE DE NAVEGAÇÃO 4-->

<a href="http://elementdowns.blogspot.com/search/label/Compactadores"><img height="30" width="46" onmouseout="tvch(4,0)" onmouseover="tvch(4,1)" src="http://img.banjig.net/d/bb/user_uploads/301381/winrar_jpg_c7c722b8.jpg" class="transp" id="tvn4" /></a>

<!-- SLIDE DE NAVEGAÇÃO 5-->

<a href="http://elementdowns.blogspot.com/search/label/hacker"><img height="30" width="46" onmouseout="tvch(5,0)" onmouseover="tvch(5,1)" http: / /www.asupr.com /asureport /wp-content /uploads /2008 /10 /hacker1.jpgclass="transp" id="tvn5" /></a>
</div>


<ul id="hid">

<!-- SLIDES-->

<!-- SLIDE 1-->

<li id="tv1">
<a href="http://elementdowns.blogspot.com/search/label/video%20aulas"><img height="177" width="354" src="http://1.bp.blogspot.com/_SQlLjkpotBo/Sm5KJ42ZusI/AAAAAAAAAK4/IegmCz-tjfo/S1600-R/Sem+t%C3%ADtulo+1.jpg" title="conduit " />

video aulas


<span>

assista as video aulas e tire todas as suas duvidas

</span></a></li>


<!-- SLIDE 2-->

<li id="tv2">
<a href="http://elementdowns.blogspot.com/search/label/Linux"><img height="177" width="354" src="http://databytegrajau.files.wordpress.com/2009/12/linux1.jpg" title="Google Chrome 6 Beta" />

linux


<span>

Linux tudo o que vc precisa saber e baixar para linux esta aki

</span></a></li>

<!-- SLIDE 3-->

<li id="tv3">
<a href="http://elementdowns.blogspot.com/search/label/Anti-Virus"><img height="177" width="354" src="http://2.bp.blogspot.com/_6wpjcdoMXQc/SZSO1sAFQZI/AAAAAAAAAA0/Rwid1mY82ag/s320/antivirus.gif.jpg" title="Artisteer" />

anti-virus


<span>

baixe os melhores antivurus para seu pc e proteja-se contra todo tipo de ameaça

</span></a></li>

<!-- SLIDE 4-->

<li id="tv4">

<a href="http://elementdowns.blogspot.com/search/label/Compactadores"><img height="177" width="354" src="http://img.banjig.net/d/bb/user_uploads/301381/winrar_jpg_c7c722b8.jpg" title="AquaSnap" />

compactadores


<span>

todos os compactadores que vc precisa esta em um so lugar

</span></a></li>

<!-- SLIDE 5-->

<li id="tv5">

<a href="http://elementdowns.blogspot.com/search/label/hacker"><img height="177" width="354" src="http://www.asupr.com/asureport/wp-content/uploads/2008/10/hacker1.jpg" title="TK" />

Hacker


<span>

Programas hacker baixe os melhores e mais atualizados programas hacker

</span>

</a></li>
</ul>


<script type="text/javascript">
channel(1);
</script>
</div>
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Tathi em 28/04/11, 09:41 am

valeria-o do céu! Era bem isso que eu queria!! Exatamente isso que eu queria, mesmo!!

Você podia me dizer como conseguiu?

Eu adorei esse slider que você passou, mas se eu pudesse ter um que fosse um pouquinho maior (mais especificamente mais largo) aí seria mais perfeito ainda! Se eu aumentar o tamanho da imagem de base (esta imagem aqui: http://a.imageshack.us/img198/2656/tvbg.png) vc acha que o slider aumenta normalmente?
Vou tentar aumentá-la mais tarde. Agora estou meio cansada e preciso dormir....

Mas poxa, obrigada mesmo!

Vou deixar esse tópico sem o botão de resolvido por enquanto só pra ver se mais alguém, ou até você mesma, vai vir com algum código diferente.

Needke, obrigada por ter vindo tão solícito, embora valeria-o tenha se adiantado antes que eu pudesse te responder! Baseando-se no que ela me postou, agora vc tem uma ideia melhor do que pedi?
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por valeria-o em 28/04/11, 07:32 pm

é so mi passar os link da suas imagens que montarei pra voçê com o tamanho nessesaria abraçoss..
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Tathi em 28/04/11, 09:44 pm

valeria-o, muito obrigada!

Tipo, eu sei mexer e mudar as imagens, eu só precisaria mesmo do código com as proporções do tamanho que ficasse melhor no meu fórum.

Eu queria um slider com 630px de largura por 230px de altura, e que ficasse centralizado no widget.

Não sei se é mais fácil ou mais difícil de conseguir, mas eu prefiro os widgets que têm setas na direita e na esquerda para que você role para imagem seguinte ou anterior. Ou até que tenha botões de 1, 2, 3, 4... ou Bolinhas pra vc clicar e ir navegando pelas imagens. E eu também gostaria que esses botões ou bolinhas estivessem na parte de baixo do widget, e não à direita.

Desculpe se estiver abusando x_x Eu realmente amei o slider que você me passou, mas ficaria mais alegre se ele pudesse ficar um tiquinho diferente. Eu realmente queria algo bem parecido com esse da Nivo: http://nivo.dev7studios.com/
(Ou, se possível, igual ao da Nivo xD)

Muuuuito obrigada por ter vindo me dar esse help! Sou mesmo muito grata! ;D
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por valeria-o em 29/04/11, 07:15 pm

minha querida siga esse link, com certeza tende suas nessesidades, ja que entende. http://dev7studios.com/blog/resources/skinning-the-nivo-slider/
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Tathi em 29/04/11, 08:35 pm

Ai que dó, valeria-o! Esse é simplesmente PERFEITO, e eu AMEI, mas não funcionou quando coloquei o html no widget e o CSS no CSS... D:
Tem alguma ideia?
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por valeria-o em 29/04/11, 09:29 pm

vou dar uma olhada e poste em pouco tempo
avatar

valeria-o
Nível 5

Feminino
Inscrito dia : 20/04/2011
Mensagens : 48
Pontos Ativos : 76

Ver perfil do usuário http://informaticaeaqui.forumeiros.com/

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Tathi em 01/05/11, 09:54 pm

UP~ E então? '-' Conseguiu algo?
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Steeph em 02/05/11, 08:35 am

Olá!
Bem eu não consegui mexer nesse slide da Dev7, infelizmente!
É um slide muito bonito, admito que tentei muito! Queria até eu mesma usar em meu fórum mas não consegui colocá-lo direito, apenas em sites...
Eu tenho este, que uso em meu fórum, se quiser poderá usar no seu também! Ele é super simples, não exije praticamente nada...
Se quiser vê-lo funcionando antes, veja aqui: www.kromusdesign.com/forum

Código:
<!-- /////////////////////// INICIO IMAGENS TROCANDO /////////////////////// -->

<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: [477, 245], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
        ["http://illiweb.com/fa/pbucket.gif", "http://www.kromusdesign.com/t5037-35-sotw-resultados", "_new", ""],
        ["http://illiweb.com/fa/pbucket.gif", "http://www.kromusdesign.com/t5114-dotm-15-resultados#55600", "_new", ""],
        ["http://illiweb.com/fa/pbucket.gif", "_new", "http://www.kromusdesign.com/t4882-1-vector-of-the-fortnight-resultados", ""],
        ["http://illiweb.com/fa/pbucket.gif", "http://www.kromusdesign.com/t5118-melhor-trabalho-do-mes-abril", "_new", ""],
        ["http://illiweb.com/fa/pbucket.gif", "_new", " ", ""]
    ],
    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>

<!-- /////////////////////// FIM IMAGENS TROCANDO /////////////////////// -->
Para mudar as dimensões, logo no início do código tem "dimensions: ]477, 245], //width/height of gallery in pixels. Should reflect dimensions of the images exactly". Basta alterar estes números.
Embaixo das dimensões, vem as imagens. Apenas isso.
Até mais!
avatar

Steeph
Usuário experiente

Feminino
Inscrito dia : 08/03/2010
Mensagens : 2612
Pontos Ativos : 3503

Ver perfil do usuário http://www.kromusdesign.forumeiros.com http://www.twitter.com/ideasfromsteeph

Resolvido Re: Colocando um Slideshow no Fórum

Mensagem por Tathi em 04/05/11, 02:36 am

CARAMBA, perfeito!! Perfeito mesmo! Eu amei! Obrigada! Vou colocar o botão de 'resolvido', tá? Obrigada mesmo!
avatar

Tathi
Nível 5

Feminino
Inscrito dia : 17/01/2011
Mensagens : 54
Pontos Ativos : 87

Ver perfil do usuário http://addictivepleasure.forumeiros.com/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum