Develop Reference

How to toggle visibility of thumbnail strip in Fancybox 4?

From the guide
You can check current state of Thumbnail plugin and toggle visibility
of thumbnail strip using API:
Fancybox.getInstance().plugins.Thumbs.state;
Fancybox.getInstance().plugins.Thumbs.toggle();
and since it shows thumbnail automatic when opened, I use it this way to disable visibility of thumbnail strip
...
<script src="https://cdn.jsdelivr.net/npm/#fancyapps/ui#4.0/dist/fancybox.umd.js"></script>
<script>
$(document).ready(function(){
Fancybox.getInstance().plugins.Thumbs.toggle();
});
</script>
</body>
</html>
But it does not work, so how to use it?

This code snippet:
Fancybox.getInstance()
allows you to get reference to the top most active instance.
This means that your code will not work just because you have not started Fancybox.
To toggle visibility at the start, simply use autoStart option like this:
Fancybox.bind("[data-fancybox]", {
Thumbs: {
autoStart: false,
},
});

Open fancybox iframe when click on a div

Using fancybox2 and try to open YouTube video when click on div
<div class="vid" data-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>
$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
var thisElement = $(el[index]);
$.extend(this, {
href: thisElement.data("href")
});
}
});
But its dosent work, please help.
jsfiddle

Well, I don't know why you are complicating this fancybox thing like this,
Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :
when you use fancybox, just start it like this :
//event function(){
$('.vid').click(function(){
$.fancybox({
//settings
'type' : 'iframe',
'width' : 640,
'height' : 480,
//You don't need your thisElement var, see below :
'href' : $(this).data('href')
});
});
and put your settings into it,
here is a starting point for you, now just customize it to make it better for your needs :
http://jsfiddle.net/rtp7dntc/9/
Hope it helps!

To make things much simpler you could use the special data-fancybox attributes on your div like
<div class="vid" data-fancybox-href="http://www.youtube.com/embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>
Then use a script as simple as this
jQuery(document).ready(function ($) {
$('.vid').fancybox();
}); // ready
See JSFIDDLE
NOTE:
The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});

try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....

You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

ColorBox Onclose function not working

I am trying to open a new colorbox window when one is closed.
I'm using this code:
$(".inline").colorbox({
inline: true,
width: "50%",
escKey: false,
onClose: function() {
$('#newWindow').show();
}
If there anything wrong with this code?

Description
Assuming your using jack moore's colorbox jQuery plugin you have to change onClose to onClosed and use open:true.
And you always have to close the function.
Check out the jsFiddle Demonstration.
Sample
Html
<div class="firstColorBox">first</div>
<div class="secondColorBox">second</div>
jQuery
$(".firstColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
onClosed:function(){
// open the other colorBox
$(".secondColorBox").colorbox({
inline:true,
width:"50%",
escKey:false,
open:true
});
}
});
More Information
jsFiddle Demonstration
jack moore's colorbox jQuery plugin
Update

'onClose' should be 'onClosed'
See the reference here: http://jacklmoore.com/colorbox/

I recommend use the event handlers that come with colorbox:
$(document).one('cbox_closed', function () {
$(".secondColorBox").colorbox({...});
}
This will allow the javascript on the page to run. I was having issues running tags on the second popup and this solved the issue.
The function one will only trigger the event once so you can close the second popup.

jquery fancybox - prevent close on click outside of fancybox

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});

<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.

If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.

There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)

The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},

you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);

Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;