Home
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:
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:
