Bootstrap Image Gallery with Isotope Filter

**Cheng** · 03-17-2015, 03:15 PM

Hi.

I'm using Bootstrap Image Gallery in my HTML5 website, but I can't figure out how to implement filtering with Isotope.

Is it even possible ?

As far as I understand, all the thumbnail links have to go into a <ul> for filtering and Bootstrap Image Gallery uses a separate <div> for each thumbnail link and a <div>.inside a <ul> is not allowed in HTML5.

Any feedback is greatly appreciated.

**Beverleyh** · 03-17-2015, 06:31 PM

a <div>.inside a <ul> is not allowed in HTML5

I don't know about the image gallery so I don't know if this helps, but you *can* nest divs inside list items in HTML5.

Code:

<ul>
<li><div>something</div></li>
</ul>

This is perfectly valid.

**Cheng** · 03-19-2015, 02:14 PM

@ beverley

Thanks for your reply.
I've got the Isotope filter working now, it was a matter of appliying the correct classes.
There is still one thing I like to achive, if a thumnail is clicked from a certain filter selection it opens the Bootstrap Image Gallery.
What I want is that while flipping through the selected gallery only images that are present for the selected filter are showing in the gallery and not all the images from all filters combined.
In Photoswipe, which is also a touch enabled gallery plugin I could separate each gallery by placing it into an individual <div>, but this is not working here.

LINK to the uploaded sample.

HTML:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Gallery Sample</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/bootstrap-image-gallery.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
  <!-- Gallery Section -->
  <section id="gallery" class="bg-light-gray">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Gallery</h2>
          <h3 class="section-subheading text-muted"></h3>
        </div>
      </div>
        <ul class="portfolio-filter">
          <li><a class="btn btn-primary active margin-5" href="#" data-filter="*">All</a></li>
          <li><a class="btn btn-primary margin-5" href="#" data-filter=".nangphaya">Blue</a></li>
          <li><a class="btn btn-primary margin-5" href="#" data-filter=".phrarod">Red</a></li>
        </ul>
    </div>
    <div class="portfolioContainer">
        <!-- Gallery Nang Phaya -->
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya001.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya001.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya002.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya002.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya003.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya003.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya004.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya004.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya005.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya005.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya006.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya006.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya007.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya007.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya008.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya008.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya009.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya009.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya010.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya010.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya011.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya011.jpg" alt=""></a> </div>
        <div class="nangphaya col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/nangphaya/nangphaya012.jpg" data-gallery title=""> <img src="img/gallery/nangphaya/thumb/nangphaya012.jpg" alt=""></a> </div>        
        <!-- Gallery Phra Rod -->
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod001.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod001.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod002.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod002.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod003.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod003.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod004.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod004.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod005.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod005.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod006.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod006.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod007.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod007.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod008.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod008.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod009.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod009.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod010.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod010.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod011.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod011.jpg" alt=""></a> </div>
        <div class="phrarod col-lg-1 col-md-1 col-sm-3 col-xs-4"> <a href="img/gallery/phrarod/phrarod012.jpg" data-gallery title=""> <img src="img/gallery/phrarod/thumb/phrarod012.jpg" alt=""></a> </div>
    </div>
    <div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false"> 
      <!-- The container for the modal slides -->
      <div class="slides"></div>
      <!-- Controls for the borderless lightbox --> 
      <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a>
      <ol class="indicator">
      </ol>
      <!-- The modal dialog, which will be used to wrap the lightbox content -->
      <div class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body next"></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left prev"> <i class="glyphicon glyphicon-chevron-left"></i> Previous </button>
              <button type="button" class="btn btn-primary next"> Next <i class="glyphicon glyphicon-chevron-right"></i> </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- jQuery --> 
  <script src="js/jquery.js"></script> 
    
  <!-- Bootstrap Core JavaScript --> 
  <script src="js/bootstrap.min.js"></script> 
  
  <!-- Plugin JavaScript --> 
  <script src="js/jquery.easing.min.js"></script> 
    
  <!-- Custom JavaScript --> 
  <script src="js/custom.js"></script> 
  
  <!-- Gallery JavaScript --> 
  <script src="js/isotope.pkgd.min.js"></script> 
  <script src="js/jquery.blueimp-gallery.min.js"></script> 
  <script src="js/bootstrap-image-gallery.min.js"></script> 
  
  <!-- Scrollbar JavaScript --> 
  <script src="js/jquery.nicescroll.min.js"></script> 
  <script src="js/nicescroll.js"></script> 
</body>
</html>

Hopefully someone can give me a hint how to accomplish this.