Código de slide

4 participantes

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

Tópico resolvido Código de slide

Mensagem por Aburame Natalia 01.04.13 23:54

Qual é minha questão:


Gostaria de um Código de Slide para meu fórum cujo fosse simples e funcional... Gostaria que passassem estas três imagens nele com três Links distintos:

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original

https://2img.net/h/i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original

Eu sei um pouco sobre CSS, mas pelo que sei isto é código Java, algo que me perco tentando mexer. Esse SlideShow vai para os anúncios e eu também queria de uma indicação de como ajeitar o código que me derem, por que semanalmente os Slides serão mudados. Obrigada.

Endereço do meu fórum:
http://naruto-tebane.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por Aburame Natalia em 02.04.13 18:09, editado 1 vez(es)
Aburame Natalia

Aburame Natalia
**

Membro desde : 10/03/2012
Mensagens : 86
Pontos : 166

http://naruto-tebane.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Código de slide

Mensagem por Freddie. 02.04.13 0:02

Olá! Queira Por Favor tentar este código:
Código:
<style type="text/css">
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; display:none}
#wrapper * {margin:0; padding:0}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://i.imgur.com/2swMA.gif) left center no-repeat}
#imgnext {right:0; background:url(http://i.imgur.com/gpQMw.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://i.imgur.com/S3DyJ.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://i.imgur.com/VIMIj.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://i.imgur.com/RjDRW.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
  </style>
  <ul id="slideshow">
      <li>
        <h3>Converse com a galera</h3>
        <span>http://i.imgur.com/ktyUm.png</span>
        <p>Una-se agora ao nosso Chatbox e converse com os membros do fórum.</p>
        <a href="javascript:open('/#bottom');"><img src="http://i.imgur.com/2v6bh.png"></a>
      </li>
      <li>
        <h3>Design</h3>
        <span>http://i.imgur.com/zmmeW.jpg</span>
        <p>Veja agora como aprender a ser um Designer e muito mais...</p>
        <a href="javascript:open('/c4-area-grafica');"><img src="http://i.imgur.com/ZIesa.png"></a>
      </li>
  <li>
        <h3>Habbo</h3>
        <span>http://i.imgur.com/ie8xD.png</span>
        <p>Você joga Habbo ou tem um servidor privado? Veja mais.</p>
        <a href="javascript:open('/f2-area-habbo-hotel');"><img src="http://i.imgur.com/GDHWq.png"></a>
      </li>
      <li>
        <h3>Minecraft</h3>
        <span>http://i.imgur.com/VhJ8N.jpg</span>
        <p>Jogue agora o melhor game de construção de todos os tempos.</p>
        <a href="javascript:open('/f7-zone-minecraft');"><img src="http://i.imgur.com/eX3Pw.png"></a>
      </li>
      <li>
        <h3>Transformice</h3>
        <span>http://i.imgur.com/EmvJp.png</span>
        <p>Você é um ratinho comilão? Se joga Transformice tenha o melhor acervo aqui.</p>
        <a href="javascript:open('/f6-zone-transformice');"><img src="http://i.imgur.com/Ny1rF.png"></a>
      </li>
      <li>
        <h3>GTA</h3>
        <span>http://i.imgur.com/XyOhO.jpg</span>
        <p>Você joga GTA? Então está no lugar certo, clique e veja mais.</p>
        <a href="javascript:open('/f9-zone-gta');"><img src="http://i.imgur.com/JO0Rj.png"></a>
      </li>
      <li>
        <h3>Entretenimento</h3>
        <span>http://i.imgur.com/e0NxJ.png</span>
        <p>Está entediado, quer mais diversão? Então clique e veja o que temos de melhor</p>
        <a href="javascript:open('/c7-entretenimento');"><img src="http://i.imgur.com/9DS61.png"></a>
      </li>
  </ul>
  <div id="wrapper">
      <div id="fullsize">
        <div id="imgprev" class="imgnav" title="Voltar"></div>
        <div id="imglink"></div>
        <div id="imgnext" class="imgnav" title="Próxima"></div>
        <div id="image"></div>
        <div id="information">
            <h3></h3>
            <p></p>
        </div>
      </div>
      <div id="thumbnails">
        <div id="slideleft" title="Primeiros"></div>
        <div id="slidearea">
            <div id="slider"></div>
        </div>
        <div id="slideright" title="Últimos"></div>
      </div>
  </div>
