The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

BBCode Gallery

4 posters

Go down

BBCode Gallery - BBCode Gallery Empty BBCode Gallery

Post by Daemon July 11th 2015, 5:04 pm

Introduction:
This plugin is to create a bbcode tag that adds a gallery of images to the post.

Below is the code that should be added with placement in all the pages:
Code:
/***
* Version: 1.1
* Code: BBCode Gallery
* Date: 10/07/2015
* Author: Daemon
* See more in: http://ajuda.forumeiros.com
***/
jQuery(document).ready(function($) {

 var jSpeed = 400;// Set the change speed of the image
 var jDirection;

 $('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 jContent = $('.postbody, .blog_message');
    jContent.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>');
    });

 var gallery = $('.image_gallery');
      for(var x = gallery, i = 0, e; (e = x[i++]);) { 
        var jThis = $(e);
        var jImg = jThis.find('img');
        var jImgSrc = jImg.attr('src');
        var jImageBs = jThis.find('.image_bs');
        jImageBs.attr('src', jImgSrc);
        jImg.click(function() {
                var jThisSrc = $(this).attr('src');
                jImageBs.fadeOut(jSpeed, function() {
                    jImageBs.attr('src', jThisSrc).fadeIn();
                });
        });

        jThis.find('.prev, .next').click(function() {
              var jChange = $(this);
              var jCurrentSrc = jImageBs.attr('src');
              var jCurrentImg = jThis.find('img[src="' + jCurrentSrc + '"]');
              jImageBs.fadeOut(jSpeed, function() {
                  if(jChange.hasClass('prev')) {
                      jDirection = jCurrentImg.prev().attr('src');
                  } else {
                      jDirection = jCurrentImg.next().attr('src');
                  }
                  jImageBs.attr('src', jDirection).fadeIn();
              });
        });

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

Result:
BBCode Gallery - BBCode Gallery J5gPG5x
BBCode Gallery - BBCode Gallery 1TszEQd
BBCode Gallery - BBCode Gallery JtJHP50
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by JScript July 11th 2015, 5:12 pm

@Daemon
A very beautiful and useful code!

Good to see you posting here also my friend,

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by Daemon July 11th 2015, 5:16 pm

JScript wrote:@Daemon
A very beautiful and useful code!

Good to see you posting here also my friend,

JS
Hahah, thanks @JScript... loul
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by SLGray July 12th 2015, 3:38 am

So this code only adds the gallery BBCode?


BBCode Gallery - BBCode Gallery Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by Daemon July 12th 2015, 4:13 am

SLGray wrote:So this code only adds the gallery BBCode?

Yes, SLGray ...

We will use the following:
Code:
[gallery][img]LINKIMG1[/img][img]LINKIMG2[/img][/gallery]
And the code will be responsible for creating a gallery with images that are among the tags!
You understand? blackeye
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by SLGray July 12th 2015, 4:32 am

Thanks for the information.  Will this conflict with the Light Fancy code?


BBCode Gallery - BBCode Gallery Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by Daemon July 12th 2015, 4:37 am

@SLGray

Yes... because the lightbox code is applied to all images of the post, including those who are in the gallery. So do not conflict, you must change a small portion of the lightbox code! Smile
Daemon
Daemon
Forumember

Posts : 104
Reputation : 91
Language : Português

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by SLGray July 12th 2015, 4:41 am

I can see this will work on a punBB forum.


BBCode Gallery - BBCode Gallery Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by JScript July 12th 2015, 4:43 am

Daemon wrote:(...)So do not conflict, you must change a small portion of the lightbox code! Smile
Or remove / replace the img tag for something else!

JS
JScript
JScript
Forumember

Male Posts : 741
Reputation : 175
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

BBCode Gallery - BBCode Gallery Empty Re: BBCode Gallery

Post by TamDonCo July 20th 2016, 8:25 pm

It 's very cool

If we can add text for each picture to describe , it 's wonderful
TamDonCo
TamDonCo
Forumember

Posts : 427
Reputation : 2
Language : English

http://nhomcho.forummotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum