update justified gallery lib from 3.6.3 to 3.6.5

This commit is contained in:
Mario Vavti 2018-03-14 11:49:19 +01:00
parent 461e86423a
commit 9f4064e03b
4 changed files with 93 additions and 60 deletions

View file

@ -1,7 +1,7 @@
/*!
* Justified Gallery - v3.6.3
* Justified Gallery - v3.6.5
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino
* Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license.
*/
(function($) {
@ -130,7 +130,7 @@
if (callback) callback();
} else {
$entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
$entry.find('> img, > a > img').stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
$entry.find(this.settings.imgSelector).stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
}
};
@ -149,8 +149,7 @@
/** @returns {jQuery} the image in the given entry */
JustifiedGallery.prototype.imgFromEntry = function ($entry) {
var $img = $entry.find('> img');
if ($img.length === 0) $img = $entry.find('> a > img');
var $img = $entry.find(this.settings.imgSelector);
return $img.length === 0 ? null : $img;
};
@ -319,6 +318,15 @@
}
};
/**
* Clear the building row data to be used for a new row
*/
JustifiedGallery.prototype.clearBuildingRow = function () {
this.buildingRow.entriesBuff = [];
this.buildingRow.aspectRatio = 0;
this.buildingRow.width = 0;
};
/**
* Justify the building row, preparing it to
*
@ -380,15 +388,6 @@
return justify;
};
/**
* Clear the building row data to be used for a new row
*/
JustifiedGallery.prototype.clearBuildingRow = function () {
this.buildingRow.entriesBuff = [];
this.buildingRow.aspectRatio = 0;
this.buildingRow.width = 0;
};
/**
* Flush a row: justify it, modify the gallery height accordingly to the row height
*
@ -405,15 +404,11 @@
}
if(this.maxRowHeight) {
if (this.maxRowHeight.isPercentage && this.maxRowHeight.value * settings.rowHeight < this.buildingRow.height) {
this.buildingRow.height = this.maxRowHeight.value * settings.rowHeight;
} else if (this.maxRowHeight.value >= settings.rowHeight && this.maxRowHeight.value < this.buildingRow.height) {
this.buildingRow.height = this.maxRowHeight.value;
}
if(this.maxRowHeight < this.buildingRow.height) this.buildingRow.height = this.maxRowHeight;
}
//Align last (unjustified) row
if (settings.lastRow === 'center' || settings.lastRow === 'right') {
if (isLastRow && (settings.lastRow === 'center' || settings.lastRow === 'right')) {
var availableWidth = this.galleryWidth - 2 * this.border - (this.buildingRow.entriesBuff.length - 1) * settings.margins;
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
@ -427,15 +422,16 @@
offX += availableWidth;
}
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
var lastEntryIdx = this.buildingRow.entriesBuff.length - 1;
for (i = 0; i <= lastEntryIdx; i++) {
$entry = this.buildingRow.entriesBuff[ this.settings.rtl ? lastEntryIdx - i : i ];
this.displayEntry($entry, offX, this.offY, $entry.data('jg.jwidth'), $entry.data('jg.jheight'), this.buildingRow.height);
offX += $entry.data('jg.jwidth') + settings.margins;
}
//Gallery Height
this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border;
this.$gallery.height(this.galleryHeightToSet + this.getSpinnerHeight());
this.setGalleryTempHeight(this.galleryHeightToSet + this.getSpinnerHeight());
if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes)) {
//Ready for a new row
@ -446,18 +442,45 @@
}
};
// Scroll position not restoring: https://github.com/miromannino/Justified-Gallery/issues/221
var galleryPrevStaticHeight = 0;
JustifiedGallery.prototype.rememberGalleryHeight = function () {
galleryPrevStaticHeight = this.$gallery.height();
this.$gallery.height(galleryPrevStaticHeight);
};
// grow only
JustifiedGallery.prototype.setGalleryTempHeight = function (height) {
galleryPrevStaticHeight = Math.max(height, galleryPrevStaticHeight);
this.$gallery.height(galleryPrevStaticHeight);
};
JustifiedGallery.prototype.setGalleryFinalHeight = function (height) {
galleryPrevStaticHeight = height;
this.$gallery.height(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 () {
// if the gallery is not currently visible, abort.
if (!this.$gallery.is(":visible")) return;
var galleryWidth = parseFloat(this.$gallery.width());
if (hasScrollBar() === scrollBarOn) {
if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
this.galleryWidth = galleryWidth;
this.rewind();
this.rememberGalleryHeight();
// Restart to analyze
this.startImgAnalyzer(true);
}
@ -488,7 +511,7 @@
JustifiedGallery.prototype.stopLoadingSpinnerAnimation = function () {
clearInterval(this.spinner.intervalId);
this.spinner.intervalId = null;
this.$gallery.height(this.$gallery.height() - this.getSpinnerHeight());
this.setGalleryTempHeight(this.$gallery.height() - this.getSpinnerHeight());
this.spinner.$el.detach();
};
@ -500,7 +523,7 @@
var $spinnerPoints = spinnerContext.$el.find('span');
clearInterval(spinnerContext.intervalId);
this.$gallery.append(spinnerContext.$el);
this.$gallery.height(this.offY + this.buildingRow.height + this.getSpinnerHeight());
this.setGalleryTempHeight(this.offY + this.buildingRow.height + this.getSpinnerHeight());
spinnerContext.intervalId = setInterval(function () {
if (spinnerContext.phase < $spinnerPoints.length) {
$spinnerPoints.eq(spinnerContext.phase).fadeTo(spinnerContext.timeSlot, 1);
@ -636,7 +659,7 @@
// Filter using the passed function
var filteredArr = a.filter(settings.filter);
for (var i = 0; i < a.length; i++) {
if (filteredArr.indexOf(a[i]) == -1) {
if (filteredArr.indexOf(a[i]) === -1) {
$(a[i]).addClass('jg-filtered').removeClass('jg-visible');
} else {
$(a[i]).removeClass('jg-filtered');
@ -710,6 +733,7 @@
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
this.flushRow(false);
if(++this.yield.flushed >= this.yield.every) {
this.startImgAnalyzer(isForResize);
return;
@ -741,7 +765,7 @@
//On complete callback
this.$gallery.trigger(isForResize ? 'jg.resize' : 'jg.complete');
this.$gallery.height(this.galleryHeightToSet);
this.setGalleryFinalHeight(this.galleryHeightToSet);
};
/**
@ -749,7 +773,10 @@
*/
JustifiedGallery.prototype.stopImgAnalyzerStarter = function () {
this.yield.flushed = 0;
if (this.imgAnalyzerTimeout !== null) clearTimeout(this.imgAnalyzerTimeout);
if (this.imgAnalyzerTimeout !== null) {
clearTimeout(this.imgAnalyzerTimeout);
this.imgAnalyzerTimeout = null;
}
};
/**
@ -822,8 +849,8 @@
/* If we have the height and the width, we don't wait that the image is loaded, but we start directly
* with the justification */
if (that.settings.waitThumbnailsLoad === false) {
var width = parseFloat($image.attr('width'));
var height = parseFloat($image.attr('height'));
var width = parseFloat($image.prop('width'));
var height = parseFloat($image.prop('height'));
if (!isNaN(width) && !isNaN(height)) {
$entry.data('jg.width', width);
$entry.data('jg.height', height);
@ -915,36 +942,33 @@
/**
* check and convert the maxRowHeight setting
* requires rowHeight to be already set
* TODO: should be always called when only rowHeight is changed
* @return number or null
*/
JustifiedGallery.prototype.retrieveMaxRowHeight = function () {
var newMaxRowHeight = { };
var newMaxRowHeight = null;
var rowHeight = this.settings.rowHeight;
if ($.type(this.settings.maxRowHeight) === 'string') {
if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) {
newMaxRowHeight.value = parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100;
newMaxRowHeight.isPercentage = false;
newMaxRowHeight = rowHeight * parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100;
} else {
newMaxRowHeight.value = parseFloat(this.settings.maxRowHeight);
newMaxRowHeight.isPercentage = true;
newMaxRowHeight = parseFloat(this.settings.maxRowHeight);
}
} else if ($.type(this.settings.maxRowHeight) === 'number') {
newMaxRowHeight.value = this.settings.maxRowHeight;
newMaxRowHeight.isPercentage = false;
} else if (this.settings.maxRowHeight === false ||
this.settings.maxRowHeight === null ||
typeof this.settings.maxRowHeight == 'undefined') {
newMaxRowHeight = this.settings.maxRowHeight;
} else if (this.settings.maxRowHeight === false || this.settings.maxRowHeight == null) {
return null;
} else {
throw 'maxRowHeight must be a number or a percentage';
}
// check if the converted value is not a number
if (isNaN(newMaxRowHeight.value)) throw 'invalid number for maxRowHeight';
if (isNaN(newMaxRowHeight)) throw 'invalid number for maxRowHeight';
// check values
if (newMaxRowHeight.isPercentage) {
if (newMaxRowHeight.value < 100) newMaxRowHeight.value = 100;
}
// check values, maxRowHeight must be >= rowHeight
if (newMaxRowHeight < rowHeight) newMaxRowHeight = rowHeight;
return newMaxRowHeight;
};
@ -1102,7 +1126,7 @@
thumbnailPath: undefined, /* If defined, sizeRangeSuffixes is not used, and this function is used to determine the
path relative to a specific thumbnail size. The function should accept respectively three arguments:
current path, width and height */
rowHeight: 120,
rowHeight: 120, // required? required to be > 0?
maxRowHeight: false, // false or negative value to deactivate. Positive number to express the value in pixels,
// A string '[0-9]+%' to express in percentage (e.g. 300% means that the row height
// can't exceed 3 * rowHeight)
@ -1128,6 +1152,7 @@
refreshTime: 200, // time interval (in ms) to check if the page changes its width
refreshSensitivity: 0, // change in width allowed (in px) without re-building the gallery
randomize: false,
rtl: false, // right-to-left mode
sort: false, /*
- false: to do not sort
- function: to sort them using the function as comparator (see Array.prototype.sort())
@ -1139,7 +1164,8 @@
- a function: invoked with arguments (entry, index, array). Return true to keep the entry, false otherwise.
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
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
};
}(jQuery));

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,7 @@
/*!
* Justified Gallery - v3.6.3
* Justified Gallery - v3.6.5
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino
* Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
@ -10,18 +10,23 @@
overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div {
.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 > div > a > img,
.justified-gallery > figure > a > img {
position: absolute;
top: 50%;
left: 50%;
@ -32,7 +37,8 @@
opacity: 0;
}
.justified-gallery > a > .caption,
.justified-gallery > div > .caption {
.justified-gallery > div > .caption,
.justified-gallery > figure > .caption {
display: none;
position: absolute;
bottom: 0;
@ -47,7 +53,8 @@
font-family: sans-serif;
}
.justified-gallery > a > .caption.caption-visible,
.justified-gallery > div > .caption.caption-visible {
.justified-gallery > div > .caption.caption-visible,
.justified-gallery > figure > .caption.caption-visible {
display: initial;
filter: "alpha(opacity=70)";
opacity: 0.7;

View file

@ -1,7 +1,7 @@
/*!
* Justified Gallery - v3.6.3
* Justified Gallery - v3.6.5
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino
* Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;filter:"alpha(opacity=10)";opacity:.1}.justified-gallery>a>img,.justified-gallery>div>img,.justified-gallery>a>a>img,.justified-gallery>div>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{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;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;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}