<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://rawgit.com/lhcgoncalves/bootstrap-modallery/master/src/css/bootstrap.modallery.min.css" rel='stylesheet' type='text/css' /> <div class="container"> <h2>Modallery Demo <small>click an image</small></h2> <div class="row"> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-1.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-1.jpg?raw=true" data-caption="This one has a caption" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-2.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-2.jpg?raw=true" data-caption="Here is a caption" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-3.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-3.jpg?raw=true" data-caption="This one also has a caption" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-4.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-4.jpg?raw=true" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-5.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-5.jpg?raw=true" data-caption="This one has a caption" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-6.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-6.jpg?raw=true" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-7.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-7.jpg?raw=true" data-caption="This one also has a caption" class="modallery img-responsive"> </div> <div class="col-md-3 col-sm-6"> <img src="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/sm-8.jpg?raw=true" data-to="https://github.com/lhcgoncalves/bootstrap-modallery/blob/master/img/lg-8.jpg?raw=true" class="modallery img-responsive"> </div> </div> <p><small>Contribute: https://github.com/lhcgoncalves/bootstrap-modallery</small></p> </div>

$.getScript("https://rawgit.com/lhcgoncalves/bootstrap-modallery/master/src/js/bootstrap.modallery.min.js", function(){ $(document).modallery({ title: 'The Beauty of the World', navigate: true, arrows: true, keypress: true }); });