From 116a9d655c64af97ca24c780cf54064da4e3cf0d Mon Sep 17 00:00:00 2001 From: MasterMindNET Date: Thu, 27 Aug 2020 00:04:12 +0300 Subject: [PATCH] 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,