Magnific Image Gallery with Touch

Magnific Image Gallery with Touch

by Abid Shaik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer|IM+Fell+Great+Primer+SC|Source+Sans+Pro:300,300italic,700,700italic,400,400italic" rel="stylesheet" type="text/css">

<script id="MpGalleryTemp" type="text/x-jQuery-tmpl">
  <div data-mfp-src="${ImageURL}" class="mpGalleryItem image-link mp-gallery-thumb" title="${ImgTitle}">
    <img src="http://app3.resrc.it/C=SQ/s=w200/${ImageURL}" />
  </div>
</script>
<div class="container-fluid" id="topContainer">

</div>

CSS

body {
  font-family: "IM Fell Great Primer", "IM Fell", "Garamond", "Georgia", serif;
  -webkit-background-size: cover;
}

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.mp-gallery-thumb {
  display: inline-block;
  padding: 20px;
}


/* Magnific Popup Overwrites Start */

.mfp-image-holder .mfp-content {
  max-width: 90%;
}


/* Magnific Popup END*/

JavaScript

$(document).ready(function() {

  var mpData = [{
    "ImageURL": "http://assets.brightdoor.com/bdt/media/01-Hokuala-Kauai-Home.jpg",
    "ImgTitle": "01-Hokuala-Kauai-Home"
  }, {
    "ImageURL": "http://assets.brightdoor.com/bdt/media/Hokuala-Kauai-Experience-Island%20Adventures.jpg",
    "ImgTitle": "Hokuala-Kauai-Experience-Island Adventures"
  }, {
    "ImageURL": "http://assets.brightdoor.com/bdt/media/02-Hokuala-Kauai-Home.jpg",
    "ImgTitle": "02-Hokuala-Kauai-Home"
  }];

  $("#MpGalleryTemp").tmpl(mpData).appendTo("#topContainer");

  /*Docuemntation: http://dimsemenov.com/plugins/magnific-popup/documentation.html*/
  $('.mpGalleryItem').magnificPopup({
    type: 'image',
    closeBtnInside: true,
    mainClass: 'mfp-with-zoom mfp-img-mobile',

    image: {
      verticalFit: true,
      titleSrc: function(item) {
        var caption = item.el.attr('title');
        return caption;
      }
    },
    gallery: {
      enabled: true, // THIS enables all mpGalleryItem to a gallery
      preload: [0],
      arrowMarkup: '<button class="mfp-arrow mfp-arrow-%dir%">', // markup of an arrow button
    },
    zoom: {
      enabled: false
    },

    callbacks: {
      open: function() {},
      beforeClose: function() {}
    }

  });


  /*Hack to make magnificPopup swipable on Touch screens Sol from https://gist.github.com/thiagoeliasr/f5e546407e8db3c8b599 -- Abid*/
  (function() {
    var magnificPopup = $.magnificPopup.instance;
    console.log($("div.image-link")); 
    $("div.image-link").click(function(e) {
      setTimeout(function() {
        $(".mfp-container").swipe({
          swipeLeft: function(event, direction, distance, duration, fingerCount) {
            magnificPopup.next();
          },
          swipeRight: function(event, direction, distance, duration, fingerCount) {
            magnificPopup.prev();
          },
        });
      }, 500);
    });

  }).call(this);
});