diff --git a/library/justifiedGallery/jquery.justifiedGallery.js b/library/justifiedGallery/jquery.justifiedGallery.js
index e1495d870..76db2112c 100644
--- a/library/justifiedGallery/jquery.justifiedGallery.js
+++ b/library/justifiedGallery/jquery.justifiedGallery.js
@@ -1,7 +1,7 @@
/*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
(function (factory) {
@@ -150,7 +150,7 @@
*/
JustifiedGallery.prototype.showImg = function ($entry, callback) {
if (this.settings.cssAnimation) {
- $entry.addClass('entry-visible');
+ $entry.addClass('jg-entry-visible');
if (callback) callback();
} else {
$entry.stop().fadeTo(this.settings.imagesAnimationDuration, 1.0, callback);
@@ -166,8 +166,15 @@
* @returns {String} the extracted src
*/
JustifiedGallery.prototype.extractImgSrcFromImage = function ($image) {
- var imageSrc = (typeof $image.data('safe-src') !== 'undefined') ? $image.data('safe-src') : $image.attr('src');
- $image.data('jg.originalSrc', imageSrc);
+ var imageSrc = $image.data('safe-src');
+ var imageSrcLoc = 'date-safe-src';
+ if (typeof imageSrc === 'undefined') {
+ imageSrc = $image.attr('src');
+ imageSrcLoc = 'src';
+ }
+ $image.data('jg.originalSrc', imageSrc); // this is saved for the destroy method
+ $image.data('jg.src', imageSrc); // this will change overtime
+ $image.data('jg.originalSrcLoc', imageSrcLoc); // this is saved for the destroy method
return imageSrc;
};
@@ -207,26 +214,29 @@
$image.css('margin-top', - imgHeight / 2);
// Image reloading for an high quality of thumbnails
- var imageSrc = $image.attr('src');
- var newImageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
+ var imageSrc = $image.data('jg.src');
+ if (imageSrc) {
+ imageSrc = this.newSrc(imageSrc, imgWidth, imgHeight, $image[0]);
- $image.one('error', function () {
- $image.attr('src', $image.data('jg.originalSrc')); //revert to the original thumbnail, we got it.
- });
+ $image.one('error', function () {
+ this.resetImgSrc($image); //revert to the original thumbnail
+ });
- var loadNewImage = function () {
- if (imageSrc !== newImageSrc) { //load the new image after the fadeIn
- $image.attr('src', newImageSrc);
+ var loadNewImage = function () {
+ // if (imageSrc !== newImageSrc) {
+ $image.attr('src', imageSrc);
+ // }
+ };
+
+ if ($entry.data('jg.loaded') === 'skipped') {
+ this.onImageEvent(imageSrc, (function() {
+ this.showImg($entry, loadNewImage); //load the new image after the fadeIn
+ $entry.data('jg.loaded', true);
+ }).bind(this));
+ } else {
+ this.showImg($entry, loadNewImage); //load the new image after the fadeIn
}
- };
-
- if ($entry.data('jg.loaded') === 'skipped') {
- this.onImageEvent(imageSrc, $.proxy(function() {
- this.showImg($entry, loadNewImage);
- $entry.data('jg.loaded', true);
- }, this));
- } else {
- this.showImg($entry, loadNewImage);
+
}
} else {
@@ -371,7 +381,7 @@
for (i = 0; i < this.buildingRow.entriesBuff.length; i++) {
$entry = this.buildingRow.entriesBuff[i];
if (this.settings.cssAnimation)
- $entry.removeClass('entry-visible');
+ $entry.removeClass('jg-entry-visible');
else {
$entry.stop().fadeTo(0, 0.1);
$entry.find('> img, > a > img').fadeTo(0, 0);
@@ -486,13 +496,6 @@
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
*/
@@ -503,19 +506,14 @@
if (!this.$gallery.is(":visible")) return;
var galleryWidth = parseFloat(this.$gallery.width());
- if (hasScrollBar() === this.scrollBarOn) {
- if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
- this.galleryWidth = galleryWidth;
- this.rewind();
-
- this.rememberGalleryHeight();
-
- // Restart to analyze
- this.startImgAnalyzer(true);
- }
- } else {
- this.scrollBarOn = hasScrollBar();
+ if (Math.abs(galleryWidth - this.galleryWidth) > this.settings.refreshSensitivity) {
this.galleryWidth = galleryWidth;
+ this.rewind();
+
+ this.rememberGalleryHeight();
+
+ // Restart to analyze
+ this.startImgAnalyzer(true);
}
}, this), this.settings.refreshTime);
};
@@ -574,6 +572,13 @@
this.clearBuildingRow();
};
+ /**
+ * @returns {Array} all entries matched by `settings.selector`
+ */
+ JustifiedGallery.prototype.getAllEntries = function () {
+ return this.$gallery.children(this.settings.selector).toArray();
+ };
+
/**
* Update the entries searching it from the justified gallery HTML element
*
@@ -587,7 +592,7 @@
newEntries = $(this.lastFetchedEntry).nextAll(this.settings.selector).toArray();
} else {
this.entries = [];
- newEntries = this.$gallery.children(this.settings.selector).toArray();
+ newEntries = this.getAllEntries();
}
if (newEntries.length > 0) {
@@ -698,6 +703,17 @@
}
};
+ /**
+ * Revert the image src to the default value.
+ */
+ JustifiedGallery.prototype.resetImgSrc = function ($img) {
+ if ($img.data('jg.originalSrcLoc') == 'src') {
+ $img.attr('src', $img.data('jg.originalSrc'));
+ } else {
+ $img.attr('src', '');
+ }
+ }
+
/**
* Destroy the Justified Gallery instance.
*
@@ -709,8 +725,10 @@
*/
JustifiedGallery.prototype.destroy = function () {
clearInterval(this.checkWidthIntervalId);
+ this.stopImgAnalyzerStarter();
- $.each(this.entries, $.proxy(function(_, entry) {
+ // Get fresh entries list since filtered entries are absent in `this.entries`
+ $.each(this.getAllEntries(), $.proxy(function(_, entry) {
var $entry = $(entry);
// Reset entry style
@@ -719,16 +737,20 @@
$entry.css('top', '');
$entry.css('left', '');
$entry.data('jg.loaded', undefined);
- $entry.removeClass('jg-entry');
+ $entry.removeClass('jg-entry jg-filtered jg-entry-visible');
// Reset image style
var $img = this.imgFromEntry($entry);
- $img.css('width', '');
- $img.css('height', '');
- $img.css('margin-left', '');
- $img.css('margin-top', '');
- $img.attr('src', $img.data('jg.originalSrc'));
- $img.data('jg.originalSrc', undefined);
+ if ($img) {
+ $img.css('width', '');
+ $img.css('height', '');
+ $img.css('margin-left', '');
+ $img.css('margin-top', '');
+ this.resetImgSrc($img);
+ $img.data('jg.originalSrc', undefined);
+ $img.data('jg.originalSrcLoc', undefined);
+ $img.data('jg.src', undefined);
+ }
// Remove caption
this.removeCaptionEventsHandlers($entry);
@@ -746,6 +768,7 @@
this.$gallery.css('height', '');
this.$gallery.removeClass('justified-gallery');
this.$gallery.data('jg.controller', undefined);
+ this.settings.triggerEvent.call(this, 'jg.destroy');
};
/**
@@ -760,6 +783,12 @@
var availableWidth = this.galleryWidth - 2 * this.border - (
(this.buildingRow.entriesBuff.length - 1) * this.settings.margins);
var imgAspectRatio = $entry.data('jg.width') / $entry.data('jg.height');
+
+ this.buildingRow.entriesBuff.push($entry);
+ this.buildingRow.aspectRatio += imgAspectRatio;
+ this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
+ this.lastAnalyzedIndex = i;
+
if (availableWidth / (this.buildingRow.aspectRatio + imgAspectRatio) < this.settings.rowHeight) {
this.flushRow(false);
@@ -768,12 +797,6 @@
return;
}
}
-
- this.buildingRow.entriesBuff.push($entry);
- this.buildingRow.aspectRatio += imgAspectRatio;
- this.buildingRow.width += imgAspectRatio * this.settings.rowHeight;
- this.lastAnalyzedIndex = i;
-
} else if ($entry.data('jg.loaded') !== 'error') {
return;
}
@@ -873,13 +896,16 @@
// Image src
var imageSrc = that.extractImgSrcFromImage($image);
- $image.attr('src', imageSrc);
- /* 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.prop('width'));
- var height = parseFloat($image.prop('height'));
+ /* 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 || !imageSrc) {
+ var width = parseFloat($image.attr('width'));
+ var height = parseFloat($image.attr('height'));
+ if ($image.prop('tagName') === 'svg') {
+ width = parseFloat($image[0].getBBox().width);
+ height = parseFloat($image[0].getBBox().height);
+ }
if (!isNaN(width) && !isNaN(height)) {
$entry.data('jg.width', width);
$entry.data('jg.height', height);
@@ -1146,11 +1172,12 @@
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, > svg, > a > svg', // 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.
};
+
/**
* Justified Gallery plugin for jQuery
diff --git a/library/justifiedGallery/jquery.justifiedGallery.min.js b/library/justifiedGallery/jquery.justifiedGallery.min.js
index bda51a188..ddbb85824 100644
--- a/library/justifiedGallery/jquery.justifiedGallery.min.js
+++ b/library/justifiedGallery/jquery.justifiedGallery.min.js
@@ -1,8 +1,8 @@
/*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
-!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,i){return void 0===i&&(i="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(i),i}:e(jQuery)}(function(g){var r=function(t,i){this.settings=i,this.checkSettings(),this.imgAnalyzerTimeout=null,this.entries=null,this.buildingRow={entriesBuff:[],width:0,height:0,aspectRatio:0},this.lastFetchedEntry=null,this.lastAnalyzedIndex=-1,this.yield={every:2,flushed:0},this.border=0<=i.border?i.border:i.margins,this.maxRowHeight=this.retrieveMaxRowHeight(),this.suffixRanges=this.retrieveSuffixRanges(),this.offY=this.border,this.rows=0,this.spinner={phase:0,timeSlot:150,$el:g('
'),intervalId:null},this.scrollBarOn=!1,this.checkWidthIntervalId=null,this.galleryWidth=t.width(),this.$gallery=t};r.prototype.getSuffix=function(t,i){var e,s;for(e=i .caption");return 0===i.length?null:i},r.prototype.displayEntry=function(t,i,e,s,n,r){t.width(s),t.height(r),t.css("top",e),t.css("left",i);var o=this.imgFromEntry(t);if(null!==o){o.css("width",s),o.css("height",n),o.css("margin-left",-s/2),o.css("margin-top",-n/2);var a=o.attr("src"),h=this.newSrc(a,s,n,o[0]);o.one("error",function(){o.attr("src",o.data("jg.originalSrc"))});var l=function(){a!==h&&o.attr("src",h)};"skipped"===t.data("jg.loaded")?this.onImageEvent(a,g.proxy(function(){this.showImg(t,l),t.data("jg.loaded",!0)},this)):this.showImg(t,l)}else this.showImg(t);this.displayEntryCaption(t)},r.prototype.displayEntryCaption=function(t){var i=this.imgFromEntry(t);if(null!==i&&this.settings.captions){var e=this.captionFromEntry(t);if(null===e){var s=i.attr("alt");this.isValidCaption(s)||(s=t.attr("title")),this.isValidCaption(s)&&(e=g(''+s+"
"),t.append(e),t.data("jg.createdCaption",!0))}null!==e&&(this.settings.cssAnimation||e.stop().fadeTo(0,this.settings.captionSettings.nonVisibleOpacity),this.addCaptionEventsHandlers(t))}else this.removeCaptionEventsHandlers(t)},r.prototype.isValidCaption=function(t){return void 0!==t&&0this.settings.justifyThreshold;if(t&&"hide"===this.settings.lastRow&&!u){for(i=0;i img, > a > img").fadeTo(0,0));return-1}for(t&&!u&&"justify"!==this.settings.lastRow&&"hide"!==this.settings.lastRow&&(o=!1,0this.settings.justifyThreshold)),i=0;ig(window).height()}r.prototype.rememberGalleryHeight=function(){i=this.$gallery.height(),this.$gallery.height(i)},r.prototype.setGalleryTempHeight=function(t){i=Math.max(t,i),this.$gallery.height(i)},r.prototype.setGalleryFinalHeight=function(t){i=t,this.$gallery.height(t)},r.prototype.checkWidth=function(){this.checkWidthIntervalId=setInterval(g.proxy(function(){if(this.$gallery.is(":visible")){var t=parseFloat(this.$gallery.width());e()===this.scrollBarOn?Math.abs(t-this.galleryWidth)>this.settings.refreshSensitivity&&(this.galleryWidth=t,this.rewind(),this.rememberGalleryHeight(),this.startImgAnalyzer(!0)):(this.scrollBarOn=e(),this.galleryWidth=t)}},this),this.settings.refreshTime)},r.prototype.isSpinnerActive=function(){return null!==this.spinner.intervalId},r.prototype.getSpinnerHeight=function(){return this.spinner.$el.innerHeight()},r.prototype.stopLoadingSpinnerAnimation=function(){clearInterval(this.spinner.intervalId),this.spinner.intervalId=null,this.setGalleryTempHeight(this.$gallery.height()-this.getSpinnerHeight()),this.spinner.$el.detach()},r.prototype.startLoadingSpinnerAnimation=function(){var t=this.spinner,i=t.$el.find("span");clearInterval(t.intervalId),this.$gallery.append(t.$el),this.setGalleryTempHeight(this.offY+this.buildingRow.height+this.getSpinnerHeight()),t.intervalId=setInterval(function(){t.phase=this.yield.every))return void this.startImgAnalyzer(t);this.buildingRow.entriesBuff.push(e),this.buildingRow.aspectRatio+=n,this.buildingRow.width+=n*this.settings.rowHeight,this.lastAnalyzedIndex=i}else if("error"!==e.data("jg.loaded"))return}0 img, > a > img",triggerEvent:function(t){this.$gallery.trigger(t)}},g.fn.justifiedGallery=function(n){return this.each(function(t,i){var e=g(i);e.addClass("justified-gallery");var s=e.data("jg.controller");if(void 0===s){if(null!=n&&"object"!==g.type(n)){if("destroy"===n)return;throw"The argument must be an object"}s=new r(e,g.extend({},r.prototype.defaults,n)),e.data("jg.controller",s)}else if("norewind"===n);else{if("destroy"===n)return void s.destroy();s.updateSettings(n),s.rewind()}s.updateEntries("norewind"===n)&&s.init()})}});
\ No newline at end of file
+!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(t,i){return void 0===i&&(i="undefined"!=typeof window?require("jquery"):require("jquery")(t)),e(i),i}:e(jQuery)}(function(l){var r=function(t,i){this.settings=i,this.checkSettings(),this.imgAnalyzerTimeout=null,this.entries=null,this.buildingRow={entriesBuff:[],width:0,height:0,aspectRatio:0},this.lastFetchedEntry=null,this.lastAnalyzedIndex=-1,this.yield={every:2,flushed:0},this.border=0<=i.border?i.border:i.margins,this.maxRowHeight=this.retrieveMaxRowHeight(),this.suffixRanges=this.retrieveSuffixRanges(),this.offY=this.border,this.rows=0,this.spinner={phase:0,timeSlot:150,$el:l('
'),intervalId:null},this.scrollBarOn=!1,this.checkWidthIntervalId=null,this.galleryWidth=t.width(),this.$gallery=t};r.prototype.getSuffix=function(t,i){var e,s;for(e=i .caption");return 0===i.length?null:i},r.prototype.displayEntry=function(t,i,e,s,n,r){t.width(s),t.height(r),t.css("top",e),t.css("left",i);var o=this.imgFromEntry(t);if(null!==o){o.css("width",s),o.css("height",n),o.css("margin-left",-s/2),o.css("margin-top",-n/2);var a=o.data("jg.src");if(a){a=this.newSrc(a,s,n,o[0]),o.one("error",function(){this.resetImgSrc(o)});var h=function(){o.attr("src",a)};"skipped"===t.data("jg.loaded")?this.onImageEvent(a,function(){this.showImg(t,h),t.data("jg.loaded",!0)}.bind(this)):this.showImg(t,h)}}else this.showImg(t);this.displayEntryCaption(t)},r.prototype.displayEntryCaption=function(t){var i=this.imgFromEntry(t);if(null!==i&&this.settings.captions){var e=this.captionFromEntry(t);if(null===e){var s=i.attr("alt");this.isValidCaption(s)||(s=t.attr("title")),this.isValidCaption(s)&&(e=l(''+s+"
"),t.append(e),t.data("jg.createdCaption",!0))}null!==e&&(this.settings.cssAnimation||e.stop().fadeTo(0,this.settings.captionSettings.nonVisibleOpacity),this.addCaptionEventsHandlers(t))}else this.removeCaptionEventsHandlers(t)},r.prototype.isValidCaption=function(t){return void 0!==t&&0this.settings.justifyThreshold;if(t&&"hide"===this.settings.lastRow&&!d){for(i=0;i img, > a > img").fadeTo(0,0));return-1}for(t&&!d&&"justify"!==this.settings.lastRow&&"hide"!==this.settings.lastRow&&(o=!1,0this.settings.justifyThreshold)),i=0;ithis.settings.refreshSensitivity&&(this.galleryWidth=t,this.rewind(),this.rememberGalleryHeight(),this.startImgAnalyzer(!0))}},this),this.settings.refreshTime)},r.prototype.isSpinnerActive=function(){return null!==this.spinner.intervalId},r.prototype.getSpinnerHeight=function(){return this.spinner.$el.innerHeight()},r.prototype.stopLoadingSpinnerAnimation=function(){clearInterval(this.spinner.intervalId),this.spinner.intervalId=null,this.setGalleryTempHeight(this.$gallery.height()-this.getSpinnerHeight()),this.spinner.$el.detach()},r.prototype.startLoadingSpinnerAnimation=function(){var t=this.spinner,i=t.$el.find("span");clearInterval(t.intervalId),this.$gallery.append(t.$el),this.setGalleryTempHeight(this.offY+this.buildingRow.height+this.getSpinnerHeight()),t.intervalId=setInterval(function(){t.phase=this.yield.every))return void this.startImgAnalyzer(t)}else if("error"!==e.data("jg.loaded"))return}0 img, > a > img, > svg, > a > svg",triggerEvent:function(t){this.$gallery.trigger(t)}},l.fn.justifiedGallery=function(n){return this.each(function(t,i){var e=l(i);e.addClass("justified-gallery");var s=e.data("jg.controller");if(void 0===s){if(null!=n&&"object"!==l.type(n)){if("destroy"===n)return;throw"The argument must be an object"}s=new r(e,l.extend({},r.prototype.defaults,n)),e.data("jg.controller",s)}else if("norewind"===n);else{if("destroy"===n)return void s.destroy();s.updateSettings(n),s.rewind()}s.updateEntries("norewind"===n)&&s.init()})}});
\ No newline at end of file
diff --git a/library/justifiedGallery/justifiedGallery.css b/library/justifiedGallery/justifiedGallery.css
index 8b753dc38..097cf534a 100644
--- a/library/justifiedGallery/justifiedGallery.css
+++ b/library/justifiedGallery/justifiedGallery.css
@@ -1,7 +1,7 @@
/*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
@@ -26,7 +26,13 @@
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
-.justified-gallery > figure > a > img {
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
@@ -63,13 +69,15 @@
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
-.justified-gallery > .entry-visible {
+.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
-.justified-gallery > .entry-visible > img,
-.justified-gallery > .entry-visible > a > img {
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
diff --git a/library/justifiedGallery/justifiedGallery.min.css b/library/justifiedGallery/justifiedGallery.min.css
index 8b753dc38..097cf534a 100644
--- a/library/justifiedGallery/justifiedGallery.min.css
+++ b/library/justifiedGallery/justifiedGallery.min.css
@@ -1,7 +1,7 @@
/*!
- * justifiedGallery - v3.7.0
+ * justifiedGallery - v4.0.0-alpha
* http://miromannino.github.io/Justified-Gallery/
- * Copyright (c) 2018 Miro Mannino
+ * Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
@@ -26,7 +26,13 @@
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
-.justified-gallery > figure > a > img {
+.justified-gallery > figure > a > img,
+.justified-gallery > a > svg,
+.justified-gallery > div > svg,
+.justified-gallery > figure > svg,
+.justified-gallery > a > a > svg,
+.justified-gallery > div > a > svg,
+.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
@@ -63,13 +69,15 @@
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
-.justified-gallery > .entry-visible {
+.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
-.justified-gallery > .entry-visible > img,
-.justified-gallery > .entry-visible > a > img {
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;