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.

Jquery plugin make it bind onclick

I have a jquery plugin which i have purchased from code canyon for social sharing.
I have it configured for single item sharing, however I wish to make it connected to multiple instances on a page.
<script>
$('a.shareplus').shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
</script>
This works perfectly for a single item that is shared on a webpage. Ive searched the documentation for this plugin, however I cant find any reference for it to be attached to multiple items on a single page.
What Im wondering is.. Im thinking about using the .bind() method to connect to it on click and using the data-href custom attribute to define the page for it to be connected to.
But this doesnt seem to work.
<script>
$('a.shareplus').bind('click',shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/' + $(this).attr('data-href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
})</script>
Im not too sure on how to connect the bind api to links that contain functions that have parameters so any help greatly appreciated

Try to write your code in document.ready() and use on() instead of bind() also use data() for data attributes like,
$(function(){
$('a.shareplus').on('click',function(){
$(this).shareplus({
icons: "facebook,twitter,google",
height : '150px',
width : '150px',
shareurl : '#application.settings.websiteurl#/article/'+$(this).data('href'),
displayTitle : true,
title : 'Share this item from',
sticker : false,
pin : false,
gplus : false,
tweets : false,
fbLikebox : false
});
});
});

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

Calling fancybox gallery which has iframe and images

what I'm trying to do is to call fancybox gallery which has and iframe and couple images, by clicking a non related div. Everything works fine with image group, but when i try to add an iframe it shows "The requested content cannot be loaded.
Please try again later."
Below is html and javascript:
<div id="gallery_1">Gallery</div>
<script>
$('#gallery_1').click(function (){
$('#gallery_1').addClass('cur_gal');
$.fancybox([
'iframe.html',
'2.jpg',
'1.jpg'
],
{ 'padding' : 0,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'type' : 'image',
'changeFade' : 1,
'loop' :false,
afterClose: function() {
$('#gallery_1').removeClass('cur_gal');
}
});
});
</script>
I tried to remove 'type' : 'image' , but then the iframe doesn't show.
I've also tried to change type to iframe, but then the images are messed up. The sizes are incorrect, and the scroll bar appears.
So maybe someone has any ideas how to display iframe and images correctly?

You need to specify the type of content individually but you are doing it globally so try modifying your script this way
$(document).ready(function () {
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
$.fancybox([{
href: "iframe.html",
type: "iframe"
}, {
href: "image2.jpg",
type: "image"
}, {
href: "image1.jpg",
type: "image"
}], {
padding: 0,
// 'transitionIn': 'fade', // for v1.3.4 not compatible
// 'transitionOut': 'fade', // for v1.3.4 not compatible
// 'type' : 'image', // sets type of content globally
changeFade: 1,
loop: false,
afterClose: function () {
$('#gallery_1').removeClass('cur_gal');
}
});
});
}); // ready
See JSFIDDLE
EDIT : you can also change this lines
$('#gallery_1').click(function () {
$('#gallery_1').addClass('cur_gal');
into this
$('#gallery_1').click(function () {
$(this).addClass('cur_gal');

Fancybox YOutube Video Keeps Playing

Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});

You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)