Código de galeria no blog

Detalhes da questão

Endereço do fórum: http://somosmugiwara.forumeiros.com
Versão do fórum: PunBB

Descrição

Utilizo o código abaixo para implantar uma galeria de imagens nas postagens.
Porém o mesmo não funciona nos blogs, teria como fazer funcionar nos blogs também?

Código:


/* globals jQuery */

/**
 * Version: 1.2
 * Code: Galeria de imagens
 * Date: 14/07/2015
 * Last Update: 31/07/2015
 * Author: Daemon
 **/

(function($) {
    'use strict';

    /**
    * Abre o popup na galeria
    * @param {HTMLElement} gal Imagem selecionada para abrir.
    */
    function open_pop_up(gal) { // eslint-disable-line
        $('#overlay_gallery').fadeIn('slow', function() {
            $('#lightbox_gallery').fadeIn('fast');
            $('.lb-gallery-image').attr('src', $(gal).attr('src'));
        });
    }

    /**
    * Abre o popup na galeria
    */
    function close_pop_up() { // eslint-disable-line
        $('#lightbox_gallery').fadeOut('slow', function() {
            $('#overlay_gallery').fadeOut('fast');
        });
    }

    $(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: 55px auto;',
            '  max-width: 65%;',
            '  min-height: 130px;',
            '  min-width: 250px;',
            '  position: relative;',
            '  zoom: 1;',
            '}',
            '.lb-gallery-container {',
            '  padding: 4px;',
            '}',
            '#gallery_bs {',
            '  background-color: #fff;',
            '  min-height: 400px;',
            '  margin: 10px auto;',
            '  position: relative;',
            '  border-radius: 4px;',
            '  width: 850px;',
            '  border: 2px solid #ddd;',
            '}',
            '#gallery_bs .prev, #gallery_bs .next {',
            '  background-color: #f0f0f0;',
            '  border-radius: 5px;',
            '  padding: 3px;',
            '  opacity: 0;',
            '  height: 32px;',
            '  width: 32px;',
            '  position: absolute;',
            '  z-index: 200;',
            '  cursor: pointer;',
            '  top: 280px;',
            '  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: 400px;',
            '  text-align: center;',
            '}',
            '#gallery_bs .image_bs {',
            '  cursor: pointer;',
            '  height: 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: #f0f0f0;',
            '  padding: 5px 20px;',
            '  text-align: center;',
            '  border-bottom: 2px solid #ddd;',
            '  border-radius: 4px 4px 0 0;',
            '}',
            '.scroll_gal {',
            '  height: 80px;',
            '  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 {',
            '  height: 55px;',
            '  padding: 0px;',
            '  margin: 5px;',
            '  border: 2px solid #ddd;',
            '  transition: all linear .2s;',
            '  cursor: pointer;',
            '}',
            '#gallery_bs .header_gal img:hover {',
            '  border-color: #333;',
            '}',
            '</style>',
        ].join('\n'));

        $('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>',
        ].join('\n'));

        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>',
                ].join('\n'));
        });

        var gal = $('.image_gallery');

        gal.each(function() {
            var forThis = $(this);
            var img = forThis.find('img');
            var imgSrc = img.attr('src');
            var imgBs = forThis.find('.image_bs');

            imgBs.attr('src', imgSrc);

            $('img', forThis).click(function() {
                var thisSrc = $(this).attr('src');

                imgBs.fadeOut(400, function() {
                    imgBs.attr('src', thisSrc).fadeIn();
                });
            });

            forThis.find('.prev, .next').click(function() {
                var PN = $(this);
                var currentSrc = imgBs.attr('src');
                var currentImg = forThis.find('img[src="' + currentSrc + '"]');

                imgBs.fadeOut(400, function() {
                    var direction = '';

                    if (PN.hasClass('prev')) {
                        var $prev = currentImg.prev();

                        if ($prev.length) {
                            direction = $prev.attr('src');
                        } else {
                            direction = currentImg
                                .parent()
                                .find('img:last-child')
                        .attr('src');
                        }
                    } else {
                        var $next = currentImg.next();

                        if ($next.length) {
                            direction = $next.attr('src');
                        } else {
                            direction = currentImg
                                .parent()
                                .find('img:first-child')
                        .attr('src');
                        }
                    }

                    imgBs.attr('src', direction).fadeIn();
                });
            });
        });
    });
}(jQuery));


Olá.
Poderia indicar o link de uma página com o código acima e funcional, e o link de um blog?
*Ambos em seu fórum.

Até mais.

Aqui está.

Link Funcional: http://somosmugiwara.forumeiros.com/t2276-sugestao-ajuste-na-ficha-do-personagem#12005

Link de um Blog onde o código não funciona: http://somosmugiwara.forumeiros.com/t2463-teste-de-topico#12594

Apenas relembrando o post, ficarei no aguardo..

UP

Apenas relembrando o tópico.

