updates justified gallery lib to version 3.7 and minor fixes for full template

library/justifiedGallery/jquery.justifiedGallery.js

@@ -1,19 +1,42 @@
 /*!
- * Justified Gallery - v3.6.5
+ * justifiedGallery - v3.7.0
  * http://miromannino.github.io/Justified-Gallery/
  * Copyright (c) 2018 Miro Mannino
  * Licensed under the MIT license.
  */
-(function($) {
+(function (factory) {
-
+  if (typeof define === 'function' && define.amd) {
-  function hasScrollBar() {
+    // AMD. Register as an anonymous module.
-    return $("body").height() > $(window).height();
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = function( root, jQuery ) {
+      if ( jQuery === undefined ) {
+        // require('jQuery') returns a factory that requires window to
+        // build a jQuery instance, we normalize how we use modules
+        // that require this pattern but the window provided is a noop
+        // if it's defined (how jquery works)
+        if ( typeof window !== 'undefined' ) {
+          jQuery = require('jquery');
         }
+        else {
+          jQuery = require('jquery')(root);
+        }
+      }
+      factory(jQuery);
+      return jQuery;
+    };
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+
   /**
    * Justified Gallery controller constructor
    *
    * @param $gallery the gallery to build
-   * @param settings the settings (the defaults are in $.fn.justifiedGallery.defaults)
+   * @param settings the settings (the defaults are in JustifiedGallery.defaults)
    * @constructor
    */
   var JustifiedGallery = function ($gallery, settings) {
@@ -46,6 +69,7 @@
       $el : $('<div class="spinner"><span></span><span></span><span></span></div>'),
       intervalId : null
     };
+    this.scrollBarOn = false;
     this.checkWidthIntervalId = null;
     this.galleryWidth = $gallery.width();
     this.$gallery = $gallery;
@@ -438,7 +462,7 @@
       this.offY += this.buildingRow.height + settings.margins;
       this.rows += 1;
       this.clearBuildingRow();
-      this.$gallery.trigger('jg.rowflush');
+      this.settings.triggerEvent.call(this, 'jg.rowflush');
     }
   };
   
@@ -462,11 +486,16 @@
     this.$gallery.height(height);
   };
   
+  /**
+   * @returns {boolean} a boolean saying if the scrollbar is active or not
+   */
+  function hasScrollBar() {
+    return $("body").height() > $(window).height();
+  }
   
   /**
    * Checks the width of the gallery container, to know if a new justification is needed
    */
-  var scrollBarOn = false;
   JustifiedGallery.prototype.checkWidth = function () {
     this.checkWidthIntervalId = setInterval($.proxy(function () {
   
@@ -474,7 +503,7 @@
       if (!this.$gallery.is(":visible")) return;
   
       var galleryWidth = parseFloat(this.$gallery.width());
-      if (hasScrollBar() === scrollBarOn) {
+      if (hasScrollBar() === this.scrollBarOn) {
         if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
           this.galleryWidth = galleryWidth;
           this.rewind();
@@ -485,7 +514,7 @@
           this.startImgAnalyzer(true);
         }
       } else {
-        scrollBarOn = hasScrollBar();
+        this.scrollBarOn = hasScrollBar();
         this.galleryWidth = galleryWidth;
       }
     }, this), this.settings.refreshTime);
@@ -764,7 +793,7 @@
     this.stopImgAnalyzerStarter();
   
     //On complete callback
-    this.$gallery.trigger(isForResize ? 'jg.resize' : 'jg.complete');
+    this.settings.triggerEvent.call(this, isForResize ? 'jg.resize' : 'jg.complete');
     this.setGalleryFinalHeight(this.galleryHeightToSet);
   };
   
@@ -1064,55 +1093,7 @@
     this.suffixRanges = this.retrieveSuffixRanges();
   };
   
-  /**
+  JustifiedGallery.prototype.defaults = {
-   * Justified Gallery plugin for jQuery
-   *
-   * Events
-   *  - jg.complete : called when all the gallery has been created
-   *  - jg.resize : called when the gallery has been resized
-   *  - jg.rowflush : when a new row appears
-   *
-   * @param arg the action (or the settings) passed when the plugin is called
-   * @returns {*} the object itself
-   */
-  $.fn.justifiedGallery = function (arg) {
-    return this.each(function (index, gallery) {
-
-      var $gallery = $(gallery);
-      $gallery.addClass('justified-gallery');
-
-      var controller = $gallery.data('jg.controller');
-      if (typeof controller === 'undefined') {
-        // Create controller and assign it to the object data
-        if (typeof arg !== 'undefined' && arg !== null && $.type(arg) !== 'object') {
-          if (arg === 'destroy') return; // Just a call to an unexisting object
-          throw 'The argument must be an object';
-        }
-        controller = new JustifiedGallery($gallery, $.extend({}, $.fn.justifiedGallery.defaults, arg));
-        $gallery.data('jg.controller', controller);
-      } else if (arg === 'norewind') {
-        // In this case we don't rewind: we analyze only the latest images (e.g. to complete the last unfinished row
-        // ... left to be more readable
-      } else if (arg === 'destroy') {
-        controller.destroy();
-        return;
-      } else {
-        // In this case Justified Gallery has been called again changing only some options
-        controller.updateSettings(arg);
-        controller.rewind();
-      }
-
-      // Update the entries list
-      if (!controller.updateEntries(arg === 'norewind')) return;
-
-      // Init justified gallery
-      controller.init();
-
-    });
-  };
-
-  // Default options
-  $.fn.justifiedGallery.defaults = {
     sizeRangeSuffixes: { }, /* e.g. Flickr configuration
         {
           100: '_t',  // used when longest is less than 100px
@@ -1165,7 +1146,57 @@
                     It follows the specifications of the Array.prototype.filter() function of JavaScript.
     */
     selector: 'a, div:not(.spinner)', // The selector that is used to know what are the entries of the gallery
-    imgSelector: '> img, > a > img' // The selector that is used to know what are the images of each entry
+    imgSelector: '> img, > a > img', // The selector that is used to know what are the images of each entry
+    triggerEvent: function (event) { // This is called to trigger events, the default behavior is to call $.trigger
+      this.$gallery.trigger(event);  // Consider that 'this' is this set to the JustifiedGallery object, so it can
+    }                                // access to fields such as $gallery, useful to trigger events with jQuery.
   };
 
-}(jQuery));
+  /**
+   * Justified Gallery plugin for jQuery
+   *
+   * Events
+   *  - jg.complete : called when all the gallery has been created
+   *  - jg.resize : called when the gallery has been resized
+   *  - jg.rowflush : when a new row appears
+   *
+   * @param arg the action (or the settings) passed when the plugin is called
+   * @returns {*} the object itself
+   */
+  $.fn.justifiedGallery = function (arg) {
+    return this.each(function (index, gallery) {
+
+      var $gallery = $(gallery);
+      $gallery.addClass('justified-gallery');
+
+      var controller = $gallery.data('jg.controller');
+      if (typeof controller === 'undefined') {
+        // Create controller and assign it to the object data
+        if (typeof arg !== 'undefined' && arg !== null && $.type(arg) !== 'object') {
+          if (arg === 'destroy') return; // Just a call to an unexisting object
+          throw 'The argument must be an object';
+        }
+        controller = new JustifiedGallery($gallery, $.extend({}, JustifiedGallery.prototype.defaults, arg));
+        $gallery.data('jg.controller', controller);
+      } else if (arg === 'norewind') {
+        // In this case we don't rewind: we analyze only the latest images (e.g. to complete the last unfinished row
+        // ... left to be more readable
+      } else if (arg === 'destroy') {
+        controller.destroy();
+        return;
+      } else {
+        // In this case Justified Gallery has been called again changing only some options
+        controller.updateSettings(arg);
+        controller.rewind();
+      }
+
+      // Update the entries list
+      if (!controller.updateEntries(arg === 'norewind')) return;
+
+      // Init justified gallery
+      controller.init();
+
+    });
+  };
+
+}));

library/justifiedGallery/justifiedGallery.css

@@ -1,5 +1,5 @@
 /*!
- * Justified Gallery - v3.6.5
+ * justifiedGallery - v3.7.0
  * http://miromannino.github.io/Justified-Gallery/
  * Copyright (c) 2018 Miro Mannino
  * Licensed under the MIT license.

library/justifiedGallery/justifiedGallery.min.css

@@ -1,7 +1,102 @@
 /*!
- * Justified Gallery - v3.6.5
+ * justifiedGallery - v3.7.0
  * http://miromannino.github.io/Justified-Gallery/
  * Copyright (c) 2018 Miro Mannino
  * Licensed under the MIT license.
  */
-.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div,.justified-gallery>figure{position:absolute;display:inline-block;overflow:hidden;filter:"alpha(opacity=10)";opacity:.1;margin:0;padding:0}.justified-gallery>a>img,.justified-gallery>div>img,.justified-gallery>figure>img,.justified-gallery>a>a>img,.justified-gallery>div>a>img,.justified-gallery>figure>a>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0;filter:"alpha(opacity=0)";opacity:0}.justified-gallery>a>.caption,.justified-gallery>div>.caption,.justified-gallery>figure>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible,.justified-gallery>figure>.caption.caption-visible{display:initial;filter:"alpha(opacity=70)";opacity:.7;-webkit-transition:opacity 500ms ease-in;-moz-transition:opacity 500ms ease-in;-o-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in}.justified-gallery>.entry-visible{filter:"alpha(opacity=100)";opacity:1;background:0 0}.justified-gallery>.entry-visible>img,.justified-gallery>.entry-visible>a>img{filter:"alpha(opacity=100)";opacity:1;-webkit-transition:opacity 500ms ease-in;-moz-transition:opacity 500ms ease-in;-o-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in}.justified-gallery>.jg-filtered{display:none}.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;filter:"alpha(opacity=100)";opacity:1;overflow:initial}.justified-gallery>.spinner>span{display:inline-block;filter:"alpha(opacity=0)";opacity:0;width:8px;height:8px;margin:0 4px;background-color:#000;border-radius:6px}
+.justified-gallery {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+  filter: "alpha(opacity=10)";
+  opacity: 0.1;
+  margin: 0;
+  padding: 0;
+}
+.justified-gallery > a > img,
+.justified-gallery > div > img,
+.justified-gallery > figure > img,
+.justified-gallery > a > a > img,
+.justified-gallery > div > a > img,
+.justified-gallery > figure > a > img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+}
+.justified-gallery > a > .caption,
+.justified-gallery > div > .caption,
+.justified-gallery > figure > .caption {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  padding: 5px;
+  background-color: #000000;
+  left: 0;
+  right: 0;
+  margin: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: 300;
+  font-family: sans-serif;
+}
+.justified-gallery > a > .caption.caption-visible,
+.justified-gallery > div > .caption.caption-visible,
+.justified-gallery > figure > .caption.caption-visible {
+  display: initial;
+  filter: "alpha(opacity=70)";
+  opacity: 0.7;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .entry-visible {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  background: none;
+}
+.justified-gallery > .entry-visible > img,
+.justified-gallery > .entry-visible > a > img {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-filtered {
+  display: none;
+}
+.justified-gallery > .spinner {
+  position: absolute;
+  bottom: 0;
+  margin-left: -24px;
+  padding: 10px 0 10px 0;
+  left: 50%;
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  overflow: initial;
+}
+.justified-gallery > .spinner > span {
+  display: inline-block;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  width: 8px;
+  height: 8px;
+  margin: 0 4px 0 4px;
+  background-color: #000;
+  border-radius: 6px;
+}

view/php/full.php

@@ -5,10 +5,11 @@
   <script>var baseurl="<?php echo z_root() ?>";</script>
   <?php if(x($page,'htmlhead')) echo $page['htmlhead'] ?>
 </head>
-<body>
+<body <?php if($page['direction']) echo 'dir="rtl"' ?> >
+	<?php if(x($page,'banner')) echo $page['banner']; ?>
 	<header><?php if(x($page,'header')) echo $page['header']; ?></header>
-	<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
+	<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
-	<section><?php if(x($page,'content')) echo $page['content']; ?>
+	<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>
 		<div id="page-footer"></div>
 	</section>
 </body>