javascript - Bootstrap Image Gallery with MixItUp Filtering -
i'm using bootstrap image gallery plugin mixitup filtering. image gallery contains on 150 images , want if thumbnail of selected filter clicked cycle through images selected filter , not images in gallery. tried create div each filter it's not working. each filter wrapped in div javascript work, don't know how. here html & js of stripped down sample , link see online:
html
<!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 , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view 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> <div class="controls"> <ul class="portfolio-filter"> <li class="btn btn-primary active margin-5 filter" data-filter="all">all</li> <li class="btn btn-primary margin-5 filter" data-filter=".nangphaya">nang phaya</li> <li class="btn btn-primary margin-5 filter" data-filter=".phrarod">phra rod</li> </ul> </div> <div class="container-fluid galleries"> <!-- gallery nang phaya --> <div class="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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="mix 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> <div id="blueimp-gallery" class="blueimp-gallery" data-use-bootstrap-modal="false"> <!-- container modal slides --> <div class="slides"></div> <!-- controls borderless lightbox --> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"> </ol> <!-- modal dialog, used wrap 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">×</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/jquery.mixitup.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> js
// mixitup $(function(){ $('.galleries').mixitup({ load: { } }); }); any appreciated,
Comments
Post a Comment