From 116a9d655c64af97ca24c780cf54064da4e3cf0d Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Thu, 27 Aug 2020 00:04:12 +0300 Subject: [PATCH 1/5] feat: slow appearing of the first image in the image preview added with opacity from 0.1 to 1 in 2.45s; after the slides are initiated transition pushed on to 0.57s --- resources/css/gallery.css | 2 +- resources/css/gallery.less | 19 +++++++++++++++++++ resources/js/gallery.js | 7 +++++++ 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/resources/css/gallery.css b/resources/css/gallery.css index 82d0c5f..0896f8d 100644 --- a/resources/css/gallery.css +++ b/resources/css/gallery.css @@ -1 +1 @@ -#gallery-container .button-action-menu .overflow-ellipsis{position:relative;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}#gallery-container .button-action-menu .overflow-hidden{overflow:hidden;position:relative}#gallery-container .button-action-menu .fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:200px;direction:ltr;cursor:pointer}#gallery-container .button-action-menu .btn{width:100%;padding:8px 16px!important;font-size:1em!important;font-weight:400!important}#gallery-container .button-action-menu .btn-group{width:100%}#gallery-container .button-action-menu .btn-group .split-toggle{width:auto!important;float:right!important;border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group .split-toggle:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group>.split-button{width:auto!important;overflow:hidden;display:block;float:none!important;border-radius:3px 0 0 3px}#gallery-container .button-action-menu .btn-group>.split-button:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:3px 0 0 3px}#gallery-container .button-action-menu .dropdown-menu{padding:0;margin:0;width:100%}#gallery-container .button-action-menu .dropdown-menu li{padding:0;border:none;border-radius:0}#gallery-container .button-action-menu .dropdown-menu li:first-child{padding:0;margin:0;border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:first-child .btn{border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:last-child{padding:0;margin:0;border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu li:last-child .btn{border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu .btn{border:none;border-radius:0}#gallery-container .padding15perc{padding:15%!important}#gallery-container .social-activities{font-size:11px;color:#fff;margin-bottom:0}#gallery-container .social-activities a{font-size:11px;color:#fff;margin-top:10px;margin-bottom:0}#gallery-container .social-activities a:hover{color:#aeaeae;text-decoration:none}#gallery-container .social-activities-gallery{font-size:11px;color:#7a7a7a;line-height:24px;margin-bottom:0}#gallery-container .social-activities-gallery a{font-size:11px;color:#7a7a7a;margin-top:10px;margin-bottom:0}#gallery-container .social-activities-gallery a:hover{color:#aeaeae;text-decoration:none}#gallery-container .panel-heading .media .updated{color:#bebebe;font-size:11px;font-weight:700}#gallery-container .panel-heading .media .author a{color:#bebebe;font-size:11px}#gallery-container .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#gallery-container .dropdown-menu .btn-group{width:100%}#gallery-container .dropdown-menu .btn-group .btn{padding:4px 15px;font-size:13px;color:#fff}#gallery-container .dropdown-menu .btn-group .btn:hover{text-decoration:none}#gallery-container #gallery-list{margin:0 10px 0 10px!important}#gallery-container #gallery-list .galleryEmptyMessage .panel{margin:0}#gallery-container #gallery-list .galleryEmptyMessage .panel .panel-body{margin:10px}#gallery-container #gallery-list .row{padding:5px 0 0 5px!important;margin:0}#gallery-container #gallery-list .row .dropdown-toggle{background-color:transparent}#gallery-container #gallery-list .row .gallery-list-entry{padding:0 5px 5px 0;margin:0}#gallery-container #gallery-list .row .gallery-list-entry .panel{border-radius:3px!important;margin:0;position:relative;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body{padding:0!important;height:auto;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a{overflow:hidden;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a img{display:block;margin:0;width:100%;height:auto;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay{visibility:hidden;display:block;position:absolute;top:0;left:0;height:100%;width:100%;background-color:#000}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay i{position:absolute;top:45%;left:0;font-size:1.5em;color:#fff!important;text-align:center;display:inline-block;width:100%;height:auto}#gallery-container #gallery-list .row .gallery-list-entry .panel .overlay{opacity:0;transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{position:absolute;padding:8px!important;border-radius:0!important;font-weight:600;color:#fff;text-align:center;border:none;background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .gallery-media-file-controls a,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .gallery-media-file-controls a{font-size:1.125em;cursor:pointer;padding-left:5px}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .pull-left,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .pull-left{max-width:75%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer.background-none,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading.background-none{background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{bottom:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{font-size:12px;top:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a{color:#fff}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a:hover{text-decoration:none;color:#fff}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a img{transform:scale(1.3);-ms-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-moz-transform:scale(1.3)}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay{visibility:visible;opacity:.55;-moz-opacity:.55;-webkit-opacity:.55}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay i{opacity:1;-moz-opacity:1;-webkit-opacity:1}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-heading{opacity:.9;-moz-opacity:.9;-webkit-opacity:.9}body{overflow-y:scroll!important}.blueimp-gallery .modal-body{position:relative;text-align:center;padding:0 0 56.25% 0;overflow:hidden;cursor:pointer;background:#fff}.red{background-color:red;padding:10px;margin-top:5px}@media (max-width:319px){#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{display:none;visibility:hidden}} \ No newline at end of file +#gallery-container .button-action-menu .overflow-ellipsis{position:relative;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}#gallery-container .button-action-menu .overflow-hidden{overflow:hidden;position:relative}#gallery-container .button-action-menu .fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:200px;direction:ltr;cursor:pointer}#gallery-container .button-action-menu .btn{width:100%;padding:8px 16px!important;font-size:1em!important;font-weight:400!important}#gallery-container .button-action-menu .btn-group{width:100%}#gallery-container .button-action-menu .btn-group .split-toggle{width:auto!important;float:right!important;border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group .split-toggle:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group>.split-button{width:auto!important;overflow:hidden;display:block;float:none!important;border-radius:3px 0 0 3px}#gallery-container .button-action-menu .btn-group>.split-button:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:3px 0 0 3px}#gallery-container .button-action-menu .dropdown-menu{padding:0;margin:0;width:100%}#gallery-container .button-action-menu .dropdown-menu li{padding:0;border:none;border-radius:0}#gallery-container .button-action-menu .dropdown-menu li:first-child{padding:0;margin:0;border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:first-child .btn{border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:last-child{padding:0;margin:0;border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu li:last-child .btn{border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu .btn{border:none;border-radius:0}#gallery-container .padding15perc{padding:15%!important}#gallery-container .social-activities{font-size:11px;color:#fff;margin-bottom:0}#gallery-container .social-activities a{font-size:11px;color:#fff;margin-top:10px;margin-bottom:0}#gallery-container .social-activities a:hover{color:#aeaeae;text-decoration:none}#gallery-container .social-activities-gallery{font-size:11px;color:#7a7a7a;line-height:24px;margin-bottom:0}#gallery-container .social-activities-gallery a{font-size:11px;color:#7a7a7a;margin-top:10px;margin-bottom:0}#gallery-container .social-activities-gallery a:hover{color:#aeaeae;text-decoration:none}#gallery-container .panel-heading .media .updated{color:#bebebe;font-size:11px;font-weight:700}#gallery-container .panel-heading .media .author a{color:#bebebe;font-size:11px}#gallery-container .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#gallery-container .dropdown-menu .btn-group{width:100%}#gallery-container .dropdown-menu .btn-group .btn{padding:4px 15px;font-size:13px;color:#fff}#gallery-container .dropdown-menu .btn-group .btn:hover{text-decoration:none}#gallery-container #gallery-list{margin:0 10px 0 10px!important}#gallery-container #gallery-list .galleryEmptyMessage .panel{margin:0}#gallery-container #gallery-list .galleryEmptyMessage .panel .panel-body{margin:10px}#gallery-container #gallery-list .row{padding:5px 0 0 5px!important;margin:0}#gallery-container #gallery-list .row .dropdown-toggle{background-color:transparent}#gallery-container #gallery-list .row .gallery-list-entry{padding:0 5px 5px 0;margin:0}#gallery-container #gallery-list .row .gallery-list-entry .panel{border-radius:3px!important;margin:0;position:relative;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body{padding:0!important;height:auto;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a{overflow:hidden;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a img{display:block;margin:0;width:100%;height:auto;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay{visibility:hidden;display:block;position:absolute;top:0;left:0;height:100%;width:100%;background-color:#000}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay i{position:absolute;top:45%;left:0;width:100%;font-size:1.5em;color:#fff!important;text-align:center;display:inline-block;height:auto}#gallery-container #gallery-list .row .gallery-list-entry .panel .overlay{opacity:0;transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{position:absolute;padding:8px!important;border-radius:0!important;font-weight:600;color:#fff;text-align:center;border:none;background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .gallery-media-file-controls a,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .gallery-media-file-controls a{font-size:1.125em;cursor:pointer;padding-left:5px}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .pull-left,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .pull-left{max-width:75%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer.background-none,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading.background-none{background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{bottom:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{font-size:12px;top:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a{color:#fff}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a:hover{text-decoration:none;color:#fff}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a img{transform:scale(1.3);-ms-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-moz-transform:scale(1.3)}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay{visibility:visible;opacity:.55;-moz-opacity:.55;-webkit-opacity:.55}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay i{opacity:1;-moz-opacity:1;-webkit-opacity:1}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-heading{opacity:.9;-moz-opacity:.9;-webkit-opacity:.9}body{overflow-y:scroll!important}.blueimp-gallery .modal-body{position:relative;text-align:center;padding:0 0 56.25% 0;overflow:hidden;cursor:pointer;background:#fff}.red{background-color:red;padding:10px;margin-top:5px}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}.blueimp-gallery>.slides>.slide-loading{background-image:none}.blueimp-gallery .blueimp-gallery-display,.blueimp-gallery>.slides>.slide{animation:fadein .57s linear 1 normal forwards;-webkit-animation:fadein .57s linear 1 normal forwards}@media (max-width:319px){#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{display:none;visibility:hidden}} \ No newline at end of file diff --git a/resources/css/gallery.less b/resources/css/gallery.less index e34772c..e7d5d5f 100644 --- a/resources/css/gallery.less +++ b/resources/css/gallery.less @@ -260,6 +260,25 @@ 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; +} + @media (max-width: 319px) { #gallery-container { #gallery-list { diff --git a/resources/js/gallery.js b/resources/js/gallery.js index 95e62d3..5c16a08 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -57,6 +57,13 @@ humhub.module('gallery', function (module, require, $) { }); }; + $('#gallery-media-container .panel-body').one('click', function() { + var $slides = $('.blueimp-gallery .slides'); + $slides.css({'opacity': 0.1}); + $slides.fadeTo(2450, 1); + $('#gallery-media-container .panel-body').off(); + }); + module.export({ init: init, initOnPjaxLoad: true, From 4f358d3de51691e5d7f7de80caca670ad355bb9f Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Fri, 28 Aug 2020 19:06:38 +0300 Subject: [PATCH 2/5] style: class replaced with id to be more pecise --- resources/css/gallery.css | 2 +- resources/css/gallery.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/css/gallery.css b/resources/css/gallery.css index 0896f8d..10bc789 100644 --- a/resources/css/gallery.css +++ b/resources/css/gallery.css @@ -1 +1 @@ -#gallery-container .button-action-menu .overflow-ellipsis{position:relative;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}#gallery-container .button-action-menu .overflow-hidden{overflow:hidden;position:relative}#gallery-container .button-action-menu .fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:200px;direction:ltr;cursor:pointer}#gallery-container .button-action-menu .btn{width:100%;padding:8px 16px!important;font-size:1em!important;font-weight:400!important}#gallery-container .button-action-menu .btn-group{width:100%}#gallery-container .button-action-menu .btn-group .split-toggle{width:auto!important;float:right!important;border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group .split-toggle:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group>.split-button{width:auto!important;overflow:hidden;display:block;float:none!important;border-radius:3px 0 0 3px}#gallery-container .button-action-menu .btn-group>.split-button:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:3px 0 0 3px}#gallery-container .button-action-menu .dropdown-menu{padding:0;margin:0;width:100%}#gallery-container .button-action-menu .dropdown-menu li{padding:0;border:none;border-radius:0}#gallery-container .button-action-menu .dropdown-menu li:first-child{padding:0;margin:0;border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:first-child .btn{border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:last-child{padding:0;margin:0;border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu li:last-child .btn{border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu .btn{border:none;border-radius:0}#gallery-container .padding15perc{padding:15%!important}#gallery-container .social-activities{font-size:11px;color:#fff;margin-bottom:0}#gallery-container .social-activities a{font-size:11px;color:#fff;margin-top:10px;margin-bottom:0}#gallery-container .social-activities a:hover{color:#aeaeae;text-decoration:none}#gallery-container .social-activities-gallery{font-size:11px;color:#7a7a7a;line-height:24px;margin-bottom:0}#gallery-container .social-activities-gallery a{font-size:11px;color:#7a7a7a;margin-top:10px;margin-bottom:0}#gallery-container .social-activities-gallery a:hover{color:#aeaeae;text-decoration:none}#gallery-container .panel-heading .media .updated{color:#bebebe;font-size:11px;font-weight:700}#gallery-container .panel-heading .media .author a{color:#bebebe;font-size:11px}#gallery-container .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#gallery-container .dropdown-menu .btn-group{width:100%}#gallery-container .dropdown-menu .btn-group .btn{padding:4px 15px;font-size:13px;color:#fff}#gallery-container .dropdown-menu .btn-group .btn:hover{text-decoration:none}#gallery-container #gallery-list{margin:0 10px 0 10px!important}#gallery-container #gallery-list .galleryEmptyMessage .panel{margin:0}#gallery-container #gallery-list .galleryEmptyMessage .panel .panel-body{margin:10px}#gallery-container #gallery-list .row{padding:5px 0 0 5px!important;margin:0}#gallery-container #gallery-list .row .dropdown-toggle{background-color:transparent}#gallery-container #gallery-list .row .gallery-list-entry{padding:0 5px 5px 0;margin:0}#gallery-container #gallery-list .row .gallery-list-entry .panel{border-radius:3px!important;margin:0;position:relative;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body{padding:0!important;height:auto;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a{overflow:hidden;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a img{display:block;margin:0;width:100%;height:auto;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay{visibility:hidden;display:block;position:absolute;top:0;left:0;height:100%;width:100%;background-color:#000}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay i{position:absolute;top:45%;left:0;width:100%;font-size:1.5em;color:#fff!important;text-align:center;display:inline-block;height:auto}#gallery-container #gallery-list .row .gallery-list-entry .panel .overlay{opacity:0;transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{position:absolute;padding:8px!important;border-radius:0!important;font-weight:600;color:#fff;text-align:center;border:none;background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .gallery-media-file-controls a,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .gallery-media-file-controls a{font-size:1.125em;cursor:pointer;padding-left:5px}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .pull-left,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .pull-left{max-width:75%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer.background-none,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading.background-none{background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{bottom:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{font-size:12px;top:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a{color:#fff}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a:hover{text-decoration:none;color:#fff}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a img{transform:scale(1.3);-ms-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-moz-transform:scale(1.3)}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay{visibility:visible;opacity:.55;-moz-opacity:.55;-webkit-opacity:.55}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay i{opacity:1;-moz-opacity:1;-webkit-opacity:1}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-heading{opacity:.9;-moz-opacity:.9;-webkit-opacity:.9}body{overflow-y:scroll!important}.blueimp-gallery .modal-body{position:relative;text-align:center;padding:0 0 56.25% 0;overflow:hidden;cursor:pointer;background:#fff}.red{background-color:red;padding:10px;margin-top:5px}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}.blueimp-gallery>.slides>.slide-loading{background-image:none}.blueimp-gallery .blueimp-gallery-display,.blueimp-gallery>.slides>.slide{animation:fadein .57s linear 1 normal forwards;-webkit-animation:fadein .57s linear 1 normal forwards}@media (max-width:319px){#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{display:none;visibility:hidden}} \ No newline at end of file +#gallery-container .button-action-menu .overflow-ellipsis{position:relative;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}#gallery-container .button-action-menu .overflow-hidden{overflow:hidden;position:relative}#gallery-container .button-action-menu .fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;-ms-filter:'alpha(opacity=0)';font-size:200px;direction:ltr;cursor:pointer}#gallery-container .button-action-menu .btn{width:100%;padding:8px 16px!important;font-size:1em!important;font-weight:400!important}#gallery-container .button-action-menu .btn-group{width:100%}#gallery-container .button-action-menu .btn-group .split-toggle{width:auto!important;float:right!important;border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group .split-toggle:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0 3px 3px 0}#gallery-container .button-action-menu .btn-group>.split-button{width:auto!important;overflow:hidden;display:block;float:none!important;border-radius:3px 0 0 3px}#gallery-container .button-action-menu .btn-group>.split-button:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:3px 0 0 3px}#gallery-container .button-action-menu .dropdown-menu{padding:0;margin:0;width:100%}#gallery-container .button-action-menu .dropdown-menu li{padding:0;border:none;border-radius:0}#gallery-container .button-action-menu .dropdown-menu li:first-child{padding:0;margin:0;border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:first-child .btn{border-radius:3px 3px 0 0}#gallery-container .button-action-menu .dropdown-menu li:last-child{padding:0;margin:0;border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu li:last-child .btn{border-radius:0 0 3px 3px}#gallery-container .button-action-menu .dropdown-menu .btn{border:none;border-radius:0}#gallery-container .padding15perc{padding:15%!important}#gallery-container .social-activities{font-size:11px;color:#fff;margin-bottom:0}#gallery-container .social-activities a{font-size:11px;color:#fff;margin-top:10px;margin-bottom:0}#gallery-container .social-activities a:hover{color:#aeaeae;text-decoration:none}#gallery-container .social-activities-gallery{font-size:11px;color:#7a7a7a;line-height:24px;margin-bottom:0}#gallery-container .social-activities-gallery a{font-size:11px;color:#7a7a7a;margin-top:10px;margin-bottom:0}#gallery-container .social-activities-gallery a:hover{color:#aeaeae;text-decoration:none}#gallery-container .panel-heading .media .updated{color:#bebebe;font-size:11px;font-weight:700}#gallery-container .panel-heading .media .author a{color:#bebebe;font-size:11px}#gallery-container .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#gallery-container .dropdown-menu .btn-group{width:100%}#gallery-container .dropdown-menu .btn-group .btn{padding:4px 15px;font-size:13px;color:#fff}#gallery-container .dropdown-menu .btn-group .btn:hover{text-decoration:none}#gallery-container #gallery-list{margin:0 10px 0 10px!important}#gallery-container #gallery-list .galleryEmptyMessage .panel{margin:0}#gallery-container #gallery-list .galleryEmptyMessage .panel .panel-body{margin:10px}#gallery-container #gallery-list .row{padding:5px 0 0 5px!important;margin:0}#gallery-container #gallery-list .row .dropdown-toggle{background-color:transparent}#gallery-container #gallery-list .row .gallery-list-entry{padding:0 5px 5px 0;margin:0}#gallery-container #gallery-list .row .gallery-list-entry .panel{border-radius:3px!important;margin:0;position:relative;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body{padding:0!important;height:auto;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a{overflow:hidden;display:block;width:100%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a img{display:block;margin:0;width:100%;height:auto;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay{visibility:hidden;display:block;position:absolute;top:0;left:0;height:100%;width:100%;background-color:#000}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-body a span.overlay i{position:absolute;top:45%;left:0;width:100%;font-size:1.5em;color:#fff!important;text-align:center;display:inline-block;height:auto}#gallery-container #gallery-list .row .gallery-list-entry .panel .overlay{opacity:0;transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{position:absolute;padding:8px!important;border-radius:0!important;font-weight:600;color:#fff;text-align:center;border:none;background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .gallery-media-file-controls a,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .gallery-media-file-controls a{font-size:1.125em;cursor:pointer;padding-left:5px}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer .pull-left,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading .pull-left{max-width:75%}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer.background-none,#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading.background-none{background:0 0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{bottom:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading{font-size:12px;top:0;left:0;right:0}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a{color:#fff}#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-heading a:hover{text-decoration:none;color:#fff}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a img{transform:scale(1.3);-ms-transform:scale(1.3);-webkit-transform:scale(1.3);-o-transform:scale(1.3);-moz-transform:scale(1.3)}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay{visibility:visible;opacity:.55;-moz-opacity:.55;-webkit-opacity:.55}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-body a span.overlay i{opacity:1;-moz-opacity:1;-webkit-opacity:1}#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-footer,#gallery-container #gallery-list .row .gallery-list-entry:hover .panel .panel-heading{opacity:.9;-moz-opacity:.9;-webkit-opacity:.9}body{overflow-y:scroll!important}.blueimp-gallery .modal-body{position:relative;text-align:center;padding:0 0 56.25% 0;overflow:hidden;cursor:pointer;background:#fff}.red{background-color:red;padding:10px;margin-top:5px}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}#blueimp-gallery>.slides>.slide-loading{background-image:none}#blueimp-gallery .blueimp-gallery-display,#blueimp-gallery>.slides>.slide{animation:fadein .57s linear 1 normal forwards;-webkit-animation:fadein .57s linear 1 normal forwards}@media (max-width:319px){#gallery-container #gallery-list .row .gallery-list-entry .panel .panel-footer{display:none;visibility:hidden}} \ No newline at end of file diff --git a/resources/css/gallery.less b/resources/css/gallery.less index e7d5d5f..873cae7 100644 --- a/resources/css/gallery.less +++ b/resources/css/gallery.less @@ -269,12 +269,12 @@ body{ } } -.blueimp-gallery > .slides > .slide-loading { +#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 { +#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; } From 660333a2870df09c399bacc9846cf4d691b2a4cb Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Fri, 28 Aug 2020 19:10:48 +0300 Subject: [PATCH 3/5] fix: js single click func moved to init func --- resources/js/gallery.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/resources/js/gallery.js b/resources/js/gallery.js index 5c16a08..4ce03ab 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -33,6 +33,14 @@ humhub.module('gallery', function (module, require, $) { } fadeIn(); + + $('#gallery-media-container').one('click', '.panel-body', function() { + var $slides = $('#blueimp-gallery .slides'); + var firstAnimationTime = 2450; + $slides.css({'opacity': 0.1}); + $slides.fadeTo(firstAnimationTime, 1); + $('#gallery-media-container').off(); // TODO change it to definition + }); }; var fadeIn = function() { @@ -57,13 +65,6 @@ humhub.module('gallery', function (module, require, $) { }); }; - $('#gallery-media-container .panel-body').one('click', function() { - var $slides = $('.blueimp-gallery .slides'); - $slides.css({'opacity': 0.1}); - $slides.fadeTo(2450, 1); - $('#gallery-media-container .panel-body').off(); - }); - module.export({ init: init, initOnPjaxLoad: true, From 85bb06f589cd866efdd0def3f6020754c4b705bc Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Fri, 28 Aug 2020 19:14:58 +0300 Subject: [PATCH 4/5] chor: changelog modified --- docs/CHANGELOG.md | 1 + resources/js/gallery.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 0f6c814..992fa42 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -5,6 +5,7 @@ Changelog ------------------ - Enh: Added sort order option for gallery snippet (@MasterMindNET) - Enh: Gallery snippet is displayed on the user profile's page with sortOrder option and gallery settings +- Enh: When the gallery image opens the first time a slow transition takes place 1.1.2 (May 20, 2020) diff --git a/resources/js/gallery.js b/resources/js/gallery.js index 4ce03ab..153db96 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -39,7 +39,7 @@ humhub.module('gallery', function (module, require, $) { var firstAnimationTime = 2450; $slides.css({'opacity': 0.1}); $slides.fadeTo(firstAnimationTime, 1); - $('#gallery-media-container').off(); // TODO change it to definition + $('#gallery-media-container').off(); }); }; From d6e13c2e623553427837ad2c1ee2bddfc120d3e6 Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Sat, 29 Aug 2020 14:56:46 +0300 Subject: [PATCH 5/5] fix: most part have been moved to humhub repo to static\js\humhub\humhub.ui.gallery.js file --- resources/css/gallery.less | 3 +-- resources/js/gallery.js | 8 -------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/resources/css/gallery.less b/resources/css/gallery.less index 873cae7..d885d14 100644 --- a/resources/css/gallery.less +++ b/resources/css/gallery.less @@ -270,8 +270,7 @@ body{ } #blueimp-gallery > .slides > .slide-loading { - background-image: none; - // this class with a loader is a bit strange + background-image: none; // this class with a loader is a bit strange } #blueimp-gallery .blueimp-gallery-display, #blueimp-gallery > .slides > .slide { diff --git a/resources/js/gallery.js b/resources/js/gallery.js index 153db96..95e62d3 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -33,14 +33,6 @@ humhub.module('gallery', function (module, require, $) { } fadeIn(); - - $('#gallery-media-container').one('click', '.panel-body', function() { - var $slides = $('#blueimp-gallery .slides'); - var firstAnimationTime = 2450; - $slides.css({'opacity': 0.1}); - $slides.fadeTo(firstAnimationTime, 1); - $('#gallery-media-container').off(); - }); }; var fadeIn = function() {