Magnific Popup + Animate.css

index.html

<h1>magnific-popup.js + animate.css</h1>
<p>Responsive lightbox on drugs.</p>
<ul>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeIn">fadeIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInDown">fadeInDown</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInDownBig">fadeInDownBig</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInLeft">fadeInLeft</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInRight">fadeInRight</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="fadeInUp">fadeInUp</a></li>
  
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="flip">flip</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="flipInX">flipInX</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="flipInY">flipInY</a></li>
  
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="lightSpeedIn">lightSpeedIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="pulse">pulse</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rubberBand">rubberBand</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="shake">shake</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="tada">tada</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="wobble">wobble</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="swing">swing</a></li>
  
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="bounceIn">bounceIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="bounceInDown">bounceInDown</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="bounceInLeft">bounceInLeft</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="bounceInRight">bounceInRight</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="bounceInUp">bounceInUp</a></li>
 
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rollIn">rollIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="zoomIn">zoomIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="zoomInDown">zoomInDown</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="zoomInLeft">zoomInLeft</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="zoomInRight">zoomInRight</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="zoomInUp">zoomInUp</a></li>
  
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rotateIn">rotateIn</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rotateInDownLeft">rotateInDownLeft</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rotateInDownRight">rotateInDownRight</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rotateInUpLeft">rotateInUpLeft</a></li>
  <li><a href="http://placehold.it/600x600" class="btn popup-link" data-effect="rotateInUpLeft">rotateInUpRight</a></li>
  
</ul>

Magnific-Popup-+-Animate.css.markdown

Magnific Popup + Animate.css

Fast, mobile-friendly and responsive lightbox with CSS3 animations.

A Pen by Andrzej Dubiel on CodePen.

License.

script.js

$(document).ready(function() {

  $('.popup-link').magnificPopup({ 
    removalDelay: 300,
    type: 'image',
    callbacks: {
    beforeOpen: function() {
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure animated ' + this.st.el.attr('data-effect'));
    }
  },
  });

});

style.scss

$primary-color: #913D88;

body {
  background: $primary-color;
  font-family: 'Open Sans', sans-serif;
  color:#fff;
  text-align:center;
  font-weight:300;
}

h1 {
  margin-bottom:0;
}

p {
  margin:0;
  color: lighten($primary-color, 25%);
}

ul {
  list-style-type: none;
  margin:20px 0;
}

li {
  margin-bottom:10px;
  display:inline;
}

.mfp-figure figure {
  margin:0;
}

.btn {
  color: lighten($primary-color, 25%);
  display:inline;
  padding: 10px 20px;
  background: darken($primary-color, 10%);
  text-decoration:none;
  border-radius:3px;
   transition: all 0.3s ease-in-out;
  line-height:50px;
  box-shadow: 0px 3px 0px 0px darken($primary-color, 15%);
  
  &:hover {
    color: lighten($primary-color, 40%);
    box-shadow: 0px 1px 0px 0px darken($primary-color, 15%);
    background: darken($primary-color, 8%);
  }
  
  &:active, &:focus {
    -webkit-appearance: none;
		outline:none;
  }

}