gallery.html

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

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

<div class="container">
  <h3>Galleria view</h3>
  <div id="galleria"></div>
</div>

<script type="text/javascript" src="galleria/galleria-1.2.7.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

<style type="text/css">
  .galleria {
    height:467px;
    margin-bottom: 50px;
  }
</style>

<script type="text/javascript">

  /* ========  For Galleria  =========== */
  function buildGalleria(galleries)
  {
    $.each(galleries, function(gallery, photos) {
      var items = [];
      $.each(photos, function(a, b) {
        items.push('<a href="' + b.source + '"><img src="' + (b.thumb ? b.thumb : b.source) + '"></a>');
      })
      
      $('#galleria').append($('<div>', { 'id' : gallery, 'class' : 'galleria'}).append(items.join('')));
      Galleria.run('#' + gallery);
    });
  }
  /* ==================================== */

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

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