<h3>Magnific Popup - Open custom gallery on button click</h3>

<ul>
    <li>
      <a href="#gallery-1" class="btn-gallery">Gallery 1</a>
    </li>
    <li>
      <a href="#gallery-2" class="btn-gallery">Gallery 2</a>
    </li>
    <li>
      <a href="#gallery-3" class="btn-gallery">Gallery 3</a>
    </li>
    <li>
      <a href="#gallery-4" class="btn-gallery">Gallery 4</a>
    </li>
</ul>

<div id="gallery-1" class="hidden">
  <a href="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0ebd884b4d6ac379f42146a2b26fbf2e">Image 1</a>
  <a href="https://images.unsplash.com/photo-1460499593944-39e14f96a8c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d8bc3d45d5eeaaf4f576665707f4fddb">Image 2</a>
  <a href="https://images.unsplash.com/photo-1434434319959-1f886517e1fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=218dfdd2c0735dbd6ca0f718064a748b">Image 3</a>
  <a href="https://images.unsplash.com/photo-1431576901776-e539bd916ba2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a0941b28175909ca62f096eb533b0c97">Image 4</a>
</div>

<div id="gallery-2" class="hidden">
  <a href="https://images.unsplash.com/photo-1445295029071-5151176738d0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d1b06f7f69fb043b7d35a48180c5668d">Image 1</a>
  <a href="https://images.unsplash.com/photo-1439723680580-bfd9d28ef9b6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=88b2a0312ad7711685c79139ae8f7cbe">Image 2</a>
  <a href="https://images.unsplash.com/photo-1434472007488-8d47f604f644?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=416049abdd7f2284b0651f00591ce215">Image 3</a>
  <a href="https://images.unsplash.com/photo-1450849608880-6f787542c88a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=786a67dca1d8791d181bfd90b16240d9">Image 4</a>
</div>

<div id="gallery-3" class="hidden">
  <a href="https://images.unsplash.com/photo-1446776858070-70c3d5ed6758?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9bbb8a4b7e9b0107fdb0fe52d0dbcaff">Image 1</a>
  <a href="https://images.unsplash.com/photo-1436407886995-41f8f5ee43ad?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e7d757a5f131aa2fcaa01e41757b9165">Image 2</a>
  <a href="https://images.unsplash.com/photo-1442405740009-7b57cca9d316?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=8ad0e3579b66e754924530ded828521b">Image 3</a>
  <a href="https://images.unsplash.com/photo-1430651717504-ebb9e3e6795e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f05d41e59b349313fdf09c041a768af">Image 4</a>
</div>

<div id="gallery-4" class="hidden">
  <a href="https://images.unsplash.com/photo-1446426156356-92b664d86b77?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=92e96949ac731e7cbcac943aa5934554">Image 1</a>
  <a href="https://images.unsplash.com/photo-1442037025225-e1cffaa2dc23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7fe04b68b0cb123bf568c6951c14b177">Image 2</a>
  <a href="https://images.unsplash.com/photo-1439565983992-3ee6dd957b9c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a40b5d755a0cef9c019eb22ad635c72f">Image 3</a>
  <a href="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c6665e8c83154faddeb6b9d253871486">Image 4</a>
</div>

<div class="bottom-text">
  <p>Magnific Popup on Github - <a href="https://github.com/dimsemenov/Magnific-Popup">https://github.com/dimsemenov/Magnific-Popup</a>,<br/> plugin homepage - <a href="http://dimsemenov.com/plugins/magnific-popup/">http://dimsemenov.com/plugins/magnific-popup/</a></p>
</div>

@import "compass/css3";

html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}

html {
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}
h3 {
  margin-top: 0;
  font-size: 24px;
}
a,
  a:visited {
    color: #1760BF;
    text-decoration: none;
  }
  a:hover {
    color: #c00;
  }
.links {
  ul {
    
  }
  li {
   margin-bottom: 5px; 
  }
}
h4 {
  margin: 24px 0 0 0;
}

.bottom-text {
  margin-top: 40px;
  border-top: 2px solid #e5e7e9;
  a {
    border-bottom: 1px solid #e5e7e9;
  }
  p {
   max-width: 650px; 
  }
}

.hidden {
  overflow: hidden;
  display: none;
  visibility: hidden;
}

$(document).ready(function() {

  $('a.btn-gallery').on('click', function(event) {
    event.preventDefault();
    
    var gallery = $(this).attr('href');
    
    $(gallery).magnificPopup({
      delegate: 'a',
      type:'image',
      gallery: {
        enabled: true
      }
    }).magnificPopup('open');
  });
  
});