Support » Plugin: Fullscreen Galleria » Open Effect

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author pdamsten

    (@pdamsten)

    Currently not possible in fullscreen galleria.

    Thread Starter Marow

    (@marow)

    Hm… shame…

    maybe there is a way to have some effect on fsg_photobox reloading?

    I made some css animations, but you probably can add something with jquery 🙂 thanks.

    Plugin Author pdamsten

    (@pdamsten)

    Patches are welcome 🙂 It’s on my TODO list but not in the highest priority.

    I added this effects to have images loading with loading gif and fade in effect + blue transparent hover. my loading image had to have white background, so I didn’t used yours. sorry, can’t show this site yet.

    /* galleria */
    
    .galleria-photobox img {
    	max-width:none !important;
    	opacity:0;
    	-webkit-animation:fadeIn ease-in 1;
    	-moz-animation:fadeIn ease-in 1;
    	-o-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
    	-webkit-animation-fill-mode:forwards;
    	-moz-animation-fill-mode:forwards;
    	-o-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
    	-webkit-animation-duration:0.6s;
    	-moz-animation-duration:0.6s;
    	-o-animation-duration:0.6s;
    	animation-duration:0.6s;
    	-webkit-animation-delay:0.4s;
    	-moz-animation-delay:0.4s;
    	-o-animation-delay:0.4s;
    	animation-delay:0.4s;
    }
    
    /* Key Frames
    ---------------------------------------------------- */
    @-webkit-keyframes
    fadeIn {
    from {
    opacity:0;
    }
    
    to {
    	opacity:1;
    }
    }
    @-moz-keyframes
    fadeIn {
    from {
    opacity:0;
    }
    
    to {
    	opacity:1;
    }
    }
    @-o-keyframes
    fadeIn {
    from {
    opacity:0;
    }
    
    to {
    	opacity:1;
    }
    }
    @keyframes
    fadeIn {
    from {
    opacity:0;
    }
    
    to {
    	opacity:1;
    }
    }
    
    .ie9 .galleria-photobox img {
    	opacity:0.92;
    }
    
    .galleria-photobox a:hover img, .galleria-photobox a:active img {
    	opacity:1;
    }
    
    .galleria-photobox div {
    	background:url(/model/wp-content/themes/mytheme/images/gallery-loader.gif) no-repeat 50% 50%;
    }
    
    .galleria-photobox div:hover a:after {
    	position:absolute;
    	width:100%;
    	height:100%;
    	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhY2NmZiIgc3RvcC1vcGFjaXR5PSIwLjI4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YWNjZmYiIHN0b3Atb3BhY2l0eT0iMC4yOCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    	background: -moz-linear-gradient(top, rgba(122, 204, 255, 0.28) 0%, rgba(122, 204, 255, 0.28) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(122, 204, 255, 0.28)), color-stop(100%, rgba(122, 204, 255, 0.28)));
    	background: -webkit-linear-gradient(top, rgba(122, 204, 255, 0.28) 0%, rgba(122, 204, 255, 0.28) 100%);
    	background: -o-linear-gradient(top, rgba(122, 204, 255, 0.28) 0%, rgba(122, 204, 255, 0.28) 100%);
    	background: -ms-linear-gradient(top, rgba(122, 204, 255, 0.28) 0%, rgba(122, 204, 255, 0.28) 100%);
    	background: linear-gradient(to bottom, rgba(122, 204, 255, 0.28) 0%, rgba(122, 204, 255, 0.28) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#477accff', endColorstr='#477accff', GradientType=0 );
    	left:0;
    	top:0;
    	content:'';
    }
    
    /* eof galleria */
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Open Effect’ is closed to new replies.