In this tutorial, we’ll walk through opening your Flipbooks in a lightbox, directly from your website.
For this we’ll be using the Fancybox library. This freely available at fancyapps.com. The library handles detecting links on your page and making them open in the lightbox.
Lets get started.
- The first step is to add the Fancybox CSS to your webpage. We do this by inserting the below code into the page head section.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css” />
- Then add the code below to the very bottom of your page. Just above your closing </body> tag.
<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js”></script>
$(‘[data-fancybox]’).fancybox({
toolbar: false,
smallBtn: true,
iframe: {
preload: false
}
})
</script>That’s all the essential setup. However none of your links will open with a lightbox currently.
-
To allow a link to be opened with a lightbox we’ll need to tell Fancybox that it should be opened. Then Fancybox will handle everything else for us.
To do this just add the “data-fancybox” and “data-type” attributes to the link anchor tag. The link in the end should look something like this:
<a data-fancybox data-type=”iframe” href=”your-flipbook-link” alt=”A Link”>Note the “iframe” value for data=type. This tells Fancybox to open the link as an iframe. This ensures that the Flipbook will work as expected.
-
That’s it! load your page in a web browser and click the link. If everything is correct the Flipbook should open in a lightbox.
-
To customise the size of the Lightbox you may want to add some extra css to your page. For example this style will make the lightbox almost fill your browser window:
<style>
.fancybox-slide–iframe .fancybox-content {
width: 95%;
height: 95%;
max-width: 95%;
max-height: 95%;
margin: 0;
}
</style>
