feat: slow appearing of the first image in the image preview added wi…

…th opacity from 0.1 to 1 in 2.45s; after the slides are initiated transition pushed on to 0.57s

resources/css/gallery.less

@@ -260,6 +260,29 @@ body{
     margin-top:5px;
 }
 
+@-webkit-keyframes fadein{
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.blueimp-gallery > .slides > .slide-loading {
+    background-image: none;
+    // this class with a loader is a bit strange
+}
+
+.blueimp-gallery .blueimp-gallery-display, .blueimp-gallery > .slides > .slide  {
+    animation: fadein 0.57s linear 1 normal forwards;
+    -webkit-animation: fadein 0.57s linear 1 normal forwards;
+}
+
+.blueimp-gallery > .slides {
+    opacity: 0.1;
+}
+
 @media (max-width: 319px) {
     #gallery-container {
         #gallery-list {

resources/js/gallery.js

@@ -57,6 +57,11 @@ humhub.module('gallery', function (module, require, $) {
         });
     };
 
+    $('#gallery-media-container .panel-body').one('click', function() {
+        $('.blueimp-gallery .slides').fadeTo(2450, 1);
+        $('#gallery-media-container .panel-body').off();
+    });
+
     module.export({
         init: init,
         initOnPjaxLoad: true,