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












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

Saudações!

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>


Edite como desejar.

Até

Obrigado PabloW.!
Mas onde o coloco o código e como crio um botão nos BBCODE para que o código funcione?

Saudações!

Lamento não será possível, porque no entanto só será possível por meio de javascript.

Até

Então para que me serve o código se não é possivel? Assim não consigo fazer nada com ele.

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)

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;
    }

UP!