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/ * http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino * Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license. * Licensed under the MIT license.
*/ */
(function($) { (function($) {
@ -130,7 +130,7 @@
if (callback) callback(); if (callback) callback();
} else { } else {
$entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback); $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 */ /** @returns {jQuery} the image in the given entry */
JustifiedGallery.prototype.imgFromEntry = function ($entry) { JustifiedGallery.prototype.imgFromEntry = function ($entry) {
var $img = $entry.find('> img'); var $img = $entry.find(this.settings.imgSelector);
if ($img.length === 0) $img = $entry.find('> a > img');
return $img.length === 0 ? null : $img; 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 * Justify the building row, preparing it to
* *
@ -380,15 +388,6 @@
return justify; 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 * Flush a row: justify it, modify the gallery height accordingly to the row height
* *
@ -404,16 +403,12 @@
return; return;
} }
if (this.maxRowHeight) { if(this.maxRowHeight) {
if (this.maxRowHeight.isPercentage && this.maxRowHeight.value * settings.rowHeight < this.buildingRow.height) { if(this.maxRowHeight < this.buildingRow.height) this.buildingRow.height = this.maxRowHeight;
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;
}
} }
//Align last (unjustified) row //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; var availableWidth = this.galleryWidth - 2 * this.border - (this.buildingRow.entriesBuff.length - 1) * settings.margins;
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) { for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
@ -427,15 +422,16 @@
offX += availableWidth; offX += availableWidth;
} }
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) { var lastEntryIdx = this.buildingRow.entriesBuff.length - 1;
$entry = this.buildingRow.entriesBuff[i]; 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); this.displayEntry($entry, offX, this.offY, $entry.data('jg.jwidth'), $entry.data('jg.jheight'), this.buildingRow.height);
offX += $entry.data('jg.jwidth') + settings.margins; offX += $entry.data('jg.jwidth') + settings.margins;
} }
//Gallery Height //Gallery Height
this.galleryHeightToSet = this.offY + this.buildingRow.height + this.border; 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)) { if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes)) {
//Ready for a new row //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 * Checks the width of the gallery container, to know if a new justification is needed
*/ */
var scrollBarOn = false; var scrollBarOn = false;
JustifiedGallery.prototype.checkWidth = function () { JustifiedGallery.prototype.checkWidth = function () {
this.checkWidthIntervalId = setInterval($.proxy(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()); var galleryWidth = parseFloat(this.$gallery.width());
if (hasScrollBar() === scrollBarOn) { if (hasScrollBar() === scrollBarOn) {
if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) { if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
this.galleryWidth = galleryWidth; this.galleryWidth = galleryWidth;
this.rewind(); this.rewind();
this.rememberGalleryHeight();
// Restart to analyze // Restart to analyze
this.startImgAnalyzer(true); this.startImgAnalyzer(true);
} }
@ -488,7 +511,7 @@
JustifiedGallery.prototype.stopLoadingSpinnerAnimation = function () { JustifiedGallery.prototype.stopLoadingSpinnerAnimation = function () {
clearInterval(this.spinner.intervalId); clearInterval(this.spinner.intervalId);
this.spinner.intervalId = null; this.spinner.intervalId = null;
this.$gallery.height(this.$gallery.height() - this.getSpinnerHeight()); this.setGalleryTempHeight(this.$gallery.height() - this.getSpinnerHeight());
this.spinner.$el.detach(); this.spinner.$el.detach();
}; };
@ -500,7 +523,7 @@
var $spinnerPoints = spinnerContext.$el.find('span'); var $spinnerPoints = spinnerContext.$el.find('span');
clearInterval(spinnerContext.intervalId); clearInterval(spinnerContext.intervalId);
this.$gallery.append(spinnerContext.$el); 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 () { spinnerContext.intervalId = setInterval(function () {
if (spinnerContext.phase < $spinnerPoints.length) { if (spinnerContext.phase < $spinnerPoints.length) {
$spinnerPoints.eq(spinnerContext.phase).fadeTo(spinnerContext.timeSlot, 1); $spinnerPoints.eq(spinnerContext.phase).fadeTo(spinnerContext.timeSlot, 1);
@ -636,7 +659,7 @@
// Filter using the passed function // Filter using the passed function
var filteredArr = a.filter(settings.filter); var filteredArr = a.filter(settings.filter);
for (var i = 0; i < a.length; i++) { 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'); $(a[i]).addClass('jg-filtered').removeClass('jg-visible');
} else { } else {
$(a[i]).removeClass('jg-filtered'); $(a[i]).removeClass('jg-filtered');
@ -710,6 +733,7 @@
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height'); var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) { if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
this.flushRow(false); this.flushRow(false);
if(++this.yield.flushed >= this.yield.every) { if(++this.yield.flushed >= this.yield.every) {
this.startImgAnalyzer(isForResize); this.startImgAnalyzer(isForResize);
return; return;
@ -741,7 +765,7 @@
//On complete callback //On complete callback
this.$gallery.trigger(isForResize ? 'jg.resize' : 'jg.complete'); 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 () { JustifiedGallery.prototype.stopImgAnalyzerStarter = function () {
this.yield.flushed = 0; 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 /* If we have the height and the width, we don't wait that the image is loaded, but we start directly
* with the justification */ * with the justification */
if (that.settings.waitThumbnailsLoad === false) { if (that.settings.waitThumbnailsLoad === false) {
var width = parseFloat($image.attr('width')); var width = parseFloat($image.prop('width'));
var height = parseFloat($image.attr('height')); var height = parseFloat($image.prop('height'));
if (!isNaN(width) && !isNaN(height)) { if (!isNaN(width) && !isNaN(height)) {
$entry.data('jg.width', width); $entry.data('jg.width', width);
$entry.data('jg.height', height); $entry.data('jg.height', height);
@ -915,36 +942,33 @@
/** /**
* check and convert the maxRowHeight setting * 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 () { JustifiedGallery.prototype.retrieveMaxRowHeight = function () {
var newMaxRowHeight = { }; var newMaxRowHeight = null;
var rowHeight = this.settings.rowHeight;
if ($.type(this.settings.maxRowHeight) === 'string') { if ($.type(this.settings.maxRowHeight) === 'string') {
if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) { if (this.settings.maxRowHeight.match(/^[0-9]+%$/)) {
newMaxRowHeight.value = parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100; newMaxRowHeight = rowHeight * parseFloat(this.settings.maxRowHeight.match(/^([0-9]+)%$/)[1]) / 100;
newMaxRowHeight.isPercentage = false;
} else { } else {
newMaxRowHeight.value = parseFloat(this.settings.maxRowHeight); newMaxRowHeight = parseFloat(this.settings.maxRowHeight);
newMaxRowHeight.isPercentage = true;
} }
} else if ($.type(this.settings.maxRowHeight) === 'number') { } else if ($.type(this.settings.maxRowHeight) === 'number') {
newMaxRowHeight.value = this.settings.maxRowHeight; newMaxRowHeight = this.settings.maxRowHeight;
newMaxRowHeight.isPercentage = false; } else if (this.settings.maxRowHeight === false || this.settings.maxRowHeight == null) {
} else if (this.settings.maxRowHeight === false ||
this.settings.maxRowHeight === null ||
typeof this.settings.maxRowHeight == 'undefined') {
return null; return null;
} else { } else {
throw 'maxRowHeight must be a number or a percentage'; throw 'maxRowHeight must be a number or a percentage';
} }
// check if the converted value is not a number // 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 // check values, maxRowHeight must be >= rowHeight
if (newMaxRowHeight.isPercentage) { if (newMaxRowHeight < rowHeight) newMaxRowHeight = rowHeight;
if (newMaxRowHeight.value < 100) newMaxRowHeight.value = 100;
}
return newMaxRowHeight; return newMaxRowHeight;
}; };
@ -1102,7 +1126,7 @@
thumbnailPath: undefined, /* If defined, sizeRangeSuffixes is not used, and this function is used to determine the 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: path relative to a specific thumbnail size. The function should accept respectively three arguments:
current path, width and height */ 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, 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 // A string '[0-9]+%' to express in percentage (e.g. 300% means that the row height
// can't exceed 3 * rowHeight) // can't exceed 3 * rowHeight)
@ -1128,6 +1152,7 @@
refreshTime: 200, // time interval (in ms) to check if the page changes its width 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 refreshSensitivity: 0, // change in width allowed (in px) without re-building the gallery
randomize: false, randomize: false,
rtl: false, // right-to-left mode
sort: false, /* sort: false, /*
- false: to do not sort - false: to do not sort
- function: to sort them using the function as comparator (see Array.prototype.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. - 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. 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)); }(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/ * http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino * Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license. * Licensed under the MIT license.
*/ */
.justified-gallery { .justified-gallery {
@ -10,18 +10,23 @@
overflow: hidden; overflow: hidden;
} }
.justified-gallery > a, .justified-gallery > a,
.justified-gallery > div { .justified-gallery > div,
.justified-gallery > figure {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */ /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
filter: "alpha(opacity=10)"; filter: "alpha(opacity=10)";
opacity: 0.1; opacity: 0.1;
margin: 0;
padding: 0;
} }
.justified-gallery > a > img, .justified-gallery > a > img,
.justified-gallery > div > img, .justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img, .justified-gallery > a > a > img,
.justified-gallery > div > a > img { .justified-gallery > div > a > img,
.justified-gallery > figure > a > img {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -32,7 +37,8 @@
opacity: 0; opacity: 0;
} }
.justified-gallery > a > .caption, .justified-gallery > a > .caption,
.justified-gallery > div > .caption { .justified-gallery > div > .caption,
.justified-gallery > figure > .caption {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -47,7 +53,8 @@
font-family: sans-serif; font-family: sans-serif;
} }
.justified-gallery > a > .caption.caption-visible, .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; display: initial;
filter: "alpha(opacity=70)"; filter: "alpha(opacity=70)";
opacity: 0.7; 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/ * http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2016 Miro Mannino * Copyright (c) 2018 Miro Mannino
* Licensed under the MIT license. * 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}