Confronto entre widgets que tenha o mesmo codigo.

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Fundador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Problema começou : Apos inclusão da Windgets
Endereço do fórum : http://universodoscanarios.com/

Descrição do problema

Boa noite amigos.

Estou utilizando um Widgets do top 5, mas gostaria de utilizar mais de uma, ao formular a segunda elas entram em confronto não sendo possível visualizar a segunda ou vise versa, teria como utilizar mais de uma Widgets com este código.

Código:

<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/Dn6Ci.png';
 img3 = new Image();
 img3.src = 'http://i.imgur.com/k4gqP.png';
 img4 = new Image();
 img4.src = 'http://i.imgur.com/2GUgY.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://narutoreborn.ativoforum.com/';
 url3 = 'http://br-designerforever.forumeiros.com/';
 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>

Será que tem alguma solução para este problema? Algum amigo pode me ajudar nesta questão?

Abraço.

UP.

UP.

Saudações,

Mas os dois seriam para o memso proposito, ou conteúdos diferentes?
Digo, um para um Top 3 de imagens e um outro para top 3 de frases? Exemplo apenas.

Até mais.

Então sennior, tenho a intenção de manter mais de uma a unica coisa que vai ser modificado sera as imagens e link das mesmas, na verdade vai ser um top 5 de assuntos dos fórum.

Boa noite!

O ideal é usar outro recurso: https://ajuda.forumeiros.com/t51052- Ou, você quer que seja exatamente o mesmo código?

Abraços!

Shek vou verificar este código do link que me passou tendo o mesmo visual do que estou utilizando posso fazer a troca sem problema.

Mas este código que utilizo teria como utilizar mais de um windgets?


@Edit

Utilizei o codigo do link(slides) e não funcionou.

@shek e demais amigos, se possível gostaria do código que mencionei na primeira mensagem funcionando em outras windgets, sem ter o erro.

Faça assim, mande-me os códigos que quer usar para a fazer as duas funções.

Até mais.

É uma segunda Widgets, ou melhor varias com o mesmo código que coloquei acima na primeira mensagem, apenas vou modificar as imagens, links da imagens (e estas serão modificadas de tempos em tempos)   e dimensões(tamanho da Widgets), vou colocar elas no portal como forma de direcionar os usuários através de imagens ao link dos tópicos.

O problema que algum código entra em confronto quando aplicado mais de uma Widgets, anulando o efeito das demais aplicada permanecendo apenas uma.

Tente assim:

Código:

<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/Dn6Ci.png';
 img3 = new Image();
 img3.src = 'http://i.imgur.com/k4gqP.png';
 img4 = new Image();
 img4.src = 'http://i.imgur.com/2GUgY.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://narutoreborn.ativoforum.com/';
 url3 = 'http://br-designerforever.forumeiros.com/';
 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>

Mesmo alterando imagens e links o mesmo entra em confronto?
Peço que deixe o Widget ativo para que eu possa ver o erro procedente em teu fórum.

Até mais.

Sennior não funcionou este codigo que me passou ao ser adicionado em uma nova windgets ele interfere na outra sobrepondo(a primeira fica com o efeito da segunda e a segunda fica apagada).

Diante da falta de suporte sobre o assunto exposto penso que isto não é possível ou não temos membros qualificados para conseguir solucionar minha solicitação.

Caso esteja ceto em minhas colocação peço o arquivamento do tópico e agradeço atenção dos que tentaram ajudar.


Abraço.

Olá!

Então, queria lhe pedir para que não chamasse todos os membros de sem conhecimento e/ou desqualificados.
Vou lhe apresentar a solução, não o fiz antes pois não tinha visto vosso tópico.
O primeiro widget, poderá usar normal pelos widgets. Já o segundo, terceiro, quarto etc. Fará do seguinte modo:
Crie uma nova página HTML, nela preencha conforme abaixo e adicione o código do widget.
http://prntscr.com/5xtar6
Salve e pegue o link dela, clicando novamente em Gestão das páginas HTML após salvar.
Ex dos links:
http://prntscr.com/5xtb5r
Para mais auxílio sobre páginas HTML:
https://ajuda.forumeiros.com/t7967-faq-criar-uma-pagina-inicial-html-personalizada

Agora vamos para a parte do widget, crie um widget personalizado normal, e no código adicione isso:

Código:

<iframe src="/h1-"></iframe>

Print: http://prntscr.com/5xtc63

No código procure por 1 e troque pelo número da sua página HTML.
Para configurar o widget, configure pela página HTML os links e imagens. Faça isso quantas vezes desejar, criando sempre uma nova página e um novo widget.
Resultado:
http://prntscr.com/5xtcdh

Abraços!

(risos), não fique bravo amigo @EuficoLoko

Sei o quanto temos membros capacitados aqui, fiz isto para chamar atenção sobre meu assunto, e pelo visto consegui, amigo estarei fazendo o que orientou e logo apos mostro o resultado.

Grato por dispor de seu tempo para me ajudar.

Por hora muito obrigado.

Não estou bravo meu caro, espero que as minhas instruções lhe ajudem. Aguardo a sua confirmação.

Boa noite.

@euficoLoko  funcionou porém o tamanho da windgets ficou fora do padrão, tem como fazer ele ficar do tamanha da primeira.



Segue codigo que uso.

Código:

<style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:300px;height:320px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:300px;height:320px}.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;

Olá!

É só trocar o iframe por:

Código:

<iframe src="/h1-" width="300px" height="500px"></iframe>

Diante da falta de suporte sobre o assunto exposto penso que isto não é possível ou não temos membros qualificados para conseguir solucionar minha solicitação.
Creio que mudou de opinião?

Atenciosamente,
Loko.

EuficoLoko escreveu:Olá!

É só trocar o iframe por:

Código:

<iframe src="/h1-" width="300px" height="500px"></iframe>

Diante da falta de suporte sobre o assunto exposto penso que isto não é possível ou não temos membros qualificados para conseguir solucionar minha solicitação.
Creio que mudou de opinião?

Atenciosamente,
Loko.

Disse que não estava bravo....  eu expliquei por que comentei desta forma

Mas voltando a minha duvida, a windget ainda fica com uma barra de rolagem abaixo mesmo diminuindo o tamanha ainda assim permanece a barra, outra coisa que gostaria de retirar é a moldura conforme imagem abaixo.

Oi Nitram!

Não estou bravo, rs.
Então meu caro, troque por esse:

Código:

<iframe src="/h1-" style="width: 300px; height: 500px;border: none !important;background: transparent !important;overflow-y: hidden !important;overflow-x: hidden !important"></iframe>

Deve ficar ao seu gosto agora.

Atenciosamente,
Loko.

Perfeito obrigado por sua ajuda, foi muito importante para mim.


Abraço.