<script type="text/javascript" src="http://pproxy.webs.com/css/compressed.js"></script>
<script type="text/javascript">
  $('slideshow').style.display='none';
  $('wrapper').style.display='block';
  var slideshow=new TINY.slideshow("slideshow");
  window.onload=function(){
      slideshow.auto=true;
      slideshow.speed=5;
      slideshow.link="linkhover";
      slideshow.info="information";
      slideshow.thumbs="slider";
      slideshow.left="slideleft";
      slideshow.right="slideright";
      slideshow.scrollSpeed=4;
      slideshow.spacing=5;
      slideshow.active="#fff";
      slideshow.init("slideshow","image","imgprev","imgnext","imglink");
  }
</script>
Agrada-lhe o código?
Pode Modifica-lo á seu Gosto.
Cordiais Despedidas.
Freddie.
Freddie.

Freddie.
**

Membro desde : 27/03/2013
Mensagens : 87
Pontos : 162

http://dangobox.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Código de slide

Mensagem por Sennior 02.04.13 1:16

Saudações! Muito feliz

Aceda em:
Painel de Controle Seta Visualização Seta Home Page Seta Geral

Código:
<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/03/fabrica-de-herois.html"><img src="http://img844.imageshack.us/img844/7389/fabricadeherois.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>

<li class="s3sliderImage" style="display: list-item; opacity: 0.3321098053037097; ">
<a href="http://www.hiperxp.com/2012/04/pwi-descent-nova-instancia.html"><img src="http://img839.imageshack.us/img839/4937/endlessuniverse.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>

<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/01/regras-e-informacoes-para-os-eventos-do.html">
<img src="http://2.bp.blogspot.com/-3CtTtC-51oY/Tx8--LY8F2I/AAAAAAAAALQ/FuVwydGOcJg/s1600/Hiper+regras.jpg" width="510px" height="250px"></a><span style="display: none; ">Participe dos Eventos valendo Gold, mas antes leia as Regras. Já saíram vários prêmios.</span>
</li>


<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/04/entrevista-com-trayce-daddato-mes-das.html"><img src="http://img198.imageshack.us/img198/1189/hiperxp666666.png" width="510px" height="250px">
</a><span style="display: none; "> Entrevista com Roora - Mês das Mulheres
</span></li>


<li class="s3sliderImage" style="display: none; ">
<a href="http://www.hiperxp.com/2012/02/nota-mudanca-no-contato-com-hiperxp.html"><img src="http://img205.imageshack.us/img205/4758/24028986.jpg" width="510px" height="250px">
</a><span style="display: none; ">
</span></li>



<div class="clear s3sliderImage"></div>
</ul>
</div></center>

Adicione na 'Folha de estilo CSS':
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS

Código:
#s3slider {
background:#000000; /* edite cor de fundo*/
border:1px solid #1e1125; /* edite borda do slide*/
width: 510px; /* largura total do slide*/
height: 250px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 510px; /* as imagens devem ter a mesma largura ou mais - você pode editar a largura se quiser */
position: absolute; /* important */
top: -3px; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 20px Verdana, sans-serif;
padding: 10px 0px;
width: 510px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none; /* important */
bottom: 0;
text-align:left;
}
.clear {
clear: both;
}

Até mais! Muito feliz
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Código de slide

Mensagem por .Danni. 02.04.13 4:47

Olá,

Não fornecemos suporte à javascript ou jQuery, tampouco é permitido pelas regras do FdF criar templates ou partes de templates para membros. Tente algum dos códigos fornecidos ou utilize o Google para encontrar um slideshow de sua preferência. Existem muitos slides baseados em CSS que podem ser utilizados.

