| Fancybox and nice transitions
|
toplisek
msg:4466682 | 11:49 am on Jun 18, 2012 (gmt 0) |
I have made some combination for transitions and background. Is this correct code? Some code is [jsfiddle.net...] and rest at Fancybox.
<script type="text/javascript">
jQuery(document).ready(function() {
(function ($, F) {
F.transitions.resizeIn = function() {
var endPos = $.extend({}, F.current.dim, F._getPosition(true));
var startPos;
startPos = F.tmpWrap.position();
startPos.width = F.tmpWrap.width();
startPos.height = F.tmpWrap.height();
F.inner
.css('overflow', 'hidden')
.width( F.tmpInner.width() )
.height( F.tmpInner.height() )
.css('opacity', 0);
F.wrap.css(startPos).show();
F.tmpWrap.trigger('onReset').remove();
F.wrap.animate(endPos, {
duration: F.current.nextSpeed,
step : F.transitions.step,
complete: function() {
setTimeout(function() {
F.inner.fadeTo("fast", 1, F._afterZoomIn);
}, 1);
}
});
};
F.transitions.resizeOut = function() {
if (F.tmpWrap) {
F.tmpWrap.stop(true).trigger('onReset').remove();
}
F.tmpWrap = F.wrap.stop(true, true);
F.tmpInner = F.inner.stop(true, true);
};
}(jQuery, jQuery.fancybox));
jQuery(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background-color' : '#eee'
}
}
}
});
});
jQuery(".fancybox")
.attr('rel', 'gallery')
.fancybox({
nextMethod : 'resizeIn',
nextSpeed : 250,
prevMethod : 'resizeOut',
prevSpeed : 250
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
|
|
