Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Widget staff online
Hoje à(s) 07:51 pm por Daemon

» FanBar Roger
Hoje à(s) 07:43 pm por Roger_Crazzy

» Avatar Roger
Hoje à(s) 07:26 pm por Roger_Crazzy

» Botões de Moderação
Hoje à(s) 07:24 pm por Roger_Crazzy

» Como Importar/Exportar Postagens para outro fórum
Hoje à(s) 06:53 pm por 1Gu@n4

» Musica no Forum
Hoje à(s) 06:44 pm por Harleen

» Adicionar Javascript no post
Hoje à(s) 06:24 pm por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
Roger_Crazzy
 
>.< T-T =3
 

Quem está conectado
302 usuários online :: 9 usuários cadastrados, 1 Invisível e 292 Visitantes :: 2 Motores de busca

'Dante, 1Gu@n4, Daemon, Froozen, Lincoln, Marmitt, Roger_Crazzy, Satoru, Wamki

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Código de galeria no blog

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

Resolvido Código de galeria no blog

Mensagem por Connor R. em 23/03/17, 01:37 pm

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


Última edição por Connor R. em 03/04/17, 11:27 am, editado 1 vez(es)
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Luiz em 23/03/17, 01:44 pm

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.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

https://github.com/lffg/

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 23/03/17, 02:00 pm

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
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 24/03/17, 07:36 pm

Apenas relembrando o post, ficarei no aguardo..
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 26/03/17, 02:28 pm

UP

Apenas relembrando o tópico.
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Kyo Panda em 27/03/17, 10:37 am

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


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3638
Pontos Ativos : 4859

http://ajuda.forumeiros.com

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 27/03/17, 12:48 pm

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
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 28/03/17, 02:08 pm

UP

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

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 31/03/17, 10:15 am

UP

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

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Connor R. em 03/04/17, 11:09 am

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

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 922
Pontos Ativos : 1510

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Código de galeria no blog

Mensagem por Luiz em 03/04/17, 01:08 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

https://github.com/lffg/

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

- Tópicos similares

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