Cordialmente
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Código de slide

Mensagem por Aburame Natalia 02.04.13 17:48

(Desculpe Boss. Peço permissão para tirar uma dúvida sobre isso, que eu creio ser a última)

Bem, mexi bastante e funcionou este abaixo... Mas não consigo centralizar o Slide nos anúncios ou em um Widget (para onde na verdade NÃO vai o Slide). Já tentei usar o código de Center CSS e HTML e etc, só que não deu certo. Podem me ajudar só com essa dúvida final? Chorando ou muito tr Só essa vai.

Código:
<div style="margin:auto;text-align:center;width:100%">    <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:200px}.picshow_main{position:relative;width:310px;height:200px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:310px;height:200px}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
        <script>var counts = 3;
        img1 = new Image();
        img1.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original';
        img2 = new Image();
        img2.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original';
        img3 = new Image();
        img3.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original';
        var smallImg = new Array();
        smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
        smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
        smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

        url1 = 'http://naruto-tebane.forumeiros.com/t2334-anime-episodio-306#48788/';
        url2 = 'http://naruto-tebane.forumeiros.com/t192p75-amegakure-terceira-reuniao-dos-kages#48803/';
        url3 = 'http://naruto-tebane.forumeiros.com/t2283-comentarios-naruto-manga-625/';
        url4 = 'http://www.monsterhunterbrasil.com';
        url5 = 'http://narutorpgstorm.ultimaterpg.net/';
        alt1 = new Image();
        alt1.alt = 'SP-Design';
        alt2 = new Image();
        alt2.alt = 'Naruto Reborn';
        alt3 = new Image();
        alt3.alt = 'Brasil Designer Forever';
        alt4 = new Image();
        alt4.alt = 'Brasil Designer Forever';
        alt5 = new Image();
        alt5.alt = 'Brasil Designer Forever';
        var nn = 1;
        var key = 0;
        function change_img() {
        if (key == 0) {
        key = 1;
        } else if (document.all) {
        document.getElementById("pic").filters[0].Apply();
        document.getElementById("pic").filters[0].Play(duration = 2);
        }
        eval('document.getElementById("pic").src=img' + nn + '.src');
        eval('document.getElementById("url_theme").href=url' + nn);
        eval('document.getElementById("pic").alt=alt' + nn + '.alt');
        if (nn == 1) {
        document.getElementById("url_theme").target = "_blank";
        document.getElementById("url_theme").style.cursor = "pointer";
        } else {
        document.getElementById("url_theme").target = "_blank"
        document.getElementById("url_theme").style.cursor = "pointer"
        }
        for ( var i = 1; i <= counts; i++) {
        document.getElementById("xxjdjj" + i).className = 'axx';
        }
        document.getElementById("xxjdjj" + nn).className = 'bxx';
        nn++;
        if (nn > counts) {
        nn = 1;
        }
        tt = setTimeout('change_img()', 4000);
        }
        function changeimg(n) {
        nn = n;
        window.clearInterval(tt);
        change_img();
        }
        function ImageShow() {
        document.write('<div class="picshow_main">');
        document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
        document.write('<div class="picshow_change">');
        for ( var i = 0; i < counts; i++) {
        document.write('<a href="javascript:changeimg(' + (i + 1)
        + ');" id="xxjdjj' + (i + 1)
        + '" class="axx" target="_self"><img src="' + smallImg[i]
        + '"></a>');
        }
        document.write('</div></div>');
        change_img();
        }</script>
        <script>ImageShow()</script></div>
Aburame Natalia

Aburame Natalia
**

Membro desde : 10/03/2012
Mensagens : 86
Pontos : 166

http://naruto-tebane.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Código de slide

Mensagem por .Danni. 02.04.13 17:53

Olá,

