Pass a class name to fancybox on js call

Question

So I have this fancybox I'm opening like this:

$('.btn-test').on("click",function(){
    $.fancybox.open({
      'content': $('.modal_size-chart'),
      'minWidth': 380,
      'minHeight': 550,
      'width': 380,
      'height': 550,
      'maxWidth': 380,
      'maxHeight': 550,
      'autoScale': false,
      'autoDimensions': false,
      'fitToView': false,
    });
  });

My problem is that like this, If I alter the box via css, any change will propagate to all the other fancyboxes I might open and this .modal_size-chart needs some specific styling the rest of the boxes don't.

So is there a way to pass a desired class name to fancybox on call ?

Onilol Onilol · Accepted Answer · 2016-01-27T19:06:36

It turns out all I needed to add was the tpl attribute ( which is explained in the documentation site as : Object Containing Various Templates.. jezz...) and the wrap attribute inside the tpl.

so it ended up being like this:

$('.btn-test').on("click",function(){
    $.fancybox.open({
      'content': $('.modal_size-chart'),
      'minWidth': 380,
      'minHeight': 550,
      'width': 380,
      'height': 550,
      'maxWidth': 380,
      'maxHeight': 550,
      'autoScale': false,
      'autoDimensions': false,
      'fitToView': false,
      'tpl': {
        wrap:'<div class="fancybox-wrap CLASS I WANT TO ADD HERE" tabindex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
      }
    });
  });

Pass a class name to fancybox on js call

1 Answers