Como criar um widget TOP 5?

2 participantes

Ir para baixo

Tópico resolvido Como criar um widget TOP 5?

Mensagem por Uatyla 02.05.14 19:44

  • Descrição:
olá senhores, gostaria de saber, qual código é usado neste widget, aqui do FDF.
Como criar um widget TOP 5? Parceiros

  • Informações:
Fórum:http://vidadeaquarista.forumeiros.comVersão:PHPBB3
Tipo:Pedido de códigoTags:criar,widget



Última edição por uatyla em 04.05.14 14:14, editado 1 vez(es)
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Shek 02.05.14 21:34

Olá e boa tarde!

Acompanhe as informações passadas no seguinte tópico: https://ajuda.forumeiros.com/t73344-widget-top-5-do-fdf

Atenciosamente,
Shek
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Uatyla 03.05.14 3:02

Usei o código, porém está bugado.
semelhante a esse.
Como criar um widget TOP 5? ZVFg2

Código:
    <div class="inner"><span class="corners-top"><span></span></span><div class="h3">TOP 5</div><style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:180px;height:135px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:180px;height:135px}.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 = 5;
     img1 = new Image();
     img1.src = 'http://i.imgur.com/kGVNP.png';
     img2 = new Image();
     img2.src = 'http://i.imgur.com/XvUu7.png';
     img3 = new Image();
     img3.src = 'http://i.imgur.com/Dn6Ci.png';
     img4 = new Image();
     img4.src = 'http://i.imgur.com/q4H45.png';
     img5 = new Image();
     img5.src = 'http://i.imgur.com/tmMV3.png';
     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';
     smallImg[3] = 'http://i.imgur.com/j9q7B.png';
     smallImg[4] = 'http://i.imgur.com/mzFKQ.png';

     url1 = 'http://spdesign.ativoforum.com/';
     url2 = 'http://www.suportedesign.net/';
     url3 = 'http://narutoreborn.ativoforum.com/';
     url4 = 'http://www.power-pixel.net/ ';
     url5 = 'http://narutorpgstorm.ultimaterpg.net/';
     alt1 = new Image();
     alt1.alt = 'Clique e confira!';
     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 class="picshow_main"><div><a id="url_theme" href="http://narutorpgstorm.ultimaterpg.net/" target="_blank" style="cursor: pointer;"><img id="pic" class="imgbig" src="http://i.imgur.com/tmMV3.png" alt="Brasil Designer Forever" title="Clique e confira!"></a></div><div class="picshow_change"><a href="javascript:changeimg(1);" id="xxjdjj1" class="axx" target="_self"><img src="http://2img.net/i/fa/optimisation_fdf/common/bouton1.gif"></a><a href="javascript:changeimg(2);" id="xxjdjj2" class="axx" target="_self"><img src="http://2img.net/i/fa/optimisation_fdf/common/bouton2.gif"></a><a href="javascript:changeimg(3);" id="xxjdjj3" class="axx" target="_self"><img src="http://2img.net/i/fa/optimisation_fdf/common/bouton3.gif"></a><a href="javascript:changeimg(4);" id="xxjdjj4" class="axx" target="_self"><img src="http://i.imgur.com/j9q7B.png"></a><a href="javascript:changeimg(5);" id="xxjdjj5" class="bxx" target="_self"><img src="http://i.imgur.com/mzFKQ.png"></a></div></div> <span class="corners-bottom"><span></span></span></div>
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Uatyla 04.05.14 12:31

UP
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Shek 04.05.14 12:47

Olá!

Siga as instruções do seguinte tópico: https://ajuda.forumeiros.com/t17667-

Até mais!
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Uatyla 04.05.14 13:27

Esse código funcionou, porém as imagens ficam muito grande no widget, como padroniza as imagens no mesmo tamanho?
Código:
    <script language="JavaScript" type="text/javascript">
    var dxssfx = { 'clock' : null, 'fade' : true, 'count' : 1 };
    var dxslideShowSpeed = 5;
    var dxPic = new Array();
    var dxTit = new Array();
    var dxLink = new Array();
    dxPic[0] = 'http://s20.postimg.org/ucsiko6ql/20140115_201746.jpg';
    dxPic[1] = 'http://s21.postimg.org/uj5vx3e3r/DSCN0012.jpg';
    dxPic[2] = 'https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1/1526634_686291121392221_2056411723_n.jpg';
    dxPic[3] = 'URL_DA_SUA_IMAGEM_3';
    dxPic[4] = 'URL_DA_SUA_IMAGEM_4';
    dxPic[5] = 'URL_DA_SUA_IMAGEM_5';
    dxPic[6] = 'URL_DA_SUA_IMAGEM_6';
    dxPic[7] = 'URL_DA_SUA_IMAGEM_7';
    var dxj = 0;
    var dxi = 0;
    var dxp = dxPic.length;
    var dxrnd_nmb = 0;
    dxssfx.cache = [];
    for (dxi = 0; dxi < dxp; dxi++)
    {
    dxssfx.cache[dxi] = new Image;
    dxssfx.cache[dxi].src = dxPic[dxi];
    }
    function dxrunSlideShow()
    {
    if ( dxssfx.cache[0] )
    {
    if (dxj < 1)
    {
    dxj = Math.round(Math.random() * (dxp / 2))
    }
    if (document.all)
    {
    document.getElementById('dxSlideShowPic').style.filter="blendTrans(duration=FXDuration)";
    if ( navigator.appName == 'Opera' )
    {
    document.getElementById('dxSlideShowPic').filters.blendTrans.Apply;
    }
    else
    {
    document.getElementById('dxSlideShowPic').filters.blendTrans.Apply();
    }
    }
    document.getElementById('dxSlideShowPic').src = dxssfx.cache[dxj].src;
    if (document.all)
    {
    if ( navigator.appName == 'Opera' )
    {
    document.getElementById('dxSlideShowPic').filters.blendTrans.Play;
    }
    else
    {
    document.getElementById('dxSlideShowPic').filters.blendTrans.Play();
    }
    }
    document.getElementById('dxPicTitle').innerHTML = dxTit[dxj];
    document.getElementById('dxPicTitle').href = dxLink[dxj];
    document.getElementById('dxPicImg').title = dxTit[dxj];
    document.getElementById('dxPicImg').alt = dxTit[dxj];
    document.getElementById('dxPicImg').href = dxLink[dxj];
    dxj = dxj + 1 + Math.round(Math.random() * (dxp / 2));
    if (dxj > (dxp - 1))
    {
    dxj = dxj - dxp;
    }
    dxt = setTimeout('dxrunSlideShow()', (dxslideShowSpeed * 1000));
    }
    }
    </script>

    <a href="#" alt="" title="" target="_blank" id="dxPicTitle">
    <a
    href="#" alt="" title="" target="_blank" id="dxPicImg"><img
    src="http://2img.net/i/fa/empty.gif" id="dxSlideShowPic"></a>

    <script>dxrunSlideShow()</script>
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Shek 04.05.14 13:50

