The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

BBCode Gallery

4 posters

Page 2 of 2 Previous  1, 2

Go down

BBCode Gallery - Page 2 Empty BBCode Gallery

Post by fascicularia 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.
https://help.forumotion.com/t141874-bbcode-gallery?highlight=BBCode+Gallery

A picture will be more explanatory.
BBCode Gallery - Page 2 Captur13

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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down


BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

Bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by YasirAyad 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;
}
YasirAyad
YasirAyad
Forumember

Male Posts : 67
Reputation : 10
Language : En/Ar

http://help.ahlamontada.com/u152001

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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.
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

Post by fascicularia 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
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

BBCode Gallery - Page 2 Empty Re: BBCode Gallery

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

bump
avatar
fascicularia
Forumember

Posts : 172
Reputation : 1
Language : french

Back to top Go down

Page 2 of 2 Previous  1, 2

Back to top

- Similar topics

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