Mixitup Filter with Modal

Applying a modal to filtered content with Bootstrap and Mixitup

by sambolina17

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://demos.kunkalabs.com/mixitup/mixitup.min.js"></script>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h2 class="text-center">Filter Example with Modals</h2>
      </div>
    </div>
    <hr>
  </div>


  <div class="container">
    <div class="col-lg-12">
      <div class="controls text-center">
        <button type="button" class="control btn btn-filter" data-filter="all">All</button>
        <button type="button" class="control btn btn-filter" data-toggle=".green">Green</button>
        <button type="button" class="control btn btn-filter" data-toggle=".yellow">Yellow</button>
        <button type="button" class="control btn btn-filter" data-toggle=".purple">Purple</button>
        <button type="button" class="control btn btn-filter" data-toggle=".pink">Pink</button>
        <button type="button" class="control btn btn-filter" data-toggle=".blue">Blue</button>
        <button type="button" class="control btn btn-filter" data-toggle=".orange">Orange</button>
      </div>
      <hr>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="mixitupContainer">
          <div class="col-lg-4 col-md-6 col-sm-6 mix all">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Y,Pu,Pi,B,O" class="img-responsive center-block">
            </a>
          </div>
          <div class="col-lg-4 col-md-6 col-sm-6 mix green pink orange">
            <a data-toggle="modal" data-target=".gif-1-modal">
              <img src="http://placehold.it/500x500?text=G,Pi,O" class="img-responsive center-block">
         ...

CSS

.mix img {
  margin-bottom: 30px;
}
.mixitup-control-active {
  background: #888;
}

JavaScript

var containerEl = document.querySelector('.mixitupContainer');

var mixer = mixitup(containerEl, {
  controls: {
    toggleLogic: 'and'
  },

  animation: {
    effects: 'fade',
    duration: 200,
    nudge: false,
    reverseOut: false
  }
});