FancyBox Pass Parameters

Pass FancyBox options from from click event to a function (width, height)

by Timber Hjellum

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="http://theopensourcery.com/javascript/fancybox-buttons.png"></script>
<link rel="stylesheet" href="http://theopensourcery.com/javascript/jquery.fancybox-buttons.css">
<script src="http://theopensourcery.com/javascript/jquery.fancybox-buttons.js"></script>
<h3>FancyBox Pass Parameters Demo</h3>
<a class="inline" href="#dillyDilly" data-options='{"width":"100","height":"300"}'>Open inline content in a FancyBox "modal" window</a>
<div id="dillyDilly" style="display: none;">
  Dilly Dilly!!!
</div>

<a href="http://www.google.com" data-fancybox-type="iframe" class="iframe">More about Petroleum and other liquids &gt;</a>

CSS

.fancybox-inner {
  background-color: #fff;
  border: 3px solid greenyellow;
  text-align: center;
}

JavaScript

$('a.inline').click(function() {
  var width = $('a').data('options').width;
  var height = $('a').data('options').height;
  $('.fancybox').fancybox({
    padding: 0,
    closeClick: true,
    closeBtn: true,
    width: width,
    height: height,
    autoSize: false, // required for width
    margin: [40, 0, 20, 0],
    fitToView: false,
    autoDimension: false,
  });

});