Fancybox, a custom open transition
Does anyone know how you open a fancyBox with a custom open transition:
http://fancyapps.com/fancybox/
I'm looking for a similar jump to the example found here:
http://www.zurb.com/playground/reveal-modal-plugin
I like the show plugin but it lacks some of the functionality I need for fancyBox to do for a new project
Many thanks,
Sam
source to share
Fancybox can have the same opening effect as in the sample you provided, but not the same closing effect.
To achieve the same opening effect, try this option:
openMethod : 'changeIn'
to keep the same effect while switching between galleries try this option:
nextMethod: 'changeIn'
...
source to share
Add custom transitions -
(function ($, F) {
F.transitions.dropIn = function() {
var endPos = F._getPosition(true);
endPos.top = (parseInt(endPos.top, 10) - 200) + 'px';
F.wrap.css(endPos).show().animate({
top: '+=200px'
}, {
duration: F.current.openSpeed,
complete: F._afterZoomIn
});
};
F.transitions.dropOut = function() {
F.wrap.removeClass('fancybox-opened').animate({
top: '-=200px'
}, {
duration: F.current.closeSpeed,
complete: F._afterZoomOut
});
};
}(jQuery, jQuery.fancybox));
Use them like -
$(".fancybox").fancybox({
openMethod : 'dropIn',
openSpeed : 250,
closeMethod : 'dropOut',
closeSpeed : 100
});
And whoa-la - the same effect!
source to share
For those reading this now, I wrote a jQuery Fancybox plugin that includes the transitions Janis (the author of Fancybox) wrote to answer this question, as well as several others, and it will hopefully continue to evolve.
Look here: jquery.fancybox.transitions.js
Include javascript file in script tag after jQuery and Fancybox
<script src="path to jquery"></script>
<script src="path to fancybox"></script>
<script src="jquery.fancyboxbox.transitions.js"></script>
More information in the GitHub repository.
source to share
Ok, my advice is that if you don't know how to make the code yourself from JQuery, then your best bet is to keep an eye on the web until you can figure something out.
If you're looking for an opportunity to redesign or extend one of these plugins then a good book to read is JQuery: Newbie to the Ninja, check it out on Amazon. There are many good tips and tricks out there.
All in all, though you wouldn't want to reinvent the wheel. So there are several links to jQuery Lightbox plugins
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/ http://webdesign14.com/30-best-jquery-lightbox-plugins/
source to share