Olá!

Você deve pedir que estas imagens sejam redimensionadas aqui: https://ajuda.forumeiros.com/f17- Ou se preferir use este código:
Código:
<style>#dxSlideShowPic {
width: 113px;
height: 50px;
}</style><script language="JavaScript" type="text/javascript">
var dxssfx = { 'clock' : null, 'fade' : true, 'count' : 1 };
var dxslideShowSpeed = 5;
var dxPic = new Array();
var dxTit = new Array();
var dxLink = new Array();
dxPic[0] = 'http://s20.postimg.org/ucsiko6ql/20140115_201746.jpg';
dxPic[1] = 'http://s21.postimg.org/uj5vx3e3r/DSCN0012.jpg';
dxPic[2] = 'https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1/1526634_686291121392221_2056411723_n.jpg';
dxPic[3] = 'URL_DA_SUA_IMAGEM_3';
dxPic[4] = 'URL_DA_SUA_IMAGEM_4';
dxPic[5] = 'URL_DA_SUA_IMAGEM_5';
dxPic[6] = 'URL_DA_SUA_IMAGEM_6';
dxPic[7] = 'URL_DA_SUA_IMAGEM_7';
var dxj = 0;
var dxi = 0;
var dxp = dxPic.length;
var dxrnd_nmb = 0;
dxssfx.cache = [];
for (dxi = 0; dxi < dxp; dxi++)
{
dxssfx.cache[dxi] = new Image;
dxssfx.cache[dxi].src = dxPic[dxi];
}
function dxrunSlideShow()
{
if ( dxssfx.cache[0] )
{
if (dxj < 1)
{
dxj = Math.round(Math.random() * (dxp / 2))
}
if (document.all)
{
document.getElementById('dxSlideShowPic').style.filter="blendTrans(duration=FXDuration)";
if ( navigator.appName == 'Opera' )
{
document.getElementById('dxSlideShowPic').filters.blendTrans.Apply;
}
else
{
document.getElementById('dxSlideShowPic').filters.blendTrans.Apply();
}
}
document.getElementById('dxSlideShowPic').src = dxssfx.cache[dxj].src;
if (document.all)
{
if ( navigator.appName == 'Opera' )
{
document.getElementById('dxSlideShowPic').filters.blendTrans.Play;
}
else
{
document.getElementById('dxSlideShowPic').filters.blendTrans.Play();
}
}
document.getElementById('dxPicTitle').innerHTML = dxTit[dxj];
document.getElementById('dxPicTitle').href = dxLink[dxj];
document.getElementById('dxPicImg').title = dxTit[dxj];
document.getElementById('dxPicImg').alt = dxTit[dxj];
document.getElementById('dxPicImg').href = dxLink[dxj];
dxj = dxj + 1 + Math.round(Math.random() * (dxp / 2));
if (dxj > (dxp - 1))
{
dxj = dxj - dxp;
}
dxt = setTimeout('dxrunSlideShow()', (dxslideShowSpeed * 1000));
}
}
</script> <a href="#" alt="" title="" target="_blank" id="dxPicTitle"></a><a href="#" alt="" title="" target="_blank" id="dxPicImg"><img src="http://2img.net/i/fa/empty.gif" id="dxSlideShowPic" /></a> <script>dxrunSlideShow()</script>
Os valores width: 113px;
height: 50px;
definem a largura e altura da imagem.

Até mais!
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Uatyla 04.05.14 14:09

Eu prefiro que redimensione automaticamente, tenho um código que usa esses valores, e redimenciona as imagens mais não funcionou nesse ai!
Código:
<img style="width: 280px; height: 160px;" src="Imagem aqui"


@edit: achei os valores e conseguir aqui, Obrigado!


Última edição por uatyla em 04.05.14 14:14, editado 1 vez(es)
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Shek 04.05.14 14:13

Olá!

Eu passei em minha mensagem anterior os detalhes a serem alterados para ter a imagem redimensionada por CSS:
Código:
<style>#dxSlideShowPic {
width: 113px;
height: 50px;
}</style>
Basta você modificar os valores numéricos e sua imagem será redimensionada de acordo com o que colocar.

Até mais!
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar um widget TOP 5?

Mensagem por Uatyla 04.05.14 14:16

Resolvido!
Uatyla
Uatyla
Hiper Membro

Membro desde : 16/05/2012
Mensagens : 2495
Pontos : 3546

http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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