Colocando um Slideshow no Fórum

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):

Muito Interessante esse slide tambem queria esse codigo

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

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>

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?

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

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

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

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?

vou dar uma olhada e poste em pouco tempo

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

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://i57.photobucket.com/albums/g218/tettyvox/sotw-16.png", "http://www.kromusdesign.com/t5037-35-sotw-resultados", "_new", ""],
        ["http://i57.photobucket.com/albums/g218/tettyvox/dotm-7.png", "http://www.kromusdesign.com/t5114-dotm-15-resultados#55600", "_new", ""],
        ["http://i57.photobucket.com/albums/g218/tettyvox/votf-1.png", "_new", "http://www.kromusdesign.com/t4882-1-vector-of-the-fortnight-resultados", ""],
        ["http://i57.photobucket.com/albums/g218/tettyvox/melhordomes-1.png", "http://www.kromusdesign.com/t5118-melhor-trabalho-do-mes-abril", "_new", ""],
        ["http://i57.photobucket.com/albums/g218/tettyvox/aotm-8.png", "_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!

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