Tente este código:
Código:
<div style="margin:auto;text-align:center;width:100%; margin-left: 30%;"><style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:200px}.picshow_main{position:relative;width:310px;height:200px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:310px;height:200px}.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:5px;left:60px}.picshow_change img{width:15px;height:15px}.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}a.axx{border-color:#555}a.axx:hover{border-color:#000}a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}a.bxx{border-color:#000}a.bxx:hover{border-color:#000}img{border:0px}</style>
        <script>var counts = 3;
        img1 = new Image();
        img1.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/anime306_zpsd824d825.png:original';
        img2 = new Image();
        img2.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Reuniatildeodoskagescarecas_zps64ec1130.png:original';
        img3 = new Image();
        img3.src = 'http://i1077.photobucket.com/albums/w462/kusanagi-sama/Mangaacute625_zps18f2a4c0.png:original';
        var smallImg = new Array();
        smallImg[0] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif';
        smallImg[1] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif';
        smallImg[2] = 'http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif';

        url1 = 'http://naruto-tebane.forumeiros.com/t2334-anime-episodio-306#48788/';
        url2 = 'http://naruto-tebane.forumeiros.com/t192p75-amegakure-terceira-reuniao-dos-kages#48803/';
        url3 = 'http://naruto-tebane.forumeiros.com/t2283-comentarios-naruto-manga-625/';
        url4 = 'http://www.monsterhunterbrasil.com';
        url5 = 'http://narutorpgstorm.ultimaterpg.net/';
        alt1 = new Image();
        alt1.alt = 'SP-Design';
        alt2 = new Image();
        alt2.alt = 'Naruto Reborn';
        alt3 = new Image();
        alt3.alt = 'Brasil Designer Forever';
        alt4 = new Image();
        alt4.alt = 'Brasil Designer Forever';
        alt5 = new Image();
        alt5.alt = 'Brasil Designer Forever';
        var nn = 1;
        var key = 0;
        function change_img() {
        if (key == 0) {
        key = 1;
        } else if (document.all) {
        document.getElementById("pic").filters[0].Apply();
        document.getElementById("pic").filters[0].Play(duration = 2);
        }
        eval('document.getElementById("pic").src=img' + nn + '.src');
        eval('document.getElementById("url_theme").href=url' + nn);
        eval('document.getElementById("pic").alt=alt' + nn + '.alt');
        if (nn == 1) {
        document.getElementById("url_theme").target = "_blank";
        document.getElementById("url_theme").style.cursor = "pointer";
        } else {
        document.getElementById("url_theme").target = "_blank"
        document.getElementById("url_theme").style.cursor = "pointer"
        }
        for ( var i = 1; i <= counts; i++) {
        document.getElementById("xxjdjj" + i).className = 'axx';
        }
        document.getElementById("xxjdjj" + nn).className = 'bxx';
        nn++;
        if (nn > counts) {
        nn = 1;
        }
        tt = setTimeout('change_img()', 4000);
        }
        function changeimg(n) {
        nn = n;
        window.clearInterval(tt);
        change_img();
        }
        function ImageShow() {
        document.write('<div class="picshow_main">');
        document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
        document.write('<div class="picshow_change">');
        for ( var i = 0; i < counts; i++) {
        document.write('<a href="javascript:changeimg(' + (i + 1)
        + ');" id="xxjdjj' + (i + 1)
        + '" class="axx" target="_self"><img src="' + smallImg[i]
        + '"></a>');
        }
        document.write('</div></div>');
        change_img();
        }</script>
        <script>ImageShow()</script></div></center>

Cordialmente,
The Boss
.Danni.

.Danni.
Super Membro

Membro desde : 13/01/2010
Mensagens : 1880
Pontos : 2623

https://coletivomistico.forumbrasil.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Código de slide

Mensagem por Aburame Natalia 02.04.13 18:09


Obrigada! Resolvido!
Aburame Natalia

Aburame Natalia
**

Membro desde : 10/03/2012
Mensagens : 86
Pontos : 166

http://naruto-tebane.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos