InícioSlide de imagens
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Slide de imagens
por LucasVoigt 01.12.13 23:54
Qual é minha questão:
Bom , estou com um código para slide de imagens , porém só aparece a metade da imagem , gostaria de saber como faz para ela aparecer toda.
http://brasilwestside.forumeiros.com/h6-teste <- Página que tentei utilizar o cód
Endereço do meu fórum:
https://ajuda.forumeiros.com
Versão do fórum:
PHPBB3
Bom , estou com um código para slide de imagens , porém só aparece a metade da imagem , gostaria de saber como faz para ela aparecer toda.
http://brasilwestside.forumeiros.com/h6-teste <- Página que tentei utilizar o cód
Endereço do meu fórum:
https://ajuda.forumeiros.com
Versão do fórum:
PHPBB3
LucasVoigt- *
- Membro desde : 02/01/2012
Mensagens : 39
Pontos : 59 -
Re: Slide de imagens
por Consolado 02.12.13 14:06
Bom dia,
procure por <head></head> no HTML e entre eles cole esse código:
procure por <head></head> no HTML e entre eles cole esse código:
- Código:
<style>#slider-wrapper{height:auto!important}</style>
Consolado- Hiper Membro
- Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128
Re: Slide de imagens
por LucasVoigt 02.12.13 17:50
Obg. Funcionou certinho (:Today escreveu:Bom dia,
procure por <head></head> no HTML e entre eles cole esse código:Até mais!
- Código:
<style>#slider-wrapper{height:auto!important}</style>
#Edit
Só mais uma coisa , ficou uma barra branca do lado , como faço para poder tirar ela ?
LucasVoigt- *
- Membro desde : 02/01/2012
Mensagens : 39
Pontos : 59 -
Re: Slide de imagens
por Matheusc 02.12.13 19:22
Primeiro vou lhe passar o código do slide de imagens que estou utilizando:
Onde está ''url1''
é onde você coloca a url ligada a 1ª imagem, ai tem o url2 e assim sucessivamente.
E onde está alt1 é o texto da 1ªimagem, etc...
Agora vou lhe ensinar a colocar a largura e altura na imagem !!!
Vou pegar o começo do código novamente só para explicar melhor:
Repare que ''width:500px'' e ''height:300px'' repete duas vezes no código acima, então se for alterar o tamanho da imagem, altere os dois ''500'' e os dois ''300''.
Foi ótimo pode lhe ajudar cara, espero que com isso, seu problema seja resvolvido! ^^
- Código:
<div align="center"> <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:500px;height:300px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:500px;height:300px}.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://img5.imageshack.us/img5/8046/sbyu.jpg';
img2 = new Image();
img2.src = 'http://imageshack.us/scaled/landing/834/4e8w.jpg';
img3 = new Image();
img3.src = 'http://img707.imageshack.us/img707/9320/wu0x.jpg';
img4 = new Image();
img4.src = 'http://img440.imageshack.us/img440/5431/urcc.jpg';
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://pokemonmq.forumeiros.com/f44-fanfics-e-tramas';
url2 = '';
url3 = 'http://pokemonmq.forumeiros.com/f54-quests-pokemon';
url4 = 'http://pokemonmq.forumeiros.com/f57-comparacoes';
url5 = 'http://narutorpgstorm.ultimaterpg.net/';
alt1 = new Image();
alt1.alt = 'Veja as fan-fics dos membros do fórum clicando aqui!';
alt2 = new Image();
alt2.alt = 'Feliz Ano-Novo ao pessoal do Pokémon Master Quest';
alt3 = new Image();
alt3.alt = 'Ganhe Zenys e ótimas recompensas participando das Quests Pokémon';
alt4 = new Image();
alt4.alt = 'Tire suas dúvidas entre qual dos pokémons é o melhor através das comparações!';
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>
Onde está ''url1''
é onde você coloca a url ligada a 1ª imagem, ai tem o url2 e assim sucessivamente.
E onde está alt1 é o texto da 1ªimagem, etc...
Agora vou lhe ensinar a colocar a largura e altura na imagem !!!
Vou pegar o começo do código novamente só para explicar melhor:
- Código:
<div align="center"> <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:500px;height:300px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:500px;height:300px}.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>
Repare que ''width:500px'' e ''height:300px'' repete duas vezes no código acima, então se for alterar o tamanho da imagem, altere os dois ''500'' e os dois ''300''.
Foi ótimo pode lhe ajudar cara, espero que com isso, seu problema seja resvolvido! ^^
Matheusc- *
- Membro desde : 11/04/2013
Mensagens : 47
Pontos : 79 -
Re: Slide de imagens
por LucasVoigt 02.12.13 21:01
Vlw ae , me ajudou muito , editei uma coisa ou outra e ficou perfeito o código , funcionando direitinho vlwMatheusc escreveu:Primeiro vou lhe passar o código do slide de imagens que estou utilizando:Onde está escrito ''img1.src'' , você troca pela 1ª imagem do widget. O img2.src é a segunda imagem e assim sucessivamente.
- Código:
<div align="center"> <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:500px;height:300px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:500px;height:300px}.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://img5.imageshack.us/img5/8046/sbyu.jpg';
img2 = new Image();
img2.src = 'http://imageshack.us/scaled/landing/834/4e8w.jpg';
img3 = new Image();
img3.src = 'http://img707.imageshack.us/img707/9320/wu0x.jpg';
img4 = new Image();
img4.src = 'http://img440.imageshack.us/img440/5431/urcc.jpg';
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://pokemonmq.forumeiros.com/f44-fanfics-e-tramas';
url2 = '';
url3 = 'http://pokemonmq.forumeiros.com/f54-quests-pokemon';
url4 = 'http://pokemonmq.forumeiros.com/f57-comparacoes';
url5 = 'http://narutorpgstorm.ultimaterpg.net/';
alt1 = new Image();
alt1.alt = 'Veja as fan-fics dos membros do fórum clicando aqui!';
alt2 = new Image();
alt2.alt = 'Feliz Ano-Novo ao pessoal do Pokémon Master Quest';
alt3 = new Image();
alt3.alt = 'Ganhe Zenys e ótimas recompensas participando das Quests Pokémon';
alt4 = new Image();
alt4.alt = 'Tire suas dúvidas entre qual dos pokémons é o melhor através das comparações!';
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>
Onde está ''url1''
é onde você coloca a url ligada a 1ª imagem, ai tem o url2 e assim sucessivamente.
E onde está alt1 é o texto da 1ªimagem, etc...
Agora vou lhe ensinar a colocar a largura e altura na imagem !!!
Vou pegar o começo do código novamente só para explicar melhor:Repare bastante no cógido, aonde diz ''width:500px'' e ''height:300px''. Essa é a largura e a altura de todas as imagens do widget! Ajuste o número ''500'' e o número ''300'' para obter as imagens do tamanho correto.
- Código:
<div align="center"> <style>.picshow{z-index:444;position:relative;background-color:#ffffff;width:100%;height:135px}.picshow_main{position:relative;width:500px;height:300px}.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:500px;height:300px}.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>
Repare que ''width:500px'' e ''height:300px'' repete duas vezes no código acima, então se for alterar o tamanho da imagem, altere os dois ''500'' e os dois ''300''.
Foi ótimo pode lhe ajudar cara, espero que com isso, seu problema seja resvolvido! ^^
Closed aqui pls
LucasVoigt- *
- Membro desde : 02/01/2012
Mensagens : 39
Pontos : 59 -
Tópicos semelhantes» Slide de imagens
» Slide de imagens
» Criar slide de imagens
» Slide com imagens e notícias
» Como colocar slide de imagens em um fórum ??
» Slide de imagens
» Criar slide de imagens
» Slide com imagens e notícias
» Como colocar slide de imagens em um fórum ??
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
