Webprom Design

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

HI!

Working on another site with your slideshow. This modification is enough to make it work with touch on ipad with fade effect on slides:

direction: '<?php if ( $effect == 'slideh' ) { echo 'horizontal'; } elseif ( $effect == 'fade' ) { echo 'horizontal'; } else { echo 'vertical'; } ?>',

in captain-slider.php – latest version.

thanks.

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

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

thanks! Actually I added to into
$post_type_args = array(
and then it worked. It it probably will be overwritten when the plugin updates. Any ideas? How to include it in my child theme for twentyeleven?

return preg_replace( '~' . preg_quote( home_url( '' ), '~' ) . '~', '', qtrans_convertURL() ); – this fix worked, please remember to include in next version ?? thanks, great plugin!

yes, when updated permalinks, pages started to appear, thanks!

yes, I’ve created needed templates and put them in my child theme (for twenty twelve theme) but they didn’t worked, maybe path was wrong, will try on some next site, anyway functionality is great.

maybe try to include slider code at the footer, we need ie7 ??

one more things u can use:

in css add :

.home .flexslider .slides > li {
display:none; /* loading slides without flickering */
}

the plugin comes with the slider, when you download from https://flexslider.woothemes.com/ inside demo folder js jquery.mousewheel.js – when you are using touch movement it should be horizontal in initiation js
animation: ‘fade’, // Specify sets like: ‘fade’ or ‘slide’
direction: ‘horizontal’,

direction: ‘horizontal’ in js with mousewheel plugin script will make it touchable

updated ?? can u make it compatible? flex slider is compatible, why not to make it so on wp plugin? also maybe add (optional) mousewheel jquery plugin, it will work on mobile then ??

sorry, I already fixed it. Just added link to mousewheel plugin in the header near body + changed in javascript, vertical to horizontal direction (with fade effect). Now everything works ?? But, 1 problem is still there: it doesn’t work with IE7. Flex slider is ok with ie7, I have it on another site (without wp plugin). But with your plugin on wordpress, ie7 not showing slideshow, seems like jquery problem.

cool! it works now ?? thanks for this wonderful plugin!