Galeria de imagens em tópicos
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
Galeria de imagens em tópicos
Qual é minha questão:
Então é assim eu gostava que houvesse um botão nos BBCode que adicionasse uma galeria onde pudéssemos colocar várias imagens.
Vejam o exemplo que eu quero -> http://www.tecmundo.com.br/carro/37222-lamborghini-veneno-um-carro-para-separar-os-homens-dos-meninos.htm
![Galeria de imagens em tópicos UVVEXM2](https://i.imgur.com/UVVEXM2.png)
Assim quando um tópico levasse muitas imagens ele ficaria mais bonito e organizado.
Obrigado,
Versão do fórum:
PUNBB
Endereço do meu fórum:
http://tugamovel.foruns.com.pt
Versão do fórum:
PHPBB2
Então é assim eu gostava que houvesse um botão nos BBCode que adicionasse uma galeria onde pudéssemos colocar várias imagens.
Vejam o exemplo que eu quero -> http://www.tecmundo.com.br/carro/37222-lamborghini-veneno-um-carro-para-separar-os-homens-dos-meninos.htm
![Galeria de imagens em tópicos UVVEXM2](https://i.imgur.com/UVVEXM2.png)
Assim quando um tópico levasse muitas imagens ele ficaria mais bonito e organizado.
Obrigado,
Versão do fórum:
PUNBB
Endereço do meu fórum:
http://tugamovel.foruns.com.pt
Versão do fórum:
PHPBB2
Re: Galeria de imagens em tópicos
Saudações!
Aqui está o código
Até![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Aqui está o código
- Código:
<strong class="subtit-artigo">Galeria de Imagens</strong></p><div align="center"><div id="fqpdentro" class="gal_bxk"><script type="text/javascript">stepcarousel.setup({galleryid: 'fqpdentroin', beltclass: 'belt', panelclass: 'panel', autostep: {enable:false}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['/img/nav-esq-galeria.png?24092010', -40, 0], rightnav: ['/img/nav-dir-galeria.png?24092010',0, 0]}, contenttype: ['inline']})</script><div id="fqpdentroin" class="stepcarousel"><div class="belt" style="width:110px;"><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/2013/3/materias/965560721416551-o.jpg"><img style="margin-top: 5px;" src="/imagens/2013/3/materias/965560721416551-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141775-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141775-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141776-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141776-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141777-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141777-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141778-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141778-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141779-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141779-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141780-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141780-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141781-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141781-t.jpg" width="100px" height="65px"></a></div><div class="panel"><a rel="galeria" title="" class="lightbox" href="/imagens/materias/965560721/141782-o.jpg"><img style="margin-top: 5px;" src="/imagens/materias/965560721/141782-t.jpg" width="100px" height="65px"></a></div></div></div></div></div>
Até
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Convidado- Convidado
Re: Galeria de imagens em tópicos
Obrigado PabloW.!
Mas onde o coloco o código e como crio um botão nos BBCODE para que o código funcione?
Mas onde o coloco o código e como crio um botão nos BBCODE para que o código funcione?
Re: Galeria de imagens em tópicos
Saudações!
Lamento não será possível, porque no entanto só será possível por meio de javascript.
Até![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Lamento não será possível, porque no entanto só será possível por meio de javascript.
Até
![Piscada](/users/2612/28/77/07/smiles/426228.gif)
Convidado- Convidado
Re: Galeria de imagens em tópicos
Então para que me serve o código se não é possivel? Assim não consigo fazer nada com ele.
Re: Galeria de imagens em tópicos
Será que alguem me consegue ajudar?? Eu já tenho mais ou menos o que preciso para quem quiser exprimentar e testar, mas ainda há alguns bugs que não consigo resolver, deixo aqui os códigos.
js (em todas as páinas)
CSS
js (em todas as páinas)
- Código:
jQuery(document).ready(function() {
jQuery('.postbody .post-entry .entry-content').each(function() {
jQuery(this).html(jQuery(this).html().split('[GAL]').join('<div align="center"><div id="fqpdentro" class="gal_bxk"><img src="http://www.tecmundo.com.br/img/nav-esq-galeria.png?24092010" style="z-index: 50; cursor: pointer; float: left; position: absolute; margin-left: -54px;width: 46px;height: 89px;margin-top: -1px;" title="Voltar 1 painel"><img src="http://www.tecmundo.com.br/img/nav-dir-galeria.png?24092010" style="z-index: 50; cursor: pointer; float: left; position: absolute; margin-left: 764px;height: 89px;width: 46px;margin-top: -1px;" title="Ir 1 painel"><div id="fqpdentroin" class="stepcarousel"><div class="belt" style="width: 500%; left: 4px;display: inline-block;height: 85px;">').split('[/GAL]').join('</div></div></div></div>').split('[*]').join('<div class="panel" style="float: left; display: inline-block; height: 66px; cursor: pointer;word-wrap: break-word;">').split('[/*]').join('</div>'));
jQuery('img[src^="http://www.tecmundo.com.br/img/nav-dir-galeria.png"]').click(function() {
var a=jQuery('#fqpdentroin').attr('style');
var b=a.split('l').join('');
var c=b.split('e').join('');
var d=c.split('f').join('');
var e=d.split('t').join('');
var f=e.split(':').join('');
var g=f.split(' ').join('');
var h=g.split('p').join('');
var i=h.split('x').join('');
var j=i.split(';').join('');
var k=Number(j.split('-').join(''));
var l=k+129;
jQuery('#fqpdentroin').attr('style','left: -'+l+'px;');
});
jQuery('#fqpdentroin').css('left','0px');
jQuery('img[src^="http://www.tecmundo.com.br/img/nav-esq-galeria.png"]').click(function() {
var a=jQuery('#fqpdentroin').attr('style');
var b=a.split('l').join('');
var c=b.split('e').join('');
var d=c.split('f').join('');
var e=d.split('t').join('');
var f=e.split(':').join('');
var g=f.split(' ').join('');
var h=g.split('p').join('');
var i=h.split('x').join('');
var j=i.split(';').join('');
var k=Number(j.split('-').join(''));
var l=k-129;
jQuery('#fqpdentroin').attr('style','left: -'+l+'px;');
});
});
jQuery('p.left-box #text_edit input[value="Outros"]:last, #format-buttons #text_edit input[value="Outros"]:last').before('<button class="button2" onclick="selectWysiwyg(this,\'gal\'); return false;" style="width:20px;" type="button"><img src="http://cdn5.iconfinder.com/data/icons/fatcow/32x32/skins.png" style="width: 16px;" alt=""></button><div style="visibility: hidden; width: auto; left: 556px; top: 601px; padding: 8px; text-align: center;" class="select" id="gal"><span><strong>Quantas imagens serão postas na galeria ?<br>Máximo:</strong> <i>10 imagens.</i></span><br><br><input type="text" id="quant-img" style="-moz-border-radius: 3px; -moz-box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; -webkit-border-radius: 3px; -webkit-box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; background: rgba(0,0,0,0.1); border: none; border-radius: 3px; box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; color: #222; display: inline-block; font-weight: 700; margin-right: 3px; padding: 3px 7px; text-shadow: rgba(255,255,255,0.6) 0 1px 0;"><br><br><input type="button" value="OK !" style="-moz-border-radius: 3px; -moz-box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; -webkit-border-radius: 3px; -webkit-box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; background: rgba(0,0,0,0.1); border: none; border-radius: 3px; box-shadow: inset rgba(0,0,0,0.3) 0 1px 2px, rgba(255,255,255,1) 0 1px 0; color: #222; display: inline-block; font-weight: 700; margin-right: 3px; padding: 3px 7px; text-shadow: rgba(255,255,255,0.6) 0 1px 0;"></div> <img src="http://2img.net/i/fa/wysiwyg/separator.png" style="vertical-align: middle;" alt="|" title="|">');
jQuery('#gal input[type="button"]:last').click(function() {
if(jQuery('#gal #quant-img').val()=='1') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='2') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='3') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='4') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='5') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='6') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_SEXTA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='7') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_SEXTA_IMAGEM[/img][/*][*][img]LINK_DA_SETIMA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='8') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_SEXTA_IMAGEM[/img][/*][*][img]LINK_DA_SETIMA_IMAGEM[/img][/*][*][img]LINK_DA_OITAVA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='9') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_SEXTA_IMAGEM[/img][/*][*][img]LINK_DA_SETIMA_IMAGEM[/img][/*][*][img]LINK_DA_OITAVA_IMAGEM[/img][/*][*][img]LINK_DA_NONA_IMAGEM[/img][/*][/GAL]');
}
if(jQuery('#gal #quant-img').val()=='10') {
jQuery('#text_editor_textarea').val(jQuery('#text_editor_textarea').val()+'[GAL][*][img]LINK_DA_IMAGEM[/img][/*][*][img]LINK_DA_SEGUNDA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_QUARTA_IMAGEM[/img][/*][*][img]LINK_DA_QUINTA_IMAGEM[/img][/*][*][img]LINK_DA_TERCEIRA_IMAGEM[/img][/*][*][img]LINK_DA_SEXTA_IMAGEM[/img][/*][*][img]LINK_DA_SETIMA_IMAGEM[/img][/*][*][img]LINK_DA_OITAVA_IMAGEM[/img][/*][*][img]LINK_DA_NONA_IMAGEM[/img][/*][*][img]LINK_DA_DECIMA_IMAGEM[/img][/*][/GAL]');
}
});
});
CSS
- Código:
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
line-height: 0;
}
#imageDataContainer {
font: 13px Arial, Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.6em;
}
#outerImageContainer {
position: relative;
background-color: #fff;
margin: 0 auto;
}
#imageContainer {
padding: 10px;
}
#loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#fqpdentro {
background: #FFF;
background-size: 121% 102%;
box-shadow: #000 0 0 3px;
height: 83px;
margin-top: 3px;
padding: 1px 54px 5px;
width: 84.3%;
}
#fqpdentroin {
overflow: hidden;
margin-left: -12px;
width: 500%;
position: relative;
left: -0px;
-webkit-transition: all .5s;
}
.stepcarousel {
position: relative;
overflow: scroll;
width: 540px;
height: 83px;
}
.stepcarousel .belt, .stepcarouselcat .belt {
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel {
border-right: 1px solid #DEDEDE;
float: left;
overflow: hidden;
padding: 9px 9px 9px 9px;
width: 110px;
}
#artigo .lightbox {
position: relative;
display: block;
margin: 0 auto;
}
#artigo a {
color: #36c;
}
#artigo img {
max-width: 630px;
}
.stepcarousel .panel img, .stepcarouselcat .panel img {
margin-right: 5px;
float: left;
}
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Galeria de imagens
» Imagens na galeria
» Plugin da galeria de imagens
» [Dúvida] Galeria Publica e Galeria Inserir galeria no menu do fórum
» Como colocar imagens na galeria ?
» Imagens na galeria
» Plugin da galeria de imagens
» [Dúvida] Galeria Publica e Galeria Inserir galeria no menu do fórum
» Como colocar imagens na galeria ?
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