highslide-gallery.html

---
layout: default
navId: gallery
title: My memories
---
    <!--
      1 ) Reference to the files containing the JavaScript and CSS.
      These files must be located on your server.
    -->
    <script type="text/javascript" src="highslide/highslide/highslide-full.js"></script>
    <link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="highslide/highslide/highslide-ie6.css" />
    <![endif]-->
    
    <!--
        2) Optionally override the settings defined at the top
        of the highslide.js file. The parameter hs.graphicsDir is important!
    -->

    <script type="text/javascript">

      /* ========  For Galleria  =========== */
      function buildGalleria(galleries)
      {
        var items = [];
        $.each(galleries, function(gallery, photos) {
          $.each(photos, function(a, b) {
            items.push('<a class="highslide" href="' + b.source + '" onclick="return hs.expand(this)"><img src="' + (b.thumb ? b.thumb : b.source) + '"></a>');
          })
          
        });

        // HighSlide does not allow to handle multiple galleries, so we merge all into one.
        $('#highslide').append($('<div>', { 'class' : 'highslide-gallery', 'style' : 'width: 600px; margin: auto'}).append(items.join('')));
        hs.graphicsDir = 'highslide/highslide/graphics/';
        hs.align = 'center';
        hs.transitions = ['expand', 'crossfade'];
        hs.fadeInOut = true;
        hs.dimmingOpacity = 0.8;
        hs.outlineType = 'rounded-white';
        hs.captionEval = 'this.thumb.alt';
        hs.marginBottom = 105; // make room for the thumbstrip and the controls
        hs.numberPosition = 'caption';
        
        // Add the slideshow providing the controlbar and the thumbstrip
        hs.addSlideshow({
        	//slideshowGroup: 'group1',
        	interval: 5000,
        	repeat: false,
        	useControls: true,
        	overlayOptions: {
        		className: 'text-controls',
        		position: 'bottom center',
        		relativeTo: 'viewport',
        		offsetY: -60
        	},
        	thumbstrip: {
        		position: 'bottom center',
        		mode: 'horizontal',
        		relativeTo: 'viewport'
        	}
        });
      }
      /* ==================================== */

      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>


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

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