fancybox v3.5 - Iframe

fancybox-v3-5-iframe.markdown

fancybox v3.5 - Iframe

A Pen by Janis Skarnelis on CodePen.

License.

index.html

<h2>fancybox v3.5 - Iframe</h2>

<p>Customization of iframed page - custom dimensions, disabled preloading and small close button on top of the content</p>

<hr class="my-5" />

<div class="row mb-4">
  <div class="card-deck col-9">

    <div class="card">
      <div class="card-body">
        <p>
          Using <code>.fancybox()</code> method
        </p>
        <p class="mb-0">
          <a data-fancybox data-type="iframe" href="https://codepen.io/about/" class="btn btn-primary fancybox">
            Click me
          </a>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <p>
          Using <code>data</code> attributes
        </p>
        <p class="mb-0">
          <a data-fancybox data-type="iframe" href="https://codepen.io/about/" class="btn btn-primary" data-small-btn="true" data-iframe='{"preload":false}'>
            Click me
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

script.js

$('.fancybox').fancybox({
  toolbar  : false,
  smallBtn : true,
  iframe : {
    preload : false
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

style.css

.fancybox-slide--iframe .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
	margin: 0;
  background: #191919;
}

styles

<link href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" rel="stylesheet" />
<link href="https://codepen.io/fancyapps/pen/Kxdwjj" rel="stylesheet" />