CodePen Embed - Image Mosaic Gallery + Fotorama

<section class="section-gallery">
  <div class="container">
    <p>&gt; Clique na imagem para maior detalhe, ou <a href="#" class="switch">clique aqui</a> para visualizar toda a galeria</p>
  </div>
  <div class="container-fluid">
    <div class="img-grid-gallery">
      <div class="img-grid-item bytwo">
    <div>
          <a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
    </div><div>
          <a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a></div>
      </div>
      <div class="img-grid-item byone">
<div>
          <a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a></div>
      </div>
      <div class="img-grid-item byfour">
        <div class="img-grid-inner">
          <div class="large">
            <a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
          </div>
          <div class="small">
            <a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
          </div>
        </div>
        <div class="img-grid-inner">
          <div class="small">
            <a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
          </div>
          <div class="large">
            <a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
          </div>
        </div>
      </div>
    </div>
	
    <div class="fotorama-thumbs" data-auto="false" data-allow-full-screen="true" data-nav="thumbs">
      <a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=8"><img src="https://dummyimage.com/198x349/574357/fff&text=8" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=9"><img src="https://dummyimage.com/198x349/574357/fff&text=9" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=10"><img src="https://dummyimage.com/467x349/574357/fff&text=10" width="467" height="349" /></a>
    </div>

  </div>
</section>

<section class="section-gallery">
  <div class="container">
    <p>&gt; Clique na imagem para maior detalhe, ou <a href="#" class="switch">clique aqui</a> para visualizar toda a galeria</p>
  </div>
  <div class="container-fluid">
    <div class="img-grid-gallery">
   
      <div class="img-grid-item byfour">
        <div class="img-grid-inner">
          <div class="large">
            <a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
          </div>
          <div class="small">
            <a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
          </div>
        </div>
        <div class="img-grid-inner">
          <div class="small">
            <a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
          </div>
          <div class="large">
            <a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
          </div>
        </div>
      </div>
      <div class="img-grid-item byone">
<div>
          <a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a></div>
      </div>
         <div class="img-grid-item bytwo">
    <div>
          <a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
    </div><div>
          <a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a></div>
      </div>
    </div>
	
    <div class="fotorama-thumbs" data-auto="false" data-allow-full-screen="true" data-nav="thumbs">
      <a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=8"><img src="https://dummyimage.com/198x349/574357/fff&text=8" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=9"><img src="https://dummyimage.com/198x349/574357/fff&text=9" width="198" height="349" /></a>
      <a href="https://dummyimage.com/1080x810/574357/fff&text=10"><img src="https://dummyimage.com/467x349/574357/fff&text=10" width="467" height="349" /></a>
    </div>

  </div>
</section>

.section-gallery{ padding-top:30px;}
.section-gallery .fotorama-thumbs {
 
  display: none;
}

.img-grid-gallery {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1840px;
  margin: 0 auto;
}

.img-grid-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.img-grid-item.bytwo {
  -webkit-box-flex: 0;
  -ms-flex: 0 25.64457%;
  flex: 0 25.64457%;
  min-width: 0;
}

.img-grid-item.byone {
  -webkit-box-flex: 0;
  -ms-flex: 0 33.52500%;
  flex: 0 33.52500%;
  min-width: 0;
}

.img-grid-item.byfour {
  -webkit-box-flex: 0;
  -ms-flex: 0 37.35218%;
  flex: 0 37.35218%;
  min-width: 0;
}

.img-grid-inner {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.img-grid-inner > .large {
  width: 67.00143%;
}

.img-grid-inner > .small {
  width: 28.40746%;
}

.img-grid-item img {
  max-width: 100%;
  height: auto;
}

.img-grid-item a {
  display: inline-block;
  position: relative;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 24px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

.img-grid-item a::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(216, 216, 216, 0.65);
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  content: " ";
  display: block;
  opacity: 0;
  z-index: 1;
}

.img-grid-item a::after {
  content: "\f00e";
  color: #1d1d1b;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.img-grid-item a:hover::after,
.img-grid-item a:hover::before {
  opacity: 1;
}

@media only screen and (min-width: 768px) {
  .img-grid-item a {
    font-size: 48px;
  }
}

.fotorama--fullscreen,
.fotorama-overlay {
  background-color: rgba(29, 29, 27, 0.9);
}

.fullscreen,
.fotorama--fullscreen .fotorama__stage,
.fotorama--fullscreen .fotorama__nav{
  background-color:transparent;
}
/* straight “close” icon instead of “cancel fullscreen” */

.fotorama--fullscreen .fotorama__fullscreen-icon {
  background-position: -64px 0;
}

 $(function () {

    // overlay for smoother fullscreen enter
    var $overlay = $('<div class="fotorama-overlay"></div>')
        .css({position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, zIndex: 10001})
        .fadeTo(0, 0)
        .hide()
        .appendTo('body');

    // take all .fotorama blocks
    $('.section-gallery').each(function () {
      var $gallery = $(this),

          // clone it and make fotorama
          $fotorama = $('.fotorama-thumbs', $gallery)
              .clone()
              //.show()
              .css({position: 'absolute', left: -99999, top: -99999})
              .appendTo('body')
              .fadeTo(0, 0)
              .fotorama(),
          fotorama = $fotorama.data('fotorama');

      for (var _i = 0, _l = fotorama.data.length; _i < _l; _i++) {
        // prepare id to use in fotorama.show()
        fotorama.data[_i].id = fotorama.data[_i].img;
      }

      // bind clicks
      $gallery.on('click', 'a', function (e) {
        e.preventDefault();

        var $this = $(this);

        $overlay
            .show()
            .stop()
            .fadeTo(150, 1, function () {
              $fotorama.stop().fadeTo(150, 1);

              // API calls
              fotorama
                  // show needed frame
                  .show({index: $this.attr('href'), time: 0})
                  // open fullscreen
                  .requestFullScreen();
            });
      });

      $fotorama.on('fotorama:fullscreenexit', function () {
        $fotorama.stop().fadeTo(0, 0);
        $overlay.stop().fadeTo(300, 0, function () {
          $overlay.hide();
        });
      });
    });

  });

This Pen is owned by Pedro Costa on CodePen.

See more by @pnmcosta on CodePen

External CSS

External JavaScript