Support » Plugin: Fullscreen Galleria » Open Effect
Open Effect
-
Hey,
how can i change the Effect, when i Open a Picture.
Like this:
http://tympanus.net/Tutorials/ExpandingOverlayEffect/index.html
Viewing 6 replies - 1 through 6 (of 6 total)
-
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 */
Viewing 6 replies - 1 through 6 (of 6 total)
- The topic ‘Open Effect’ is closed to new replies.