News

Code content overlays with the jQuery fancyBox plugin

Inspired by the HOCHBURG site find out how they utilised the fancyBox jQuery plugin to load pages and images over the main page – here’s how it works!

Screen-shot-2014-11-17-at-14.34.54

Screen shot 2014-11-17 at 14.34.54

Link the fancyBox plugin

The fancyBox plugin is a jQuery solution for adding Lightbox-style popups, written by Jānis Skarnelis. Visit fancyapps.com/fancybox to download the latest version, unzip the repository and copy a minimum of the two core CSS and JS files into the root of your page. Attach these to the <head> of your page as normal, after linking to the latest jQuery CDN or local copy.

001 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
002 <script type="text/javascript"     src="jquery.fancybox.pack.js"></script>
003    <link rel="stylesheet" href="jquery.fancybox.css" type="text/css"media="screen"/>

Set up your content

Typically Lightboxes are for collections or galleries of images but fancyBox does this and more. For our quick start example we’ll use three PNG images, larger versions (800 by 800) and smaller versions (300 by 300) although the sizing is variable. This gives us a clickable thumbnail link that will load the full-size equivalent. After this we’ll add a simple text link with a href pointing to a desired URL. Make sure you observe the class, rel and data-fancybox-type properties here:

001 <body>
002 <a rel="group" href="myPics/big1.png">
003 <img src="myPics/small1.png" alt=""/></a>
004 <a rel="group" href="myPics/big2.png">
005 <img src="myPics/small2.png" alt=""/></a>
006 <a rel="group" href="myPics/big3.png">
007 <img src="myPics/small3.png" alt=""/></a>
008 <a data-fancybox-type="iframe" href="https://www.gadgetdaily.xyz/">CLICK HERE</a>

Add the basic functions

That last link will eventually open a second page within an <iframe> element, but nothing will work until we call the fancyBox on our elements. So before our closing </body> tag, add a script and the following brace of functions. The comments label where the remaining step code must go. If you did nothing else, fancyBox will now work but with our images only.

001 <script type="text/javascript">
002    $(document).ready(function(){
003            $(".image").fancybox({
004            //CODE IN HERE
005            });
006    });
007    </script>

Set some styles

So from the line above the comment in the last step, we can start stipulating various style changes as desired. fancyBox lets you do this via a series of selectors which sets styles for the box first and then drills down into the background overlay. So here we’ve removed any default padding while setting our overlay a semitransparent pink colour.

001 $(".image").fancybox({
002     "padding": "0",
003        helpers: {
004     overlay: {
005        css: {
006     "background":"rgba(255, 137, 198,     0.95)"
007        }}},

Right-click menu disabled

Another neat thing you can add if necessary is a ‘beforeShow’ function for binding a false state to the right-click mouse menu. This is only recommended under certain contexts, but certainly if you didn’t want your images to be saved this could prove useful:

001     beforeShow: function(){
002     $.fancybox.wrap.bind("contextmenu",function(e){return false;});
003    }});

Finish up with fancyBox

Finally, you can add extra .fancybox() functions across different elements, setting different styles and effects. So before we close our </script> tag we’ll add another relating to our link and iframe, setting very basic dimensions for the sizing. Save and preview to test, play around with your own custom styles and if you want to add fancyBox’s optional helpers, buttons and icons, then copy in and attach the extra files found in the repository.

001 $(".page").fancybox({
002 width: "80%",
003 height: "80%"
004 });
005 });
006 </script>
×