BBCode Gallery
4 posters
Page 2 of 2
Page 2 of 2 • 1, 2
BBCode Gallery
First topic message reminder :
Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Opera
Who the problem concerns : All members
Forum link : http://altitudetest.forumactif.com
I just tested this trick and am having an issue with the thumbnails.
https://help.forumotion.com/t141874-bbcode-gallery?highlight=BBCode+Gallery
A picture will be more explanatory.
a link to realize the little worries
http://altitudetest.forumactif.com/t81-gallery-in-test#236
The code
and js
By pure chance, is it possible that the script does not disable image resizing system if the bbcode gallery is not used.
Thank you in advance for your help
Technical Details
Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Opera
Who the problem concerns : All members
Forum link : http://altitudetest.forumactif.com
Description of problem
Hello,I just tested this trick and am having an issue with the thumbnails.
https://help.forumotion.com/t141874-bbcode-gallery?highlight=BBCode+Gallery
A picture will be more explanatory.
a link to realize the little worries
http://altitudetest.forumactif.com/t81-gallery-in-test#236
The code
- Code:
[gallery][img]http://i40.servimg.com/u/f40/15/90/50/76/fruit_10.jpg[/img][img]http://i40.servimg.com/u/f40/15/90/50/76/longan10.jpg[/img][img]http://i40.servimg.com/u/f40/15/90/50/76/mangou10.jpg[/img][img]http://i40.servimg.com/u/f40/15/90/50/76/noix_d12.jpg[/img]
[img]http://i40.servimg.com/u/f40/15/90/50/76/pomme_16.jpg[/img][img]http://i40.servimg.com/u/f40/15/90/50/76/zaban_11.jpg[/img]
[img]http://i40.servimg.com/u/f40/15/90/50/76/rambou10.jpg[/img][img]http://i40.servimg.com/u/f40/15/90/50/76/gros_v11.jpg[/img][/gallery]
and js
- 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');
});
}
By pure chance, is it possible that the script does not disable image resizing system if the bbcode gallery is not used.
Thank you in advance for your help
Last edited by fascicularia on February 22nd 2016, 2:55 pm; edited 2 times in total
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
bump
fascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:bumpfascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:fascicularia wrote:bumpfascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:bumpfascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
hello @fascicularia
fibd this code css :
replace :
and find this code css :
replace :
fibd this code css :
- Code:
#gallery_bs .header_gal {
background-color: #333;
text-align: center;
width: 100%;
}
replace :
- Code:
#gallery_bs .header_gal {
background-color: #333;
text-align: center;
display: flex;
width: 100%;
}
and find this code css :
- Code:
#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;
display: -webkit-inline-box;
}
replace :
- Code:
#gallery_bs .header_gal img {
width: 65px;
height: 85px;
padding: 0px;
margin: 5px;
border-style: solid;
border-width: 3px;
transition: all linear .2s;
cursor: pointer;
display: -webkit-inline-box;
}
Re: BBCode Gallery
Hello new.moon,
sorry for the delay.
the problems with the displa flex is that it reduces the thumbnails which makes visualistion function of these unnecessary.
On the original tutorial, it has a slider which allows to scroll through the thumbnails without distortion.
sorry for the delay.
the problems with the displa flex is that it reduces the thumbnails which makes visualistion function of these unnecessary.
On the original tutorial, it has a slider which allows to scroll through the thumbnails without distortion.
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:fascicularia wrote:bumpfascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:fascicularia wrote:fascicularia wrote:bumpfascicularia wrote:fascicularia wrote:Hello everyone,
I solved the concerns about the fact that it was impossible to put several gallery on the same message.
Here is the script
- Code:
$(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: -webkit-zoom-in;' +
' 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;' +
' text-align: center;' +
'}' +
'#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">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
});
$('.image_gallery').each(function() {
var jThis = $(this);
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');
});
}
and a link to see its operation
http://altitudetest.forumactif.com/t84-test-de-test#238
Still two problems to solve:
- Disabling the system resizing images
- This newline after 6 pictures
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
fascicularia wrote:fascicularia wrote:fascicularia wrote:fascicularia wrote:bumpfascicularia wrote:
bump
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Page 2 of 2 • 1, 2
Similar topics
» BBcode
» help for add bbcode
» Don't want personal albums in gallery to show up in gallery widget.
» bbcode
» BBCode
» help for add bbcode
» Don't want personal albums in gallery to show up in gallery widget.
» bbcode
» BBCode
Page 2 of 2
Permissions in this forum:
You cannot reply to topics in this forum