Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: open

Message Too Old, No Replies

Fancybox and nice transitions

   
11:49 am on Jun 18, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month