BBCode Gallery
4 posters
Page 1 of 2
Page 1 of 2 • 1, 2
BBCode Gallery
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, 15:55; edited 2 times in total
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
What exactly is the issue?
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
hI SLGray,
1 thumbnails do not put on a single line,
2 scroll sytem takes into account that the first 4 images and
3 buttons on the slide are not in their place.
Here's what it should give according to the tutorial
and on my test forum
This test forum is free of any modification
1 thumbnails do not put on a single line,
2 scroll sytem takes into account that the first 4 images and
3 buttons on the slide are not in their place.
Here's what it should give according to the tutorial
and on my test forum
This test forum is free of any modification
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
Try this for 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]
Take Notes- Helper
- Posts : 2337
Reputation : 324
Language : English
Location : Forumountain
Re: BBCode Gallery
Hello Forumedic,
the resulting output is almost identical
the result (see the second message)
http://altitudetest.forumactif.com/t81-gallery-in-test#236
I tried this (removing any spaces )
but I got the same result : see the thirst message
http://altitudetest.forumactif.com/t81-gallery-in-test#236
the resulting output is almost identical
the result (see the second message)
http://altitudetest.forumactif.com/t81-gallery-in-test#236
I tried this (removing any spaces )
but I got the same result : see the thirst message
http://altitudetest.forumactif.com/t81-gallery-in-test#236
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
Good evening,
I allow myself to add additional information.
It is impossible to use the system twice on the same topic. The first is automatically deactivated as soon as the second is added.
There would be no way to resolve this concern especially for a feature to be used in messages
an essay on this topic with 3 pictures
http://altitudetest.forumactif.com/t85-gallery-in-test-2#251
I allow myself to add additional information.
It is impossible to use the system twice on the same topic. The first is automatically deactivated as soon as the second is added.
There would be no way to resolve this concern especially for a feature to be used in messages
an essay on this topic with 3 pictures
http://altitudetest.forumactif.com/t85-gallery-in-test-2#251
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
So this is solved?
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
Hi SLGray,
Nothing is resolved.
Just go on this topic to see that it is only one gallery that works (turn on the first slide)
http://altitudetest.forumactif.com/t85-gallery-in-test-2#251
By going on this, you will realize that beyond 4 images, nothing works.
http://altitudetest.forumactif.com/t81-gallery-in-test#236
For a detailed explanation, see my previous posts.
Nothing is resolved.
Just go on this topic to see that it is only one gallery that works (turn on the first slide)
http://altitudetest.forumactif.com/t85-gallery-in-test-2#251
By going on this, you will realize that beyond 4 images, nothing works.
http://altitudetest.forumactif.com/t81-gallery-in-test#236
For a detailed explanation, see my previous posts.
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
Yesterday at 3:02 pm
Today at 9:20 am
Please don't double post. Your post needs to be separated by at least 24 hours before bumping. Please use the edit button instead!
Today at 9:20 am
Please don't double post. Your post needs to be separated by at least 24 hours before bumping. Please use the edit button instead!
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
Sorry I can't help, maybe @Ange Tuteur can if he has time?
Take Notes- Helper
- Posts : 2337
Reputation : 324
Language : English
Location : Forumountain
Re: BBCode Gallery
no problem Forumedic.Thank you for stopping on this topic.
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Re: BBCode Gallery
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
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
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
fascicularia- Forumember
- Posts : 172
Reputation : 1
Language : french
Page 1 of 2 • 1, 2
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum