Fancybox / Lightbox

Fancybox accepts the following data attributes:

• data-fancybox-aspect-ratio="true" - Boolean that indicates whether the aspect ratio needs to be kept. Must be used in conjunction with width/height attributes
• data-fancybox-close-button="false" - Boolean that determines whether or not a close button should be displayed
• data-fancybox-close-click="true" - Boolean that determines if the fancybox will be closed when user clicks the content
• data-fancybox-height="500" - Number or String indicating the height of the container
• data-fancybox-max-height="500" - Number or String indicating the maximum height of the container
• data-fancybox-max-width="500" - Number or String indicating the maximum width of the container
• data-fancybox-min-height="500" - Number or String indicating the minimum height of the container
• data-fancybox-min-width="500" - Number or String indicating the minimum width of the container
• data-fancybox-padding="0" - Removed padding from lightbox, can also be set to the desired value
• data-fancybox-tpl="{closeBtn : '<a title="Close" class="fancybox-close pop-up__close--teal" href="javascript:;"></a>',}" - Set custom template on the renderend fancybox
• data-fancybox-type="iframe" - String, overrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
• data-fancybox-width="500" - Number or String indicating the width of the container
• data-fancybox-wrap-css="pop-up--teal" - A class to be assigned to the .fancybox-wrap container

There are 3 global variables in JS that capture all these settings: fancyboxSettings, tealFancyboxSettings, plumFancyboxSettings. Triggering a fancybox opening with JS:

  $.fancybox.open($helpPopUp, fancyboxSettings);
  $.fancybox.open($helpPopUp, tealFancyboxSettings);
  $.fancybox.open($helpPopUp, plumFancyboxSettings);