Estranho... O código deveria funcionar em ambos os templates... Tente trocar por esse:

Código:


/* globals jQuery */

/**
 * Version: 1.2
 * Code: Galeria de imagens
 * Date: 14/07/2015
 * Last Update: 31/07/2015
 * Author: Daemon
 **/

(function($) {
    'use strict';

    /**
    * Abre o popup na galeria
    * @param {HTMLElement} gal Imagem selecionada para abrir.
    */
    function open_pop_up(gal) { // eslint-disable-line
        $('#overlay_gallery').fadeIn('slow', function() {
            $('#lightbox_gallery').fadeIn('fast');
            $('.lb-gallery-image').attr('src', $(gal).attr('src'));
        });
    }

    /**
    * Abre o popup na galeria
    */
    function close_pop_up() { // eslint-disable-line
        $('#lightbox_gallery').fadeOut('slow', function() {
            $('#overlay_gallery').fadeOut('fast');
        });
    }

    $(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: 55px auto;',
            '  max-width: 65%;',
            '  min-height: 130px;',
            '  min-width: 250px;',
            '  position: relative;',
            '  zoom: 1;',
            '}',
            '.lb-gallery-container {',
            '  padding: 4px;',
            '}',
            '#gallery_bs {',
            '  background-color: #fff;',
            '  min-height: 400px;',
            '  margin: 10px auto;',
            '  position: relative;',
            '  border-radius: 4px;',
            '  width: 850px;',
            '  border: 2px solid #ddd;',
            '}',
            '#gallery_bs .prev, #gallery_bs .next {',
            '  background-color: #f0f0f0;',
            '  border-radius: 5px;',
            '  padding: 3px;',
            '  opacity: 0;',
            '  height: 32px;',
            '  width: 32px;',
            '  position: absolute;',
            '  z-index: 200;',
            '  cursor: pointer;',
            '  top: 280px;',
            '  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: 400px;',
            '  text-align: center;',
            '}',
            '#gallery_bs .image_bs {',
            '  cursor: pointer;',
            '  height: 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: #f0f0f0;',
            '  padding: 5px 20px;',
            '  text-align: center;',
            '  border-bottom: 2px solid #ddd;',
            '  border-radius: 4px 4px 0 0;',
            '}',
            '.scroll_gal {',
            '  height: 80px;',
            '  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 {',
            '  height: 55px;',
            '  padding: 0px;',
            '  margin: 5px;',
            '  border: 2px solid #ddd;',
            '  transition: all linear .2s;',
            '  cursor: pointer;',
            '}',
            '#gallery_bs .header_gal img:hover {',
            '  border-color: #333;',
            '}',
            '</style>',
        ].join('\n'));

        $('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>',
        ].join('\n'));

        var content = $('.postbody, .blog_message');

        content.html(function() {
            return content
                .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>',
                ].join('\n'));
        });
      
      var render = function() {
         var gal = $('.image_gallery');

         gal.each(function() {
            var forThis = $(this);
            var img = forThis.find('img');
            var imgSrc = img.attr('src');
            var imgBs = forThis.find('.image_bs');

            imgBs.attr('src', imgSrc);

            $('img', forThis).click(function() {
               var thisSrc = $(this).attr('src');

               imgBs.fadeOut(400, function() {
                  imgBs.attr('src', thisSrc).fadeIn();
               });
            });

            forThis.find('.prev, .next').click(function() {
               var PN = $(this);
               var currentSrc = imgBs.attr('src');
               var currentImg = forThis.find('img[src="' + currentSrc + '"]');

               imgBs.fadeOut(400, function() {
                  var direction = '';

                  if (PN.hasClass('prev')) {
                     var $prev = currentImg.prev();

                     if ($prev.length) {
                        direction = $prev.attr('src');
                     } else {
                        direction = currentImg
                           .parent()
                           .find('img:last-child')
                     .attr('src');
                     }
                  } else {
                     var $next = currentImg.next();

                     if ($next.length) {
                        direction = $next.attr('src');
                     } else {
                        direction = currentImg
                           .parent()
                           .find('img:first-child')
                     .attr('src');
                     }
                  }

                  imgBs.attr('src', direction).fadeIn();
               });
            });
         });
      };

        setTimeout(render, 1000);
    });
}(jQuery));

Funcionou em parte Kyo, veja abaixo.

No Blog funcionou: http://somosmugiwara.forumeiros.com/t2463-teste-de-topico#12594
Mas nas mensagens do blog também está repetindo a primeira mensagem...

Porém, no tópico não funcionou e ainda bugou tudo, repetindo sempre a primeira mensagem, veja: http://somosmugiwara.forumeiros.com/t2276-sugestao-ajuste-na-ficha-do-personagem#12005

UP

Apenas dando um lembrete no tópico.....

UP

Apenas relembrando o tópico para não ser fechado.

Consegui resolver o código, apliquei em todas as páginas e está funcionando normalmente. Tudo resolvido.