We Keep Coding

Prevent jquery fancybox from closing when clicking on link

I have a jquery fancybox with a normal a href link inside it. When I click on that link the fancybox closes. How can I prevent the fancybox to close after I clicked on the link?
This is the code for the fancybox:
$(function(){
$(".booking_module").fancybox({
maxWidth : 550,
topRatio : 0,
fitToView : false,
width : '100%',
height : 'auto',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
centerOnScroll: true,
autoResize: true,
autoCenter: true,
margin : [topmargin, 0, 0, 0],
helpers : {
overlay : {closeClick: false}
}
});
});

This option will disable closing fancybox when clicking on the background
$(document).ready(function() {
$(".booking_module").fancybox({
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
}
});
});
and this option will disable all default click methods of closing fancybox
$(document).ready(function() {
$(".booking_module").fancybox({
closeBtn : false,
closeClick : false,
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
},
keys : {
close: null
} // prevents close when clicking escape button
});
});
i think the second option is what you're looking for. Maybe without the "closeBtn"

The problem was that I was using 3 classes for the a href. One of those classes was not used anymore. When I removed that un-used class it didn't close anymore after clicking on that link.

fancybox with mutiple title on right side of image

I need to show image title, date and link on the right side of the image.
something similar to this example
by default fancybox allow us few option like inside, outside, top but not left or right side of image. and with navigation buttons < >
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade'
});
Is there a ways we can do it like as shown in image below
Fiddle example http://jsfiddle.net/JYzqR/

You can use fancybox tpl (template) option and add information on callback like afterLoad like so:
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
},
nextEffect: 'fade',
prevEffect: 'fade',
afterLoad: function() {
var html = '<span>Date, File Type, Download</span>';
$('.fancybox-sidebar').append(html);
},
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><div class="fancybox-sidebar"></div></div></div></div>'
}
});
DEMO

jQuery does not work when reload the page content via ajax

I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?

What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});

It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});

Fancybox overflow is hidden

I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});

You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs

Check if jQuery "Fancybox" is already registered?

I'm regestering a jQuery fancybox like so:
$(document).ready(function() {
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
});
However, on page transfer/postback it is getting registered multiple times, which slows it down to the point of breaking. Is there a way to check if the event is already registered, and if not, register it?
Pseudo code:
//check if fancybox has not been registered
if($("help").fancybox == null))
{
//register fancy box
}

When fancybox runs, it adds a fancybox entry into jQuery's data object.
You can test for its presence:
if( ! $("#help").data().fancybox )
{
//register fancy box
}

Fancybox uses $(element).data() to store its element related configuration. You just have to check if a fancybox exists.
$("#fancy").data("fancybox");
See this fiddle for more fnu.

This Function looks for your #help Element and loads the fancybox.js only if it's present. After successfully loading the Fancybox.js it'll call the success function and init your fancybox.
This will only affect pages which have the element #help. So you save HTTP Requests and bandwidth.
See: http://api.jquery.com/jQuery.ajax/
You should also look for the error function which allows you to handle errors.
$(document).ready(function() {
// Look for #help
if ( $('#help').html() !== null ) {
// Load, init and config the fancybox
$.ajax({
url: '/js/path/to/fancybox.js',
type: 'GET',
dataType: 'script',
success: function() {
// Init Fancybox
$("#help").fancybox({
'width': '90%',
'height': '90%',
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'none',
'titleShow': false,
'type': 'iframe'
});
}
});
}
});

Bit late, but for Fancybox 2 I use:
parent.jQuery.fancybox.isOpen
I think that you can also use:
parent.jQuery.fancybox.isOpened
Both statements will return true if fancybox is open on the site.