A Pen by Chris Hutchinson

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Hutchinson</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<script id="overlay-template" type="text/x-handlebars-template">
  <img src="{{image}}" />
  <figcaption>
    {{{captionHtml}}}
  </figcaption>
</script>  
<ul class="gallery gallery--mosaic gallery--mosaic--three-columns">
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://www.placehold.it/1000x1000" />
      <figcaption>
        <p>This is the caption for this image</p>
        <cite>Citation</cite>
      </figcaption>
    </figure>
  </li>
</ul>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/a-pen-by-chris-hutchinson-bVgXEm */
*, *:before, *:after {
  box-sizing: border-box;
}

ul.gallery {
  margin: 0;
  padding: 0;
}
ul.gallery.gallery--mosaic {
  letter-spacing: -4px;
  list-style-type: none;
  line-height: 0em;
  position: relative;
}
ul.gallery.gallery--mosaic .gallery-fullsize {
  -webkit-transition: all 0.2s ease;
  opacity: 0;
  letter-spacing: normal;
  line-height: 1em;
}
ul.gallery.gallery--mosaic .gallery-fullsize.open {
  width: 90% !important;
  height: 90% !important;
  top: 5% !important;
  left: 5% !important;
  opacity: 1;
}
ul.gallery.gallery--mosaic .gallery-fullsize img {
  display: block;
}
ul.gallery.gallery--mosaic .gallery-fullsize figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #FFFFFF;
  width: 100%;
  overflow: hidden;
  padding: 8px 10px;
}
ul.gallery.gallery--mosaic .gallery-fullsize img {
  max-width: 100%;
}
ul.gallery.gallery--mosaic li {
  line-height: 1em;
  opacity: 0.8;
  letter-spacing: normal;
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  vertical-align: top;
}
ul.gallery.gallery--mosaic li.open {
  opacity: 0.5;
}
ul.gallery.gallery--mosaic li figure {
  margin: 0;
  padding: 0;
}
ul.gallery.gallery--mosaic li figure img {
  max-width: 100%;
}
ul.gallery.gallery--mosaic li figure figcaption {
  display: none;
}
ul.gallery.gallery--mosaic.gallery--mosaic--four-columns li {
  width: calc(25% - 0.375em);
}
ul.gallery.gallery--mosaic.gallery--mosaic--four-columns li:nth-of-type(4n) {
  margin: 0 0 0.5em;
}
ul.gallery.gallery--mosaic.gallery--mosaic--three-columns li {
  width: calc(33% - 0.22em);
}
ul.gallery.gallery--mosaic.gallery--mosaic--three-columns li:nth-of-type(3n) {
  margin: 0 0 0.5em;
}
ul.gallery.gallery--mosaic.gallery--mosaic--three-columns li:last-of-type:nth-of-type(1n) {
  width: 100%;
}
ul.gallery.gallery--mosaic.gallery--mosaic--three-columns li:last-of-type:nth-of-type(2n) {
  width: calc(66%);
  margin: 0 0 1em;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/a-pen-by-chris-hutchinson-bVgXEm */
(function($) {
  var $gallery = $('.gallery--mosaic');
  
  $.fn.mosaicGallery = function() {
    
    var plugin = {
      
      init: function(elem) {
        var self = this;
        
        this.$elem = elem;
        this.$items = this.$elem.find('li');
        
        this.drawItems();
        
        $(window).on('resize', function() {
          self.drawItems();
        });
      },
      
      drawItems: function() {
        var self = this;
        
        $.each(this.$items, function(i, el) {
          var $firstItem = $(self.$items[0]);
          var $item = $(el);
          var $img = $item.find('img');
          $img.hide();
          $item.css('height', $firstItem.outerWidth());
          $item.css({
            backgroundImage: 'url("' + $img.attr('src') + '")',
            backgroundSize: 'cover',
            backgroundPosition: 'center'
          });
          
          $item.on('click', function() {
             self.openItem($item);
          });
        }); 
      },
      
      openItem: function(item) {
        var self = this;
        
        var $item = $(item);
        var $img = $item.find('img');
        var $figCaption = $item.find('figcaption');
        var $open = this.$elem.find('.gallery-fullsize.open');
        $open.removeClass('open');
        
        setTimeout(function() {
          $open.remove();
        }, 200);
        
        var $overlay = $('<div>', {
          class: 'gallery-fullsize'
        });
        
        var overlaySource = $('#overlay-template').html();
        var overlayTemplate = Handlebars.compile(overlaySource);
        var overlayHtml = overlayTemplate({
          image: $img.attr('src'),
          captionHtml: $figCaption.html(),
        });
        $overlay.css({
          position: 'absolute',
          top: $item.position().top,
          left: $item.position().left,
          width: $item.outerWidth(),
          height: $item.outerHeight()
        })
          .on('click', function() {
            var $this = $(this);  
            $this.removeClass('open');
            setTimeout(function() {
              $this.remove();
            }, 200);
          })
          .html(overlayHtml);
        
          this.$elem.append($overlay);
          
          setTimeout(function() {
            $overlay.addClass('open');
          }, 10);
         
      }
      
    };
    
    plugin.init(this);
    
  };
  
  $gallery.mosaicGallery();
})(jQuery);

Comments