Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Galeria de imagens em tópicos

4 participantes

Início :: Forumeiros :: NostalgiaGaleria de imagens em tópicos

GyGu GyGu  • Qui 4 Abr 2013 - 19:44

Galeria de imagens em tópicos Empty Galeria de imagens em tópicos Qui 4 Abr 2013 - 19:44

Qual é minha questão:
Finalmente estou vendo ajuda como deve ser aqui e menos conversa


E pela segunda vez vou pedir esta ajuda e espero que não apaguem o tópico.

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


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


Assim quando um tópico levasse muitas imagens ele ficaria mais bonito e organizado.

Deixo aqui um código que permite Usar CSS com JavaScript de sites externos

Código:
jQuery(document).ready(function(){jQuery('head').after('<link type="text/css" rel="stylesheet" href="ENDEREÇO_DA_PAGINA_.CSS" />')});


Espero finalmente ajuda.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão do fórum:
PUNBB

GyGu GyGu  • Sex 5 Abr 2013 - 12:43

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Sex 5 Abr 2013 - 12:43

UP!!

GyGu GyGu  • Sáb 6 Abr 2013 - 17:25

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Sáb 6 Abr 2013 - 17:25

Mais UP!
Estou a ver que nunca vou sair daqui...

[Dark]Doki-. [Dark]Doki-.  • Sáb 6 Abr 2013 - 19:22

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Sáb 6 Abr 2013 - 19:22

O Codigo do seu antigo topico :
Javascript :
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>&nbsp;<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:

/* GALERIA FEITA POR [F]LAMES E BESTSKINS */
#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;
}

GyGu GyGu  • Sáb 6 Abr 2013 - 20:29

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Sáb 6 Abr 2013 - 20:29

Tudo bugado... Sad

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


Daemon esperando seu código

GyGu GyGu  • Dom 7 Abr 2013 - 14:27

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Dom 7 Abr 2013 - 14:27

Eu desisto é a útima vez que venho aqui, prometem sempre os códigos e nunca colocam nada, para mim chega, não gozam mais comigo.
Até um dia

Já me arrependi de dizer isto no tópico inicial "Finalmente estou vendo ajuda como deve ser aqui e menos conversa"

StyLe® StyLe®  • Dom 7 Abr 2013 - 14:41

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Dom 7 Abr 2013 - 14:41

Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão das Páginas HTML
Você deseja utilizar o início e o final da página do seu fórum ? Marque Não.
Usar esta página como página inicial? Marque Não.

<link rel="stylesheet" type="text/css"
href="http://jquerytools.org/media/css/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css"
href="http://jquerytools.org/media/css/scrollable-buttons.css" />
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- HTML structures --><div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable --><div class="scrollable" id="scrollable">

<!-- root element for the items -->
<div class="items">

<!-- grupo 1 -->
<div>
<img src="IMAGEM_1" title="TITULO_1" />
<img src="IMAGEM_2" title="TITULO_2" />
<img src="IMAGEM_3" title="TITULO_3" />
<img src="IMAGEM_4" title="TITULO_4" />
</div>
<!--Fim do grupo 1-->
<!-- grupo 2 -->
<div>
<img src="IMAGEM_5" title="TITULO_5" />
<img src="IMAGEM_6" title="TITULO_6" />
<img src="IMAGEM_7" title="TITULO_7" />
<img src="IMAGEM_8" title="TITULO_8" />
</div>
<!-- fim do grupo 2 -->
<!-- grupo 3 -->
<div>
<img src="IMAGEM_9" title="TITULO_9" />
<img src="IMAGEM_10" title="TITULO_10" />
<img src="IMAGEM_10" title="TITULO_10" />
<img src="IMAGEM_10" title="TITULO_10" />
</div>
<!-- fim do grupo 3 -->

<!-- Adicione aqui mais códigos-->

</div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div>
<!-- javascript coding -->
<script>
jQuery(function() {
// initialize scrollable
jQuery(".scrollable").scrollable();
});
</script>
IMAGEM -> Substitua pelo url da imagem que deseja
TÍTULO -> O título que aparecerá ao passar o mouse sobre a imagem



Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos Códigos JavaScript
$(document).ready(function(){
$(".left-box").append('<input type="button" id="slide" class="button2" style="font-weight:bold;margin-right:20px;font-size: 1em;" value="Galeria">');

$('#slide').click(function(){

$("div#pun-qpost.main").before('<div id="mostraesconde">
<span style="background:black;border-radius:5px;padding: 5px;cursor:pointer;color:white;float:right;" onclick="fechatudo()">Fechar</span>
<div><iframe width="100%" scrolling="no" src="LINK_DA_PAGINA_HTML_CRIADA_ANTERIOR"></iframe></div>
');

return false;
});


});

function fechatudo(){
$('#mostraesconde').remove();
}
Investimento: Em todas as páginas


Resulta?

GyGu GyGu  • Dom 7 Abr 2013 - 15:22

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Dom 7 Abr 2013 - 15:22

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

A ideia é essa sim, mas os usuários ao clicarem no botão Galeria que está nos BBCode devem ter lá a possibilidade de colocar as imagens que depois vão aparecer no tópico, e depois não estou a conseguir enviar a galeria na resposta já feita.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Dalas_4I20 Dalas_4I20  • Qua 10 Abr 2013 - 0:23

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Qua 10 Abr 2013 - 0:23

Reputação da mensagem: 100% (1 votos)
Codigo la em cima /\

GyGu GyGu  • Qua 10 Abr 2013 - 5:04

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Qua 10 Abr 2013 - 5:04

Dalas_4I20 escreveu:Codigo la em cima /\


Qual código? Eu já utilizei todos os códigos lá em cima e nenhum deles funciona perfeitamente.

[Dark]Doki-. [Dark]Doki-.  • Qua 10 Abr 2013 - 10:09

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos Qua 10 Abr 2013 - 10:09

GyGu escreveu:Eu desisto é a útima vez que venho aqui, prometem sempre os códigos e nunca colocam nada, para mim chega, não gozam mais comigo.
Até um dia

Já me arrependi de dizer isto no tópico inicial "Finalmente estou vendo ajuda como deve ser aqui e menos conversa"
Eu apenas postei o código anterior que o [F]lames tinha postado no antigo tópico que ele excluiu.
Eu não sei mecher com javascripts, muito menos com javascript que outra pessoa criou. Tente falar com o [F]lames

Conteúdo patrocinado  • 

Galeria de imagens em tópicos Empty Re: Galeria de imagens em tópicos

Início :: Forumeiros :: Nostalgia:: Galeria de imagens em tópicos
Permissões neste sub-fórum
Não podes responder a tópicos