css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main>
  <header>
    <h1>Fluidbox</h1>
    <span class="byline">Replicating and improving the lightbox module seen on Medium with fluid transitions</span>
  </header>
  <p>Opening images seamlessly in a lightbox on your page without interruption. This demo was inspired by how Medium handles embedded images. Made by <a rel="author" href="http://terrymun.com" title="Visit me">Terry</a>. This project was originally initiated as a personal challenge to replicate Medum's lightbox module, but it soon developed into a full-fledged jQuery plugin. You can follow the links below to read how I've tackled the challenge, or view the jQuery plugin on GitHub:</p>
  <div class="cards">
    <a href="https://medium.com/coding-design/9c7fe9db92c7">
      <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve">
        <g>
          <path d="M0.001,0v200h200V0H0.001z M148.913,72.752h-3.869c-1.437,0-3.095,1.879-3.095,3.206v48.081
		c0,1.328,1.658,3.316,3.095,3.316h3.869v11.164h-34.708v-11.164h6.964V76.842h-0.332l-17.133,61.677H90.439L73.528,76.842h-0.332
		v50.513h7.295v11.164H51.089v-11.164h3.758c1.548,0,3.206-1.988,3.206-3.316V75.958c0-1.327-1.658-3.206-3.206-3.206h-3.758V61.146
		h36.697l12.048,44.877h0.332l12.16-44.877h36.587V72.752z"/>
        </g>
      </svg>
      <span>Read the tutorial on Medium</span>
    </a>
		<a href="https://github.com/terrymun/Fluidbox">
      <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 850.39 850.39" xml:space="preserve">
        <g>
          <path fill-rule="evenodd" fill="#191717" d="M424.731,131.743c-166.349,0-301.242,134.865-301.242,301.243
		c0,133.097,86.314,246.015,206.008,285.849c15.053,2.786,20.583-6.537,20.583-14.493c0-7.18-0.278-30.915-0.409-56.086
		c-83.806,18.225-101.489-35.543-101.489-35.543c-13.704-34.817-33.448-44.077-33.448-44.077
		c-27.334-18.697,2.061-18.312,2.061-18.312c30.247,2.124,46.177,31.046,46.177,31.046c26.867,46.051,70.472,32.737,87.664,25.04
		c2.704-19.467,10.508-32.762,19.125-40.283c-66.911-7.613-137.251-33.448-137.251-148.875c0-32.888,11.77-59.762,31.042-80.858
		c-3.128-7.59-13.441-38.227,2.918-79.723c0,0,25.298-8.091,82.86,30.883c24.031-6.676,49.802-10.023,75.401-10.14
		c25.601,0.117,51.391,3.464,75.466,10.14c57.499-38.975,82.758-30.883,82.758-30.883c16.396,41.496,6.084,72.133,2.958,79.723
		c19.312,21.096,31.005,47.97,31.005,80.858c0,115.705-70.476,141.179-137.557,148.637c10.806,9.348,20.432,27.681,20.432,55.784
		c0,40.308-0.346,72.746-0.346,82.67c0,8.019,5.422,17.412,20.689,14.454c119.628-39.878,205.836-152.757,205.836-285.81
		C725.973,266.607,591.101,131.743,424.731,131.743z"/>
          <path fill="#191717" d="M237.586,564.26c-0.662,1.5-3.02,1.948-5.164,0.92c-2.188-0.983-3.411-3.024-2.704-4.525
		c0.648-1.539,3.006-1.968,5.188-0.939C237.094,560.698,238.341,562.759,237.586,564.26L237.586,564.26z M233.879,561.512"/>
          <path fill="#191717" d="M249.79,577.87c-1.438,1.33-4.248,0.712-6.153-1.393c-1.973-2.1-2.338-4.91-0.882-6.261
		c1.48-1.329,4.204-0.705,6.177,1.395C250.905,573.735,251.29,576.521,249.79,577.87L249.79,577.87z M246.915,574.787"/>
          <path fill="#191717" d="M261.667,595.218c-1.847,1.287-4.867,0.083-6.733-2.596c-1.846-2.68-1.846-5.896,0.044-7.182
		c1.866-1.285,4.842-0.126,6.732,2.529C263.552,590.692,263.552,593.908,261.667,595.218L261.667,595.218z M261.667,595.218"/>
          <path fill="#191717" d="M277.938,611.981c-1.652,1.821-5.169,1.33-7.741-1.155c-2.636-2.426-3.366-5.874-1.715-7.697
		c1.676-1.821,5.213-1.31,7.804,1.155C278.902,606.71,279.696,610.179,277.938,611.981L277.938,611.981z M277.938,611.981"/>
          <path fill="#191717" d="M300.386,621.714c-0.731,2.359-4.117,3.43-7.527,2.427c-3.41-1.032-5.636-3.795-4.95-6.177
		c0.707-2.378,4.112-3.493,7.546-2.422C298.861,616.57,301.092,619.312,300.386,621.714L300.386,621.714z M300.386,621.714"/>
          <path fill="#191717" d="M325.04,623.518c0.083,2.484-2.811,4.545-6.391,4.588c-3.6,0.083-6.518-1.929-6.557-4.374
		c0-2.509,2.831-4.545,6.431-4.608C322.103,619.055,325.04,621.053,325.04,623.518L325.04,623.518z M325.04,623.518"/>
          <path fill="#191717" d="M347.98,619.614c0.429,2.422-2.061,4.911-5.617,5.573c-3.498,0.644-6.732-0.856-7.181-3.258
		c-0.434-2.485,2.1-4.975,5.593-5.618C344.336,615.693,347.527,617.149,347.98,619.614L347.98,619.614z M347.98,619.614"/>
        </g>
      </svg>
			<span>Check out the jQuery plugin on GitHub</span>
		</a>
	</div>
  <div class="message"><h2>Note: iOS Safari users</h2><p>Due to issues with iOS safari not reporting the correct values for <code>$(window).height()</code> and <code>$(window).scrollTop()</code> due to the browser's insistence of rendering an iframe full height of its content, this demo will not work correctly on a mobile browser because it is nested within an iframe. You can <a href="https://s.codepen.io/terrymun/fullpage/JKHwp">view the working demo here</a> (open in new tab/window to break out of the frame), if you are on mobile.</p></div>
  <p>The dependencies of this demo:</p>
  <ul>
    <li><a href="https://jquery.com/">jQuery</a></li>
    <li><a href="https://github.com/desandro/imagesloaded">imagesloaded plugin</a></li>
  </ul>
  <p>Some notes on usage:</p>
  <ul>
    <li>Fluidbox will only work with images whose actual dimensions are larger than the displayed dimension.</li>
    <li>The aspect ratio of the displayed and linked image has to be identical.</li>
  </ul>
  <hr />
  <h3>Changelog</h3>
  <ul>
    <li><strong>1.0</strong> (26th December, 2013) &mdash; Fluidbox released</li>
    <li><strong>1.1</strong> (28th December, 2013) &mdash; Improved performance and debugged Fluidbox, so that image positioning is not messed up when Fluidbox is opened and when the viewport is resized. Partial solution published (see v1.2).</li>
    <li><em>&mdash; Happy new year! &mdash;</em></li>
    <li><strong>1.2</strong> (January 2nd, 2014) &mdash; Reorganized, rewrote and clarified some of the code. This version fixes the bug of incorrectly positioned Fluidbox upon the resize event being fired. Handles larger image preloading gracefully.</li>
    <li><strong>1.3</strong> (January 4th, 2014) &mdash; Fixed a rounding issue with offset and scaling calculations, and used <code>parseInt()</code> to avoid floating point calculation errors in JS.</li>
  </ul>
  <hr />
  <h2>Basic usage</h2>
  <p>Fluidbox works out of the box as long as you append <code>data-fluidbox</code> to the anchor element, <code>&lt;a&gt;</code>.</p>
  <p>In other words, it should look like this: <code>&lt;a href="..." title="..." data-fluidbox&gt;...&lt;/a&gt;</code></p>
  <a href="https://i.imgur.com/9OQWB.jpg" title="" data-fluidbox><img src="https://i.imgur.com/9OQWB.jpg" title="" alt="" /></a>
  <hr />
  <h2>Linking to a higher resolution alternative</h2>
  <p>Sometimes it is not feasible to use the actual image itself on the page, due to concerns with excessive bandwidth usage that burdens your server, or encumbers users that are using mobile.</p>
  <a href="http://placehold.it/1500x1500" title="" data-fluidbox><img src="http://placehold.it/200x200" title="" alt="" /></a>
  <p>In this case, you can see that we have used a low resolution thumbnail, which is linked to a higher resolution image (note: both images must be of the same aspect ratio). The script will inevitably make a royal mess of itself if you are using different aspect ratios, but it will not break the page. The aspect ratio will remain the same as that of the thumbnail.</p>
  <a href="http://placehold.it/1500x900" title="" data-fluidbox><img src="http://placehold.it/200x200" title="" alt="" /></a>
  <hr />
  <h2>Versatility</h2>
  <p>Fluid box works even when images are arranged in galleries. In this case, they are arranged with the help of flexbox.</p>
  <p class="message note">The flexbox gallery will collapse into single items when viewed in mobile, or else the thumbnails will be too small &mdash; to appreciate the how Fluidbox works in this scenario, do use a wider device (&gt;600px screen width).</p>
  <div class="gallery">
    <a href="https://i.imgur.com/uh5YLj5.jpg" title="" data-fluidbox class="col-2"><img src="https://i.imgur.com/uh5YLj5.jpg" alt="" title="" /></a>
    <a href="https://i.imgur.com/UvGHJjo.jpg" title="" data-fluidbox class="col-2"><img src="https://i.imgur.com/UvGHJjo.jpg" alt="" title="" /></a>
    <a href="https://i.imgur.com/esWWGbF.jpg" title="" data-fluidbox class="col-3"><img src="https://i.imgur.com/esWWGbF.jpg" alt="" title="" /></a>
    <a href="https://i.imgur.com/ZCogT10.jpg" title="" data-fluidbox class="col-3"><img src="https://i.imgur.com/ZCogT10.jpg" alt="" title="" /></a>
    <a href="https://i.imgur.com/24hrPQn.jpg" title="" data-fluidbox class="col-3"><img src="https://i.imgur.com/24hrPQn.jpg" alt="" title="" /></a>
  </div>
  <p>It also intelligently resizes images such that portrait images will fit perfectly within the viewport, although that means scaling down the image:</p>
  <a href="https://i.imgur.com/uDPcnM3.jpg" title="" data-fluidbox><img src="https://i.imgur.com/uDPcnM3.jpg" alt="" title="" /></a>
  <hr />
  <p>Moreover, it also works with floated images - to the left or to the right, it does not matter. The following texts are jibberish, used as filler.</p>
  <p class="message note">The floated images will be rendered block-level on narrow-width devices, such as mobile phones. To appreciate how Fluidbox works with floated images, you can view this demo on a wider device (&gt;480px).</p>
  <p><a class="float-left" href="https://i.imgur.com/BXo4qAz.jpg" title="" data-fluidbox><img src="https://i.imgur.com/BXo4qAz.jpg" title="" alt="" /></a>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.</p>
  <p>Residence certainly elsewhere something she preferred cordially law. Age his surprise formerly mrs perceive few stanhill moderate. Of in power match on truth worse voice would. Large an it sense shall an match learn. By expect it result silent in formal of. Ask eat questions abilities described elsewhere assurance. Appetite in unlocked advanced breeding position concerns as. Cheerful get shutters yet for repeated screened. An no am cause hopes at three. Prevent behaved fertile he is mistake on.</p>
  <p>Feet evil to hold long he open knew an no. Apartments occasional boisterous as solicitude to introduced. Or fifteen covered we enjoyed demesne is in prepare. In stimulated my everything it literature. Greatly explain attempt perhaps in feeling he. House men taste bed not drawn joy. Through enquire however do equally herself at. Greatly way old may you present improve. Wishing the feeling village him musical. </p>
  <p><a class="float-right" href="https://i.imgur.com/rWuQotb.jpg" title="" data-fluidbox><img src="https://i.imgur.com/rWuQotb.jpg" title="" alt="" /></a>Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense as taken ye mirth at. Believe fat how six drawing pursuit minutes far. Same do seen head am part it dear open to. Whatever may scarcely judgment had.</p>
  <p>Up maids me an ample stood given. Certainty say suffering his him collected intention promotion. Hill sold ham men made lose case. Views abode law heard jokes too. Was are delightful solicitude discovered collecting man day. Resolving neglected sir tolerably but existence conveying for. Day his put off unaffected literature partiality inhabiting.</p>
  <p>Old education him departure any arranging one prevailed. Their end whole might began her. Behaved the comfort another fifteen eat. Partiality had his themselves ask pianoforte increasing discovered. So mr delay at since place whole above miles. He to observe conduct at detract because. Way ham unwilling not breakfast furniture explained perpetual. Or mr surrounded conviction so astonished literature. Songs to an blush woman be sorry young. We certain as removal attempt. </p>
</main>
            
          
!
            
              html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
}
body {
  color: #333;
  height: 100%;
  line-height: 1.5em;
  margin-bottom: 1.5em;
}
main {
	margin: 0 auto;
	width: 66.66667%;
}
header {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  box-sizing: border-box;
  color: #eee;
  margin-bottom: 1.5rem;
  overflow: hidden;
  padding: 3rem 25%;
  pointer-events: none;
  position: relative;
  left: -25%;
  width: 150%;
  transition: all .25s ease-in-out;
  
  &:before {
    background-image:
      linear-gradient(115deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 50%),
      linear-gradient(to left, #005952 0%, #005E20 100%);
    content: "";
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .25s ease-in-out;
  }
  
  &:hover:before {
    opacity: 1;
  }
  
  & > * {
    position: relative;
  }
  
  & h1 {
    font-weight: bold;
    font-size: 3em;
    line-height: 1em;
    margin: 0 0 .5rem 0;
    text-align: center;    
  }
  & .byline {
    color: rgba(255,255,255,.75);
    display: block;
    font-size: .8em;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase; 
  }
}
p {
  margin-bottom: 1.5rem;
}
.message {
  background-color: #FDC68A;
  border-left: .75rem solid #F26C4F;
  padding: .75rem 1.5rem;
  font-size: .85rem;
  
  & a:hover {
    border-color: rgba(0,0,0,.5);
    color: rgba(0,0,0,.5);
  }
  
  &.note {
    background-color: #7BCDC8;
    border-color: #00A99D;
  }
}
hr {
  border: none;
  border-top: .125rem solid #ddd;
  margin-bottom: 1.375rem;
}
a {
  border-bottom: 2px solid #333;
  color: #333;
  text-decoration: none;
  transition: all .125s ease-in-out;
  
  &:hover {
    border-bottom-color: #4a7298;
    color: #4a7298;
  }
}
ul {
  margin-top: -.75rem;
}
code {
  background-color: rgba(0,0,0,.125);
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 4px;
  display: inline-block;
  margin: 0 .125em;
  padding: 0 .25em;
}

/* Cards */
.cards {
  border-radius: .25rem;
	display: flex;
	flex-flow: row nowrap;
  margin-bottom: 1.5rem;
  overflow: hidden;
  
  & > a {
	  box-sizing: border-box;
	  border: none;
	  flex: 1 100%;
	  padding: 1.5rem;
	  text-align: center;
    
    & svg {
      display: block;
      margin: 0 auto .75rem;
      width: 5.25rem;
		  height: 5.25rem;
      transition: all .125s ease-in-out;
      
      & path { transition: fill .125s ease-in-out }
    }
    
    &:first-child {
      background-color: #333;
		  color: #eee;
      & svg {
        background-color: #eee;
        & path { fill: #333; }
      }
      &:hover {
        background-color: #222;
        color: rgba(87, 173, 104, 1);
        & svg {
          background-color: rgba(87, 173, 104, 1);
          & path { fill: #222; }
        }
      }
    }
    
    &:last-child {
      background-color: #eee;
		  color: #555;
      & svg path { fill: #333; }
      &:hover { background-color: #ccc; }
    }
  }
}

/* Fluidbox styling starts here */
a[data-fluidbox] {
  background-color: #eee;
  border: none;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  margin-bottom: 1.5rem;
  
  &.fluidbox-opened {
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;    
  }
  
  & img {
    display: block;
    margin: 0 auto;
    opacity: 0;
    max-width: 100%;
    transition: all .25s ease-in-out;
  }
}

a[class^='float'] {
  margin: 1rem;
  margin-top: 0;
  width: 33.33333%;
  
  &.float-left {
    float: left;
    margin-left: 0;
  }
  &.float-right {
    float: right;
    margin-right: 0;
  }
}

#fluidbox-overlay {
  background-color: rgba(255,255,255,.85);
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 500;
}
.fluidbox-wrap {
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  z-index: 400;
  transition: all .25s ease-in-out;
  
  .fluidbox-opened & {
    z-index: 600;
  }
}
.fluidbox-ghost {
  background-size: cover;
  background-position: center center;
  position: absolute;
  transition: all .25s ease-in-out;
}

.gallery {
  display: flex;
  -webkit-flex-flow: row wrap; /* Fix for iOS */
  flex-flow: row wrap;
  justify-content: space-between;
  
  & a {
    margin-bottom: 1rem;
    
    &.col-2 { width: 49%; }
    &.col-3 { width: 32%; }
  }
}

/* Media queries, unrelated to functionality of Fluidbox */
@media only screen and (max-width: 768px) {
  .cards {
    flex-flow: row wrap;
  }
  a[class^='float'] {
     width: 50%; 
  }
}
@media only screen and (max-width: 600px) {
  .gallery a,
  .gallery a[class^='col'] {
    margin-bottom: .5rem;
    width: 100%;
  }  
}
@media only screen and (max-width: 480px) {
  html {
    font-size: 12px;
  }
  .message {
    border: 0;
    border-top: .75rem solid #F26C4F;
  }
  a[class^='float'] {
    float: none;
    margin: 0 0 1rem 0;
    width: 100%;
  }
}
            
          
!
            
              // Wait for DOM
$(function (){
  
  // Global variables
  var $fb = $('a[data-fluidbox]'),
      vpRatio;
  
  // Add class
  $fb.addClass('fluidbox');
  
  // Create fluidbox modal background
  $('body').append('<div id="fluidbox-overlay" />');
 
  // The following events will force FB to close
  var closeFb = function (){
        $('a[data-fluidbox].fluidbox-opened').trigger('click');
      },
      positionFb = function ($activeFb){
        // Get elements
        var $img = $activeFb.find('img'),
            $ghost = $activeFb.find('.fluidbox-ghost');
        
        // Calculate offset and scale
        var offsetY = $(window).scrollTop()-$img.offset().top+0.5*($img.data('imgHeight')*($img.data('imgScale')-1))+0.5*($(window).height()-$img.data('imgHeight')*$img.data('imgScale')),
            offsetX = 0.5*($img.data('imgWidth')*($img.data('imgScale')-1))+0.5*($(window).width()-$img.data('imgWidth')*$img.data('imgScale'))-$img.offset().left,
            scale = $img.data('imgScale');
             
        // Animate ghost element
        // For offsetX and Y, we round to one decimal places
				// For scale, we round to three decimal places
				$ghost.css({
					'transform': 'translate('+parseInt(offsetX*10)/10+'px,'+parseInt(offsetY*10)/10+'px) scale('+parseInt(scale*1000)/1000+')'
				});
      }

  // Close Fluidbox when overlay is closed
  $('#fluidbox-overlay').click(closeFb);
  
  // Check if images are loaded first
  $fb.imagesLoaded().done(function (){
    
    // Create dynamic elements
    $fb
    .wrapInner('<div class="fluidbox-wrap" />')
    .find('img')
      .css({ opacity: 1 })
      .after('<div class="fluidbox-ghost" />');
    
    // Listen to resize event for calculations
    $(window).resize(function (){

      // Get viewport ratio
      vpRatio = $(window).width() / $(window).height();
      
      // Get dimensions and aspect ratios
      $fb.each(function (){
        var $img   = $(this).find('img'),
            $ghost = $(this).find('.fluidbox-ghost'),
            $wrap  = $(this).find('.fluidbox-wrap'),
            data   = $img.data();
        
        // Save image dimensions as jQuery object
        data.imgWidth  = $img.width();
        data.imgHeight = $img.height();
        data.imgRatio  = $img.width() / $img.height();
        
        // Resize and position ghost element
        $ghost.css({
          width: $img.width(),
          height: $img.height(),
          top: $img.offset().top - $wrap.offset().top,
          left: $img.offset().left - $wrap.offset().left,
        });
        
        // Calculate scale based on orientation
        if(vpRatio > data.imgRatio) {
          data.imgScale = $(window).height()*.95 / $img.height();
        } else {
          data.imgScale = $(window).width()*.95 / $img.width();
        }

      });
      
      // Reposition Fluidbox, but only when one is found to be opened
      var $activeFb = $('a[data-fluidbox].fluidbox-opened');
      if($activeFb.length > 0) positionFb($activeFb);

    }).resize();
    
    // Bind click event
    $fb.click(function (e){
      
      // Variables
      var $activeFb = $(this),
          $img   = $(this).find('img'),
          $ghost = $(this).find('.fluidbox-ghost');
      
      if($(this).data('fluidbox-state') === 0 || !$(this).data('fluidbox-state')) {
        // State: Closed
        // Action: Open fluidbox
        
        // Switch state
        $(this)
        .data('fluidbox-state', 1)
        .removeClass('fluidbox-closed')
        .addClass('fluidbox-opened');
        
        // Show overlay
        $('#fluidbox-overlay').fadeIn();
        
        // Set thumbnail image source as background image first, preload later
        $ghost.css({
          'background-image': 'url('+$img.attr('src')+')',
          opacity: 1
        });
        
        // Hide original image
        $img.css({ opacity: 0 });
        
        // Preload ghost image
        var ghostImg = new Image();
        ghostImg.onload = function (){
          $ghost.css({ 'background-image': 'url('+$activeFb.attr('href')+')' });
        };
        ghostImg.src = $(this).attr('href');
        
        // Position Fluidbox
        positionFb($(this));

      } else {
        // State: Open
        // Action: Close fluidbox
        
        // Switch state
        $(this)
        .data('fluidbox-state', 0)
        .removeClass('fluidbox-opened')
        .addClass('fluidbox-closed');
        
        // Hide overlay
        $('#fluidbox-overlay').fadeOut();
        
        // Reverse animation on wrapped elements
        $ghost
        .css({ 'transform': 'translate(0,0) scale(1)' })
        .one('webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend', function (){
          // Wait for transntion to complete before hiding the ghost element and showing the original image
          $ghost.css({ opacity: 0 });
          $img.css({ opacity: 1 });
        });

      }
      e.preventDefault();
    });
  });
});

// Defer pointer events on animated header
$(window).load(function (){
  $('header').css({
    'pointer-events': 'auto'
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console