Open Effect

Currently not possible in fullscreen galleria.

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.

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 */