Material Box

Click on the picture below



<img class="materialboxed responsive-img" width="650" src="img/example.jpg">

Caption

Click on the picture below

        <img class="materialboxed responsive-img" width="650" data-caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit." src="img/example.jpg">

LightBox Gallery 



 <!-- MaterialBox Gallery -->
<div class="row text-center">
    <div class="col-md-12 no-gutter">
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-1.jpg">
        </div>
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-2.jpg">
        </div>
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-3.jpg">
        </div>
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-4.jpg">
        </div>
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-5.jpg">
        </div>
        <div class="col-md-4 portfolio-item">
            <img class="materialboxed center-block responsive-img animated zoomIn" src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-6.jpg">
        </div>
    </div>
    <br>
    <!-- Pagination -->
    <ul class="pagination pag-circle">
        <li><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>
    <!-- /.row -->
</div>
<!-- MaterialBox Gallery -->
$(document).ready(function(){ $('.materialboxed').materialbox(); });