BBCode Gallery
4 posters
Page 1 of 1
BBCode Gallery
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:
Result:
![BBCode Gallery J5gPG5x](https://i.imgur.com/J5gPG5x.png)
![BBCode Gallery 1TszEQd](https://i.imgur.com/1TszEQd.png)
![BBCode Gallery JtJHP50](https://i.imgur.com/JtJHP50.jpg)
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 J5gPG5x](https://i.imgur.com/J5gPG5x.png)
![BBCode Gallery 1TszEQd](https://i.imgur.com/1TszEQd.png)
![BBCode Gallery JtJHP50](https://i.imgur.com/JtJHP50.jpg)
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: BBCode Gallery
So this code only adds the gallery BBCode?
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![BBCode Gallery Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: BBCode Gallery
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]
You understand?
![blackeye](/users/3412/19/22/63/smiles/columbo2.gif)
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: BBCode Gallery
Thanks for the information. Will this conflict with the Light Fancy code?
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![BBCode Gallery Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: BBCode Gallery
@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](https://2img.net/i/fa/i/smiles/icon_smile.gif)
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](https://2img.net/i/fa/i/smiles/icon_smile.gif)
Daemon- Forumember
- Posts : 104
Reputation : 91
Language : Português
Re: BBCode Gallery
I can see this will work on a punBB forum.
![](https://i.servimg.com/u/f18/16/89/96/68/sig_se10.png)
![BBCode Gallery Slgray10](https://i.servimg.com/u/f28/11/40/02/06/slgray10.png)
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: BBCode Gallery
Or remove / replace the img tag for something else!Daemon wrote:(...)So do not conflict, you must change a small portion of the lightbox code!
JS
![-](https://2img.net/i/empty.gif)
» BBCode Gallery
» How can add the BBCode Button on the title bar of BBCode Table?
» PLEASE HELP VOTE on Gallery and Gallery Display Bar
» How to add bbcode?
» bbcode
» How can add the BBCode Button on the title bar of BBCode Table?
» PLEASE HELP VOTE on Gallery and Gallery Display Bar
» How to add bbcode?
» bbcode
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum