Gyancode

A free library of HTML, CSS, JS

Search This Blog

Wednesday 16 November 2016

Quick Responsive Photo Gallery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>Quick photo Gallery</title>
  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="modernizr.js"></script>
</head>
<body>

        
<div class="provider_content shadow margin">
          <div class="m-p-g">
              <h3 class="title">Photos</h3>
              <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
                  <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
                  <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
              </div>
              <div class="m-p-g__fullscreen"></div>
          </div>

      </div>
        <script src="jquery.poptrox.min.js"></script>
<script>
var elem = document.querySelector('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
var gallery = new MaterialPhotoGallery(elem);
});
</script>
</body>
</html>
DONWLOAD

No comments :

Post a Comment