fancybox-gallery.html

---
layout: default
navId: gallery
title: My memories
---

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>

<style type="text/css">
  .fancybox {
    margin-bottom: 50px;
  }
  .Thumb {
    margin: 10px;
  }
</style>
<script type="text/javascript">

  /* ========  For FancyBox  =========== */
	function buildFancyBox(galleries)
	{
    $.each(galleries, function(gallery, photos) {
      var items = [];
      $.each(photos, function(a, b) {
        items.push('<a class="' + gallery + '" href="' + b.source + '" data-fancybox-group="gallery" title="' + b.title + '"><img class="Thumb" src="' + (b.thumb ? b.thumb : b.source) + '" alt="' + b.title + '" /></a>');
        
      })
      
      $('#fancybox').append($('<div>', { 'id' : gallery, 'class' : 'fancybox'}).append(items.join('')));
      
      var opts = {
        'openSpeed' : 'slow',
        'closeSpeed' : 'slow',
        'nextSpeed' : 'slow',
        'prevSpeed' : 'slow'
      };
      $('.' + gallery).fancybox(opts);
    });
	}
  /* ==================================== */

  function callbackHandler(data) {
    var galleries = jQuery.parseJSON(data);
    
    buildFancyBox(galleries);
  }

  $(document).ready(function() {
    $.ajax({
      url : 'gallery/data.json',
      dataType : 'text',
      data : null,
      success : callbackHandler
    });
  })
</script>

<div class="container"> Switch view : 
  <a href="gallery.html">Galleria</a>,
  <a href="#">FancyBox</a>,
  <a href="highslide-gallery.html">HighSlide</a>
</div>

<div class="container">
  <h3>FancyBox view</h3>
  <div id="fancybox"></div>
</div>