fancybox v2.x DEMO

By JFK http://stackoverflow.com/users/1055987/jfk

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div id="wrapper">
  <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

  <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
  <br />
  <p>
    Keep scrolling down to find more content
  </p>
  <div id="footer">
    <p>
      You found me
    </p>
    <br />
  </div>
</div>

CSS

#wrapper {
  height: 1500px;
  position: relative
}

#footer {
  position: absolute;
  bottom: 0;
  top: auto
}

JavaScript

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    // API options
    helpers: {
      overlay: {
        locked: false
      }
    }
  }); // fancybox
}); // ready