[Tutorial] Bbcode Galeria de Imagens

Informações:
Autor: Daemon
Funcionalidade: Todas as Versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript

E Crie um novo Javascript com investimento em todas as paginas com esse código:

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 $gal = {
    speed: 400,// Set the change speed of the image
    direction: '',
    content: $('.postbody, .blog_message'),
    gallery: null,
    this: null,
    thisSrc: '',
    img: null,
    imgSrc: '',
    imgBs: null,
    change: null,
    currentSrc: '',
    currentImg: null
 };
 $gal.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"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
 });

 $gal.gallery = $('.image_gallery');
      for (var x = $gal.gallery, i = 0, e; (e = x[i++]); ) {  
          $gal.this = $(e);
          $gal.img = $gal.this.find('img');
          $gal.imgSrc = $gal.img.attr('src');
          $gal.imgBs = $gal.this.find('.image_bs');
          $gal.imgBs.attr('src', $gal.imgSrc);
          $gal.img.click(function() {
                $gal.thisSrc = $(this).attr('src');
                $gal.imgBs.fadeOut($gal.speed, function() {
                $gal.imgBs.attr('src', $gal.thisSrc).fadeIn();
                });
          });

          $gal.this.find('.prev, .next').click(function() {
                $gal.change = $(this);
                $gal.currentSrc = $gal.imgBs.attr('src');
                $gal.currentImg = $gal.this.find('img[src="' + $gal.currentSrc + '"]');
                $gal.imgBs.fadeOut($gal.speed, function() {
                if($gal.change.hasClass('prev')) {
                    $gal.direction = $gal.currentImg.prev().attr('src');
                } else {
                    $gal.direction = $gal.currentImg.next().attr('src');
                }
                $gal.imgBs.attr('src', $gal.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');
        });
}

Resultado:


Como deve escrever para funcionar?
Simples com a variavel [gallery] e depois com o / antes.
Exemplo: