Question

I’m trying to use custom check boxes within Fancybox. They are showing up but don’t work (uncheckable).

$(document).ready(function() {

    $("#fnc").live("click", function(){
        $.fancybox($("#hidediv").html(),{
          'speedIn'         : 600, 
          'speedOut'            : 200, 
          'overlayShow'     : false,
          'autoDimensions'  : false,
          'width'           : 620,
          'height'          : 'auto',
          'overlayShow'       : true,
          'overlayOpacity'    : 0.8,
          'overlayColor'      : '#ccc'

          });
$('.defaultP input').ezMark();
$('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});
        }); 
});

Is there a way to fire jQuery again once Fancybox loaded?

Answer 1

My question is how to have custom checkboxes within Fancybox

The answer to that question is “yes”, it is possible to have custom checkboxes within fancybox (how-to? keep reading 😉

Regarding the use of .live() to “open multiple fancyboxes from fancybox”, it would be better to use .on() instead (it requires jQuery 1.7+ though). I guess the use of .live() (already deprecated as of jQuery 1.7) and .click() was intended for dynamically added elements to the DOM to be opened in fancybox.

“You cannot open Fancybox from fancybox unless you use .live()“ is not necessarily true, however for the sake of having present and/or dynamically added elements opened in fancybox (v1.3.4), in this demo we will use .on() and a regular fancybox $(".selector").fancybox(); script (no .click())

This, should do the trick

$(document).ready(function() {
 $("body").on("focusin", function(){
  $("a.fancybox").fancybox({
   'speedIn': 600, 
   'speedOut': 200, 
   'overlayShow': false,
   'autoDimensions': false,
   'width': 620,
   'height': 'auto',
   'overlayShow': true,
   'overlayOpacity': 0.8,
   'overlayColor': '#ccc',
   'onCleanup': function() {
    var myContent = this.href;
    $(myContent).unwrap();
   }
  }); // fancybox
 }); // on
 $('.defaultP input').ezMark();
 $('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});
}); // ready

Don’t believe me, see it working HERE. In that DEMO, you can also open another fancybox(es) from within fancybox.

For further information about using focusin as .on() event, check how to bind fancybox to dynamic added element? which also includes a demo.

Also notice that I am including the onCleanup option with the jQuery .unwrap() method. Since we are using “inline” content, that fixes this bug