Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Criar slide de imagens
2 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
Criar slide de imagens
Qual é minha questão:
Como fazer slide como o temas em destaques
Queria saber como fazer.. Alguem poderia me ajudar?
Medidas que eu tomei para corrigir o problema:
Como fazer slide como o temas em destaques
Imagens do meu problema:
Como fazer slide como o temas em destaques
Endereço do meu fórum:
http://extraup.forumeiros.com/
Versão do meu fórum:
PHPBB3
Como fazer slide como o temas em destaques
Queria saber como fazer.. Alguem poderia me ajudar?
Medidas que eu tomei para corrigir o problema:
Como fazer slide como o temas em destaques
Imagens do meu problema:
Como fazer slide como o temas em destaques
Endereço do meu fórum:
http://extraup.forumeiros.com/
Versão do meu fórum:
PHPBB3
Re: Criar slide de imagens
Olá,
Acompanhe os passos deste tutorial: https://ajuda.forumeiros.com/t14869-
Neste tutorial você irá aprender como pode fazer um Widget personalizado como o widget "Album" através de códigos HTML e, com os mesmos efeitos e sem limites de imagens.
Até mais!
Acompanhe os passos deste tutorial: https://ajuda.forumeiros.com/t14869-
Neste tutorial você irá aprender como pode fazer um Widget personalizado como o widget "Album" através de códigos HTML e, com os mesmos efeitos e sem limites de imagens.
Até mais!
Re: Criar slide de imagens
Não deu.
Código usado:
Código usado:
- Código:
<script type="text/javascript">
var ssfx = { 'clock' : null, 'fade' : true, 'count' : 1 };
var slideShowSpeed = 10;
var Pic = new Array();
var Tit = new Array();
var Link = new Array();
Pic[0] = 'http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/cart.png';
Tit[0] = 'Loja';
Link[0] = 'http://extraup.forumeiros.com/f45-loja';
Pic[1] = 'http://sucrilhos.webs.com/forum_hha/i/outros_2.png';
Tit[1] = 'Anuncios / Promoções';
Link[1] = 'http://extraup.forumeiros.com/f44-anuncios-promocoes';
Pic[2] = 'http://icons.iconarchive.com/icons/dryicons/aesthetica-2/32/user-add-icon.png';
Tit[2] = 'Apresentações';
Link[2] = 'extraup.forumeiros.com/f1-apresentacoes-e-despedidas';
Pic[3] = 'http://icons.iconarchive.com/icons/dryicons/aesthetica-2/32/warning-icon.png';
Tit[3] = 'Regras';
Link[3] = 'http://extraup.forumeiros.com/f2-regras-gerais';
var j = 0;
var i = 0;
var p = Pic.length;
var rnd_nmbv = 0;
ssfx.cache = [];
for (i = 0; i < p; i++)
{ssfx.cache = new Image;ssfx.cache[i].src = Pic[i];}
function runSlideShow(){
if ( ssfx.cache[0] ){rnd_nmb = (Math.round((Math.random() + 0.5) * 4) - 1);
if (document.all){document.getElementById('SlideShowPic').style.filter="blendTrans(duration=FXDuration)";
if ( navigator.appName == 'Opera' ){document.getElementById('SlideShowPic').filters.blendTrans.Apply;
}
else
{document.getElementById('SlideShowPic').filters.blendTrans.Apply();
}}document.getElementById('SlideShowPic').src = ssfx.cache[j].src;
if (document.all){if ( navigator.appName == 'Opera' ){document.getElementById('SlideShowPic').filters.blendTrans.Play;
}
else{document.getElementById('SlideShowPic').filters.blendTrans.Play();
}}document.getElementById('PicTitle').innerHTML = Tit[j];
document.getElementById('PicTitle').href = Link[j];
document.getElementById('PicImg').title = Tit[j];
document.getElementById('PicImg').alt = Tit[j];
document.getElementById('PicImg').href = Link[j];
j = j + 1;if (j > (p - 1)){j = 0;
}}t = setTimeout('runSlideShow()', (slideShowSpeed * 1000));
}
</script>
<p class="center">
<a href="#" id="PicTitle"></a>
<br /><div class="center" style="min-height:125px;">
<a href="#" id="PicImg"><img src="http://2img.net/i/fa/empty.gif" alt="" title="" id="SlideShowPic" style="border: 2px dashed #cfcfcf; padding: 8px; margin-top: 5px;"></a>
</div>
</p>
<script type="text/javascript">runSlideShow();</script>
Re: Criar slide de imagens
Boa tarde caro usuário,
Eu entendi perfeitamente a sua dúvida. Mas, a única questão que ficou em aberto, se refere a que tipo de slide você deseja.
Estarei passando o que utilizamos no widget temas em destaque - aqui no Fórum de Suporte Forumeiros - para futura reutilização. Se não estiver de seu agrado, mostre-nos um slide interessante que você possivelmente tenha visto em algum site da Internet. Estaremos totalmente abertos a lhe auxiliar na instalação do mesmo.
Sem mais delongas, este é o código que utilizamos em nosso site. Insira-o num widget, se preferir.
Atenciosamente,
Seu amigo Supero.
Eu entendi perfeitamente a sua dúvida. Mas, a única questão que ficou em aberto, se refere a que tipo de slide você deseja.
Estarei passando o que utilizamos no widget temas em destaque - aqui no Fórum de Suporte Forumeiros - para futura reutilização. Se não estiver de seu agrado, mostre-nos um slide interessante que você possivelmente tenha visto em algum site da Internet. Estaremos totalmente abertos a lhe auxiliar na instalação do mesmo.
Sem mais delongas, este é o código que utilizamos em nosso site. Insira-o num widget, se preferir.
- Código:
<style type="text/css"> .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: 0px; left: 100px;}.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 language=javascript>
var counts = 3;
img1 = new Image();
img1.src = 'http://hitskin.com/themes/13/25/51/thumb.jpg';
img2 = new Image();
img2.src = 'http://hitskin.com/themes/11/94/16/thumb.jpg';
img3 = new Image();
img3.src = 'http://hitskin.com/themes/12/46/06/thumb.jpg';
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://pt.hitskin.com/buscar-um-tema/arthurbohrer-theme-132551.htm';
url2 = 'http://pt.hitskin.com/buscar-um-tema/playstation-fire-119416.htm';
url3 = 'http://pt.hitskin.com/buscar-um-tema/dragon-inflames-124606.htm';
alt1 = new Image();
alt1.alt = 'ArthurBohrer Theme';
alt2 = new Image();
alt2.alt = 'Playstation (fire)';
alt3 = new Image();
alt3.alt = 'dragon inflames';
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 language="javascript" type="text/javascript">
ImageShow();
</SCRIPT>
Atenciosamente,
Seu amigo Supero.
Última edição por Supero em 06.09.11 21:57, editado 1 vez(es)
Convidad- Convidado
Re: Criar slide de imagens
Obrigado, apenas precisava desse código.
Não irei utiliza-lo nesse layout de meu fórum, mais no futuro se precisar já tenho tal coisa arquivada aqui.
Obrigado. Closed the topic please!
Não irei utiliza-lo nesse layout de meu fórum, mais no futuro se precisar já tenho tal coisa arquivada aqui.
Obrigado. Closed the topic please!
Tópicos semelhantes
» Slide de imagens
» Slide de imagens
» Slide de imagens
» Code html slide de imagens
» [Outros] Imagens de slide
» Slide de imagens
» Slide de imagens
» Code html slide de imagens
» [Outros] Imagens de slide
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