Untitled

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <title>Демо адаптивной галереи изображений</title>
  <link rel="stylesheet" href="fancybox-master/dist/jquery.fancybox.css" type="text/css" media="screen" />
  <style>
    .thumb img {
      filter: none; /* IE6-9 */
      -webkit-filter: grayscale(0);
      border-radius:5px;
      background-color: #fff;
      border: 1px solid #ddd;
      padding:5px;
    }
    .thumb img:hover {
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(1);
    }
    .thumb {
      padding:5px;
    }
    .margin {
    	margin-top: 50px;
    }
  </style>
</head>
<body>
	<div class="row">
			<div class="col-lg-4"></div>
			<div class="col-lg-4">
				<a href="index.html">Главная</a>
				<a href="gallery.html">Галерея</a>
				<a href="comments.html">Комментарии</a>
			<div class="col-lg-4"></div>
		</div>
	  <div class="container margin">
	    <div class="row">
	      <div class="col-md-3 col-sm-4 col-xs-6 thumb">
	        <a class="fancyimage" data-fancybox-group="group" href="Images/1.jpg">
	          <img class="img-responsive" src="Images/thumbnails/1min.png">
	        </a>
	      </div>
	      <div class="col-md-3 col-sm-4 col-xs-6 thumb">
	        <a class="fancyimage" data-fancybox-group="group" href="Images/2.jpg">
	          <img class="img-responsive" src="Images/thumbnails/2min.png">
	        </a>
	      </div>
	      <div class="col-md-3 col-sm-4 col-xs-6 thumb">
	        <a class="fancyimage" data-fancybox-group="group" href="Images/3.jpg">
	          <img class="img-responsive" src="Images/thumbnails/3min.png">
	        </a>
	      </div>
	    </div>
	  </div>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
   <script type="text/javascript" src="fancybox-master/dist/jquery.fancybox.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
      $("a.fancyimage").fancybox();
    });
   </script>
</body>
</html>