Plugin da galeria de imagens

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 do seguinte tutorial, https://ajuda.forumeiros.com/t99694-plugin-bbcode-galeria-de-imagens
O mesmo funciona muito bem, mas gostaria de uma pequena alteração, que o mesmo reiniciasse as imagens quando o utilizador chegar na última, pois quando chega na última fica travado.
Veja um exemplo aqui, http://somosmugiwara.forumeiros.com/t2276-sugestao-ajuste-na-ficha-do-personagem#12005

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

 $('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');
        });
}


Olá,

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 $(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');
                        }
                    } else {
                        var $next = currentImg.next();

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

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


Não resultou meu chapa. Depois da última imagem, deve voltar para a primeira, no entanto, seu código não funciona para isto. Quando acaba as imagens fica se passando infinitamente para imagens que não existem...

Erro meu... >-<"

Faltou um teco de código...

Tente 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 $(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));

Funcionou de boas meu chapa, thanks.