Gyancode

A free library of HTML, CSS, JS

Search This Blog

Showing posts with label responsive full screen gallery. Show all posts
Showing posts with label responsive full screen gallery. Show all posts

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