The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

BBCode Gallery

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

BBCode Gallery

Post by fascicularia on February 21st 2016, 7:36 pm

First topic message reminder :

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.
http://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 : 100
Reputation : 1
Language : french

Back to top Go down


Re: BBCode Gallery

Post by fascicularia on March 26th 2016, 5:05 pm

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on March 27th 2016, 8:55 pm

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on March 28th 2016, 1:14 pm

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on March 30th 2016, 3:35 pm

Bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on March 31st 2016, 10:36 pm

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 2nd 2016, 10:40 am

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 6th 2016, 2:43 pm

@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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 8th 2016, 10:36 am

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 11th 2016, 6:38 pm

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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 15th 2016, 7:49 pm

@fascicularia wrote: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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 16th 2016, 7:22 pm

@fascicularia wrote:
@fascicularia wrote: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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 17th 2016, 8:42 pm

@fascicularia wrote: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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by new.moon on April 19th 2016, 12:45 am

hello @fascicularia
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;
}

new.moon
Forumember

Male Posts : 59
Reputation : 9
Language : En/Ar

http://help.ahlamontada.com/u152001

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on April 30th 2016, 3:11 pm

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.

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on May 3rd 2016, 1:26 pm

@fascicularia wrote:
@fascicularia wrote: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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on May 4th 2016, 1:39 pm

@fascicularia wrote:
@fascicularia wrote:
@fascicularia wrote: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 : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on May 5th 2016, 11:47 am

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on May 6th 2016, 8:41 pm

@fascicularia wrote:
@fascicularia wrote:
@fascicularia wrote:
@fascicularia wrote:bump
@fascicularia wrote:

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Re: BBCode Gallery

Post by fascicularia on May 9th 2016, 1:08 pm

bump

fascicularia
Forumember

Posts : 100
Reputation : 1
Language : french

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


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