I'm trying to position the fancybox near it's trigger element with beforeShow: function()
. It's not working.
I'm also trying to close fancybox on hover out
. Using $.fancybox.close();
It's opening on hover over
but not closing on hover out
. I'm trying to get hover out
to work on both the trigger element and the fancybox.
Here's the html:
<a class="fancybox-effects-e" width="300" height="250" href="page.html" title="<b>Title: </b>Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="assets/imgs/web/2.jpg" alt="" /></a>
Here's my JS:
$("a.fancybox-effects-e").fancybox({
beforeShow: function(){
var position = this.element.offset();
$("a.fancybox-effects-e")._getPosition = function() {
return position;
}
console.log("position = " + position);
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
},
frameWidth : '100%',
frameHeight : '100%',
fitToView: false,
autosize: false,
overlayShow : false,
/* wrapCSS : 'fancybox-custom', */
closeClick : true,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
autoCenter: false,
closeSpeed : 10,
type:'iframe',
helpers : {
title : {
type : 'inside'
}
}}
)
.hover(function () {
$(this).click();
}, function(){
$.fancybox.close();
});