[Plugin] BBCode galeria de imagens

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Plugin] BBCode galeria de imagens

Mensagem por Daemon em 07/05/15, 06:26 pm


BBCode Galeria
Este plugin, consiste em criar uma tag bbcode que adiciona uma galeria de imagens ao post.
Características e aplicação
Criador: @Daemon
Versão: 1.2
Versão: Todas as versões
Resultado da aplicação


Local de instalação
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript >> Investimento >> Em todas as páginas.
Código:
/***
* Version: 1.2
* Code: Galeria de imagens
* Date: 14/07/2015
* Last Update: 31/07/2015
* Author: Daemon
***/
jQuery(document).ready(function($) {

 $('head').append(
 '<style type="text/css">' +
  '#overlay_gallery {' +
  '  background-color: #000;' +
  '  right: 0;' +
  '  bottom: 0;' +
  '  left: 0;' +
  '  opacity: 0.8;' +
  '  position: fixed;' +
  '  top: 0;' +
  '  z-index: 999;' +
  '}' +
  '.lightbox_gallery {' +
  '  position: fixed;' +
  '  top: 8%;' +
  '  max-height: 85%;' +
  '  left: 0px;' +
  '  display: flex;' +
  '  text-align: center;' +
  '  width: 100%;' +
  '  z-index: 999;' +
  '}' +
  '.close-gallery {' +
  '  background: #fff url(https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/32/Gnome-Window-Close-32.png) no-repeat center;' +
  '  padding: 5px;' +
  '  height: 32px;' +
  '  width: 32px;' +
  '  border-radius: 0 0 0 3px;' +
  '  cursor: pointer;' +
  '  position: absolute;' +
  '  right: 3px;' +
  '  top: 3px;' +
  '}' +
  '.lightbox_gallery img {max-width: 100%;margin: 0 auto;}' +
  '.lb-gallery {' +
  '  -moz-border-radius-: 4px;' +
  '  -webkit-border-: 4px;' +
  '  background-color: #fff;' +
  '  border-radius: 4px;' +
  '  margin: 0 auto;' +
  '  max-width: 65%;' +
  '  min-height: 130px;' +
  '  min-width: 250px;' +
  '  position: relative;' +
  '  zoom: 1;' +
  '}' +
  '.lb-gallery-container {' +
  '  padding: 4px;' +
  '}' +
  '#gallery_bs {' +
  '  background-color: #222;' +
  '  min-height: 400px;' +
  '  margin: 10px auto;' +
  '  position: relative;' +
  '  width: 650px;' +
  '  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);' +
  '  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);' +
  '  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7 );' +
  '}' +
  '#gallery_bs .prev, #gallery_bs .next {' +
  '  background-color: #121212;' +
  '  border-radius: 5px;' +
  '  padding: 3px;' +
  '  opacity: 0;' +
  '  height: 32px;' +
  '  width: 32px;' +
  '  position: absolute;' +
  '  z-index: 200;' +
  '  cursor: pointer;' +
  '  top: 240px;' +
  '  background-repeat: no-repeat;' +
  '  background-position: center;' +
  '}' +
  '#gallery_bs:hover .prev, #gallery_bs:hover .next {' +
  '  -moz-transition: all .4s linear;' +
  '  -o-transition: all .4s linear;' +
  '  -webkit-transition: all .4s linear;' +
  '  opacity: 1;' +
  '}' +
  '.gallery_bs {' +
  '  height: 348px;' +
  '  text-align: center;' +
  '}' +
  '#gallery_bs .image_bs {' +
  '  cursor: pointer;' +
  '  max-height: 100% !important;' +
  '  max-width: 100% !important;' +
  '  width: 100% !important;' +
  '  -moz-transition: all .2s linear;' +
  '  -o-transition: all .2s linear;' +
  '  -webkit-transition: all .2s linear;' +
  '}' +
  '#gallery_bs .prev {background-image: url(http://i.imgur.com/V93QBXz.png);left: 20px;}' +
  '#gallery_bs .next {background-image: url(http://i.imgur.com/PTqQ1DY.png);right: 20px;}' +
  '#gallery_bs .header_gal {' +
  '  background-color: #333;' +
  '  padding: 5px 20px;' +
  '  text-align: center;' +
  '}' +
  '.scroll_gal {' +
  '  border-radius: 3px;' +
  '  -webkit-border-radius: 3px;' +
  '  -moz-border-radius: 3px;' +
  '  box-shadow: inset 2px 2px 17px 7px #555;' +
  '  -webkit-box-shadow: inset 2px 2px 17px 7px #555;' +
  '  -moz-box-shadow: inset 2px 2px 17px 7px #555;' +
  '  -o-box-shadow: inset 2px 2px 17px 7px #555;' +
  '  max-width: 100%;' +
  '  min-width: 100%;' +
  '  white-space: nowrap;' +
  '  overflow-x: auto;' +
  '  overflow-y: hidden;' +
  '}' +
  '.scroll_gal::-webkit-scrollbar {' +
  '  height: 10px;' +
  '}' +
  '.scroll_gal::-webkit-scrollbar-track {' +
  '  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);' +
  '  border-radius: 10px;' +
  '}' +
  '.scroll_gal::-webkit-scrollbar-thumb {' +
  '  background-color: #666;' +
  '  border-radius: 10px;' +
  '  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);' +
  '}' +
  '#gallery_bs .header_gal img {' +
  '  width: 85px;' +
  '  height: 85px;' +
  '  padding: 0px;' +
  '  margin: 5px;' +
  '  border-style: solid;' +
  '  border-width: 3px;' +
  '  transition: all linear .2s;' +
  '  cursor: pointer;' +
  '}' +
  '#gallery_bs .header_gal img:hover {' +
  '  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  border-color: #777;' +
  '}' +
  '</style>'
 );

 $('body').append(
 '<div id="overlay_gallery" class="overlay_gallery" style="display: none;"></div>' +
 '<div id="lightbox_gallery" class="lightbox_gallery" style="display: none;">' +
 '  <div class="lb-gallery">' +
 '    <div class="lb-gallery-container">' +
 '      <span class="close-gallery" onclick="close_pop_up()"></span>' +
 '      <img class="lb-gallery-image">' +
 '    </div>' +
 '  </div>' +
 '</div>'
 );

 var content = $('.postbody, .blog_message');
 content.html(function() {
              return $(this)
              .html()
              .replace(/\[gallery](.*?)\[\/gallery\]/g,'<div id="gallery_bs" class="image_gallery"><div class="header_gal"><p class="scroll_gal">$1</p></div><span class="prev" title="anterior"></span><span class="next" title="próximo"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
 });

 var gal = $('.image_gallery');
 gal.each(function() {
          var forThis = $(this), img = forThis.find('img'), imgSrc = img.attr('src'), imgBs = forThis.find('.image_bs');
          imgBs.attr('src', imgSrc);
          $('img', forThis).click(function() {
              thisSrc = $(this).attr('src');
              imgBs.fadeOut(400,  function() {
                    imgBs.attr('src', thisSrc).fadeIn();
              });
          });

          forThis.find('.prev, .next').click(function() {
              var PN = $(this), currentSrc = imgBs.attr('src'), currentImg = forThis.find('img[src="' + currentSrc + '"]');
              imgBs.fadeOut(400, function() {
                var direction = '';
                if(PN.hasClass('prev')) {
                  direction = currentImg.prev().attr('src');
                } else {
                  direction = currentImg.next().attr('src');
                }
                imgBs.attr('src', direction).fadeIn();
                });
          });

});
});
function open_pop_up(gal) {
        $('#overlay_gallery').fadeIn('slow', function() {
          $('#lightbox_gallery').fadeIn('fast');
          $('.lb-gallery-image').attr('src', $(gal).attr('src'));
        });
}
function close_pop_up() {
        $('#lightbox_gallery').fadeOut('slow', function() {
          $('#overlay_gallery').fadeOut('fast');
        });
}


Última edição por Daemon em 26/05/16, 02:28 pm, editado 3 vez(es)
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1689

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [Plugin] BBCode galeria de imagens

Mensagem por IsmaelS. em 10/05/15, 02:10 pm

Realmente é muito útil e interessante, seria óptimo se adiciona-se um botão específico na caixa de respostas para a tal função "[gallery]".

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Re: [Plugin] BBCode galeria de imagens

Mensagem por Shaman em 10/05/15, 02:11 pm

Parabéns @Daemon, muito interessante.
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1787
Pontos Ativos : 2453

Ver perfil do usuário http://brasilplayvicio.com.br

Re: [Plugin] BBCode galeria de imagens

Mensagem por IsmaelS. em 10/05/15, 03:52 pm

Descobri um problema, ou só acontece a mim, sei que adicionei o código, e as imagens dos outros tópicos, passavam a ter as medidas que o código JavaScritp tem. Ou seja a função no Painel de Controlo "Redimensionamento de imagens" deixa de funcionar com o JavaScript ativo :/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Re: [Plugin] BBCode galeria de imagens

Mensagem por Daemon em 11/07/15, 11:58 am

Código atualizado Rosa
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1689

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [Plugin] BBCode galeria de imagens

Mensagem por Mywhalei em 11/07/15, 12:08 pm

Realmente é útil pra fóruns de designs ou galerias.
avatar

Mywhalei
Nível 5

Feminino
Inscrito dia : 07/07/2015
Mensagens : 45
Pontos Ativos : 59

Ver perfil do usuário http://www.mywhalei.forumeiros.com

Re: [Plugin] BBCode galeria de imagens

Mensagem por Daemon em 31/07/15, 11:24 am

Código atualizado para a versão 1.2 Rindo
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1689

Ver perfil do usuário http://bestskins.forumeiros.com/
  • 0

Re: [Plugin] BBCode galeria de imagens

Mensagem por fascicularia em 02/09/15, 03:43 pm

Muito ruim o script desativa redimensionar imagens
avatar

fascicularia
Nível 5

Masculino
Inscrito dia : 05/03/2015
Mensagens : 40
Pontos Ativos : 55

Ver perfil do usuário http://altitudetropicale.forums-actifs.com/#

Re: [Plugin] BBCode galeria de imagens

Mensagem por Connor R. em 20/10/15, 02:33 pm

@Daemon creio que não esteja funcionando as setas, ou seja, não está passando de imagens, mais realmente é um código muito bom..
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 983
Pontos Ativos : 1601

Ver perfil do usuário http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Re: [Plugin] BBCode galeria de imagens

Mensagem por fascicularia em 22/02/16, 06:05 pm

a galeria pode ser usado apenas uma vez. Uma pena para um script que se destina a ser usado nas mensagens.
avatar

fascicularia
Nível 5

Masculino
Inscrito dia : 05/03/2015
Mensagens : 40
Pontos Ativos : 55

Ver perfil do usuário http://altitudetropicale.forums-actifs.com/#

Re: [Plugin] BBCode galeria de imagens

Mensagem por Daemon em 26/02/16, 11:17 pm

@fascicularia escreveu:a galeria pode ser usado apenas uma vez. Uma pena para um script que se destina a ser usado nas mensagens.

Como assim? Não está funcionando mais de uma vez?
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1689

Ver perfil do usuário http://bestskins.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum