update justifiedGallery to version 3.5.4 and add ignoreElement option which will hopefully be accepted upstream

library/justifiedGallery/dist/css/justifiedGallery.min.css

@@ -1,7 +0,0 @@
-/*!
- * Justified Gallery - v3.2.0
- * http://miromannino.com/projects/justified-gallery/
- * Copyright (c) 2014 Miro Mannino
- * Licensed under the MIT license.
- */
-@-webkit-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-moz-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-o-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-webkit-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-moz-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-o-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}.justified-gallery>a>img,.justified-gallery>div>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}.justified-gallery>a>.caption,.justified-gallery>div>.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{display:initial;opacity:.7;filter:"alpha(opacity=70)";-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 300ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 300ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 300ms 0 ease}.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px}

library/justifiedGallery/jquery.justifiedGallery.js

@@ -1,7 +1,7 @@
-/*
+/*!
- * Justified Gallery - v3.4.0
+ * Justified Gallery - v3.5.4
- * http://miromannino.com/projects/justified-gallery/
+ * http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2014 Miro Mannino
+ * Copyright (c) 2015 Miro Mannino
  * Licensed under the MIT license.
  */
 (function($) {
@@ -16,34 +16,37 @@
     // Default options
     var defaults = {
       sizeRangeSuffixes : {
-        'lt100': '_t', 
+        'lt100': '',  // e.g. Flickr uses '_t'
-        'lt240': '_m', 
+        'lt240': '',  // e.g. Flickr uses '_m' 
-        'lt320': '_n', 
+        'lt320': '',  // e.g. Flickr uses '_n' 
-        'lt500': '', 
+        'lt500': '',  // e.g. Flickr uses '' 
-        'lt640': '_z', 
+        'lt640': '',  // e.g. Flickr uses '_z'
-        'lt1024': '_b'
+        'lt1024': '', // e.g. Flickr uses '_b'
       },
       rowHeight : 120,
-      maxRowHeight : 0, //negative value = no limits, 0 = 1.5 * rowHeight
+      maxRowHeight : 0, // negative value = no limits, 0 = 1.5 * rowHeight
       margins : 1,
+      border: -1, // negative value = same as margins, 0 = disabled
+
       lastRow : 'nojustify', // or can be 'justify' or 'hide'
       justifyThreshold: 0.75, /* if row width / available space > 0.75 it will be always justified 
-                    (i.e. lastRow setting is not considered) */
+                                  (i.e. lastRow setting is not considered) */
       fixedHeight : false,
       waitThumbnailsLoad : true,
       captions : true,
       cssAnimation: false,
-      imagesAnimationDuration : 500, //ignored with css animations
+      imagesAnimationDuration : 500, // ignored with css animations
-      captionSettings : { //ignored with css animations
+      captionSettings : { // ignored with css animations
         animationDuration : 500,
         visibleOpacity : 0.7, 
         nonVisibleOpacity : 0.0 
       },
-      rel : null, //rewrite the rel of each analyzed links
+      rel : null, // rewrite the rel of each analyzed links
-      target : null, //rewrite the target of all links
+      target : null, // rewrite the target of all links
       extension : /\.[^.\\/]+$/,
       refreshTime : 100,
-      randomize : false
+      randomize : false,
+      ignoreElement: null // a comma seperated list of div element selectors to be ignored e.g.: '.someClass, #someId'
     };
 
     function getSuffix(width, height, context) {
@@ -136,12 +139,20 @@
       }
     }
 
+    function imgFromEntry($entry) {
+      var $img = $entry.find('> img');
+      if ($img.length === 0) $img = $entry.find('> a > img');    
+      return $img;
+    }
+
     function displayEntry($entry, x, y, imgWidth, imgHeight, rowHeight, context) {
-      var $image = $entry.find('img');
+      var $image = imgFromEntry($entry);
       $image.css('width', imgWidth);
       $image.css('height', imgHeight);
-      $image.css('margin-left', - imgWidth / 2);
+      //if ($entry.get(0) === $image.parent().get(0)) { // this creates an error in link_around_img test
-      $image.css('margin-top', - imgHeight / 2);
+        $image.css('margin-left', - imgWidth / 2);
+        $image.css('margin-top', - imgHeight / 2);
+      //}
       $entry.width(imgWidth);
       $entry.height(rowHeight);
       $entry.css('top', y);
@@ -165,9 +176,9 @@
       }
 
       if ($image.data('jg.loaded') === 'skipped') {
-        $image.one('load', function() {
+        onImageEvent(imageSrc, function() {
           showImg($entry, loadNewImage, context);
-          $image.data('jg.loaded', 'loaded');
+          $image.data('jg.loaded', true);
         });
       } else {
         showImg($entry, loadNewImage, context);
@@ -216,8 +227,8 @@
       var settings = context.settings;
       var i, $entry, $image, imgAspectRatio, newImgW, newImgH, justify = true;
       var minHeight = 0;
-      var availableWidth = context.galleryWidth - (
+      var availableWidth = context.galleryWidth - 2 * context.border - (
-                          (context.buildingRow.entriesBuff.length - 1) * settings.margins);
+                            (context.buildingRow.entriesBuff.length - 1) * settings.margins);
       var rowHeight = availableWidth / context.buildingRow.aspectRatio;
       var justificable = context.buildingRow.width / availableWidth > settings.justifyThreshold;
 
@@ -237,11 +248,12 @@
       if (isLastRow && !justificable && settings.lastRow === 'nojustify') justify = false;
 
       for (i = 0; i < context.buildingRow.entriesBuff.length; i++) {
-        $image = context.buildingRow.entriesBuff[i].find('img');
+        $image = imgFromEntry(context.buildingRow.entriesBuff[i]);
         imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh');
 
         if (justify) {
-          newImgW = rowHeight * imgAspectRatio;
+          newImgW = (i === context.buildingRow.entriesBuff.length - 1) ? availableWidth 
+                      : rowHeight * imgAspectRatio;
           newImgH = rowHeight;
 
           /* With fixedHeight the newImgH must be greater than rowHeight. 
@@ -252,13 +264,15 @@
             newImgW = settings.rowHeight * imgAspectRatio;
             newImgH = settings.rowHeight;
           }*/
+
         } else {
           newImgW = settings.rowHeight * imgAspectRatio;
           newImgH = settings.rowHeight;
         }
 
-        $image.data('jg.imgw', Math.ceil(newImgW));
+        availableWidth -= Math.round(newImgW);
-        $image.data('jg.imgh', Math.ceil(newImgH));
+        $image.data('jg.jimgw', Math.round(newImgW));
+        $image.data('jg.jimgh', Math.ceil(newImgH));
         if (i === 0 || minHeight > newImgH) minHeight = newImgH;
       }
 
@@ -273,12 +287,12 @@
       context.buildingRow.entriesBuff = [];
       context.buildingRow.aspectRatio = 0;
       context.buildingRow.width = 0;
-      context.offY = 0;
+      context.offY = context.border;
     }
 
     function flushRow(context, isLastRow) {
       var settings = context.settings;
-      var $entry, $image, minHeight, buildingRowRes, offX = 0;
+      var $entry, $image, minHeight, buildingRowRes, offX = context.border;
 
       //DEBUG// console.log('flush (isLastRow: ' + isLastRow + ')');
 
@@ -298,14 +312,14 @@
 
       for (var i = 0; i < context.buildingRow.entriesBuff.length; i++) {
         $entry = context.buildingRow.entriesBuff[i];
-        $image = $entry.find('img');
+        $image = imgFromEntry($entry);
-        displayEntry($entry, offX, context.offY, $image.data('jg.imgw'), 
+        displayEntry($entry, offX, context.offY, $image.data('jg.jimgw'), 
-                     $image.data('jg.imgh'), minHeight, context);
+                     $image.data('jg.jimgh'), minHeight, context);
-        offX += $image.data('jg.imgw') + settings.margins;
+        offX += $image.data('jg.jimgw') + settings.margins;
       }
 
       //Gallery Height
-      context.$gallery.height(context.offY + minHeight +
+      context.$gallery.height(context.offY + minHeight + context.border + 
         (context.spinner.active ? context.spinner.$el.innerHeight() : 0)
       );
 
@@ -375,7 +389,7 @@
       console.log('images status: ');
       for (var i = 0; i < context.entries.length; i++) {
         var $entry = $(context.entries[i]);
-        var $image = $entry.find('img');
+        var $image = imgFromEntry($entry);
         console.log(i + ' (alt: ' + $image.attr('alt') + 'loaded: ' + $image.data('jg.loaded') + ')');
       }*/
 
@@ -385,12 +399,12 @@
       
       for (var i = context.lastAnalyzedIndex + 1; i < context.entries.length; i++) {
         var $entry = $(context.entries[i]);
-        var $image = $entry.find('img');
+        var $image = imgFromEntry($entry);
 
         if ($image.data('jg.loaded') === true || $image.data('jg.loaded') === 'skipped') {
           isLastRow = i >= context.entries.length - 1;
 
-          var availableWidth = context.galleryWidth - (
+          var availableWidth = context.galleryWidth - 2 * context.border - (
                                (context.buildingRow.entriesBuff.length - 1) * settings.margins);
           var imgAspectRatio = $image.data('jg.imgw') / $image.data('jg.imgh');
           if (availableWidth / (context.buildingRow.aspectRatio + imgAspectRatio) < settings.rowHeight) {
@@ -475,6 +489,7 @@
       }
       
       checkOrConvertNumber(settings, 'margins');
+      checkOrConvertNumber(settings, 'border');
 
       if (settings.lastRow !== 'nojustify' &&
           settings.lastRow !== 'justify' &&
@@ -516,6 +531,30 @@
 
     }
 
+    function onImageEvent(imageSrc, onLoad, onError) {
+      if (!onLoad && !onError) {
+        return;
+      }
+      /* Check if the image is loaded or not using another image object.
+       We cannot use the 'complete' image property, because some browsers,
+       with a 404 set complete = true */
+      var memImage = new Image();
+      var $memImage = $(memImage);
+      if (onLoad) {
+        $memImage.one('load', function () {
+          $memImage.off('load error');
+          onLoad(memImage);
+        });
+      }
+      if (onError) {
+        $memImage.one('error', function() {
+          $memImage.off('load error');
+          onError(memImage);
+        });
+      }
+      memImage.src = imageSrc;
+    }
+
     return this.each(function (index, gallery) {
 
       var $gallery = $(gallery);
@@ -529,10 +568,15 @@
 
         // Spinner init
         var $spinner = $('<div class="spinner"><span></span><span></span><span></span></div>');
+        var extendedSettings = $.extend({}, defaults, arg);
 
+        var border = extendedSettings.border >= 0 ? extendedSettings.border : extendedSettings.margins;
+
+	var ignoreElement = extendedSettings.ignoreElement;
+	
         //Context init
         context = {
-          settings : $.extend({}, defaults, arg),
+          settings : extendedSettings,
           imgAnalyzerTimeout : null,
           entries : null,
           buildingRow : {
@@ -546,7 +590,8 @@
                   * must be greater than 1, else the analyzeImages will loop */
             flushed : 0 //flushed rows without a yield
           },
-          offY : 0,
+          border : border,
+          offY : border,
           spinner : {
             active : false,
             phase : 0,
@@ -556,7 +601,7 @@
             intervalId : null
           },
           checkWidthIntervalId : null,
-          galleryWidth : $gallery.width(),
+          galleryWidth :  $gallery.width(),
           $gallery : $gallery
         };
 
@@ -571,12 +616,13 @@
         // In this case we don't rewind, and analyze all the images
       } else {
         context.settings = $.extend({}, context.settings, arg);
+        context.border = context.settings.border >= 0 ? context.settings.border : context.settings.margins;
         rewind(context);
       }
       
       checkSettings(context);
 
-      context.entries = $gallery.find('> a, > div:not(.spinner, #page-end)').toArray();
+      context.entries = $gallery.find('> a, > div:not(.spinner, ' + ignoreElement + ')').toArray();
       if (context.entries.length === 0) return;
 
       // Randomize
@@ -588,9 +634,12 @@
       }
 
       var imagesToLoad = false;
+      var skippedImages = false;
       $.each(context.entries, function (index, entry) {
         var $entry = $(entry);
-        var $image = $entry.find('img');
+        var $image = imgFromEntry($entry);
+
+        $entry.addClass('jg-entry');
 
         if ($image.data('jg.loaded') !== true && $image.data('jg.loaded') !== 'skipped') {
 
@@ -612,6 +661,7 @@
             $image.data('jg.imgw', width);
             $image.data('jg.imgh', height);
             $image.data('jg.loaded', 'skipped');
+            skippedImages = true;
             startImgAnalyzer(context, false);
             return true;
           }
@@ -627,32 +677,23 @@
             startLoadingSpinnerAnimation(context.spinner);
           }
 
-          /* Check if the image is loaded or not using another image object.
+          onImageEvent(imageSrc, function imgLoaded (loadImg) {
-            We cannot use the 'complete' image property, because some browsers, 
-            with a 404 set complete = true */
-          var loadImg = new Image();
-          var $loadImg = $(loadImg);
-          $loadImg.one('load', function imgLoaded () {
             //DEBUG// console.log('img load (alt: ' + $image.attr('alt') + ')');
-            $image.off('load error');
             $image.data('jg.imgw', loadImg.width);
             $image.data('jg.imgh', loadImg.height);
             $image.data('jg.loaded', true);
             startImgAnalyzer(context, false);
-          });
+          }, function imgLoadError () {
-          $loadImg.one('error', function imgLoadError () {
             //DEBUG// console.log('img error (alt: ' + $image.attr('alt') + ')');
-            $image.off('load error');
             $image.data('jg.loaded', 'error');
             startImgAnalyzer(context, false);
           });
-          loadImg.src = imageSrc;
 
         }
 
       });
 
-      if (!imagesToLoad) startImgAnalyzer(context, false);
+      if (!imagesToLoad && !skippedImages) startImgAnalyzer(context, false);
       checkWidth(context);
     });
 

library/justifiedGallery/justifiedGallery.css

@@ -1,7 +1,7 @@
 /*!
- * Justified Gallery - v3.2.0
+ * Justified Gallery - v3.5.4
- * http://miromannino.com/projects/justified-gallery/
+ * http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2014 Miro Mannino
+ * Copyright (c) 2015 Miro Mannino
  * Licensed under the MIT license.
  */
 @-webkit-keyframes justified-gallery-show-caption-animation {
@@ -83,7 +83,9 @@
   /* IE8 or Earlier */
 }
 .justified-gallery > a > img,
-.justified-gallery > div > img {
+.justified-gallery > div > img,
+.justified-gallery > a > a > img,
+.justified-gallery > div > a > img {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -103,6 +105,7 @@
   margin: 0;
   color: white;
   font-size: 12px;
+  font-weight: 300;
   font-family: sans-serif;
 }
 .justified-gallery > a > .caption.caption-visible,
@@ -119,9 +122,9 @@
   opacity: 1.0;
   filter: alpha(opacity=100);
   /* IE8 or Earlier */
-  -webkit-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+  -webkit-animation: justified-gallery-show-entry-animation 500ms 0 ease;
-  -moz-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+  -moz-animation: justified-gallery-show-entry-animation 500ms 0 ease;
-  -ms-animation: justified-gallery-show-entry-animation 300ms 0 ease;
+  -ms-animation: justified-gallery-show-entry-animation 500ms 0 ease;
 }
 .justified-gallery > .spinner {
   position: absolute;

view/js/main.js

@@ -713,6 +713,8 @@ function updateConvItems(mode,data) {
 		justifiedGalleryActive = true;
 		$('#photo-album-contents').justifiedGallery({
 			margins: 3,
+			border: 0,
+			ignoreElement: '#page-end',
 			sizeRangeSuffixes: {
 				'lt100': '-2',
 				'lt240': '-2',

view/php/theme_init.php

@@ -9,11 +9,11 @@ head_add_css('library/jRange/jquery.range.css');
 head_add_css('view/css/conversation.css');
 head_add_css('view/css/widgets.css');
 head_add_css('view/css/colorbox.css');
-head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css');
+head_add_css('library/justifiedGallery/justifiedGallery.css');
 head_add_css('library/bootstrap-tagsinput/bootstrap-tagsinput.css');
 head_add_js('jquery.js');
 head_add_js('jquery-migrate-1.1.1.js');
-head_add_js('library/justifiedGallery/dist/js/jquery.justifiedGallery.js');
+head_add_js('library/justifiedGallery/jquery.justifiedGallery.js');
 
 //head_add_js('jquery-compat.js');
 head_add_js('spin.js');