Custom checkbox within Fancybox

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?

is there any reason why you are using `.live()`? because you are targeting a hidden DIV, which it would work wit a regular fancybox script as inline content. — JFK, Jun 14 '12 at 21:51
The reason being to open another Fancybox once user make selection within the first one. You cannot open Fancybox from fancybox unless you use .live — Hercules S., Jun 15 '12 at 01:39
Slightly disagree, Check http://stackoverflow.com/a/10694032/1055987 and/or http://stackoverflow.com/a/10973966/1055987 — JFK, Jun 15 '12 at 01:54
yes I have checked it. :) with fancy1 and fancy2 you are targeting only 2 fancys. If you have more than 300 products and each of them you want to open in fancybox and if this product got additional products within it, you will not be able to target them. Imagine you clicked on product and clicked on related product within it and that related product got related products as well :) :) My question is how to have custom checkboxes within Fancybox. To custom or not to custom , that is the question! — Hercules S., Jun 15 '12 at 14:10

score 0 · Accepted Answer · edited May 23 '17 at 10:34

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

Perfect! Thank you so much for pointing me in the right direction. Unfortunately I will have to use it for my next project since my client is using old jQuery and cannot update for new one( and dont want to do noconflict) :) — Hercules S., Jun 18 '12 at 17:07
`noConflict` has absolutely nothing to do with upgrading your jQuery version, it is used if you are using jQuery with other libraries like mootools or prototype. Also, you don't need more than a single instance of jQuery in your document. If your client is using an old version, you just need to replace it by a new(er) one. Their current functions will keep running while you will have the chance to add new ones, like `.on()` for instance. — JFK, Jun 18 '12 at 17:43

Custom checkbox within Fancybox

1 Answers1