Thumbnail Grid with Expanding Image Preview Using jQuery

A recreation of codrops' Thumbnail Grid with Expanding Preview using jQuery that allows you to create an image gallery with cool expanding image preview effect as you seen on Google Image Search.

See also:

• Google Image Search Style Photo Wall Gallery Plugin For jQuery - GI.TheWall.js

How to use it:

1. Create the Html for the thumbnail grid using Html unordered list.

<ul class="gallery-items">
  <li class="gallery-item">
    <div class="gallery-contents">
      <div class="thumbnail gallery-trigger"><img src="example/1.jpg" alt="" /></div>
      <div class="title">Gallery Item 1</div>
    </div>
    <div class="gallery-expander">
      <div class="gallery-expander-contents">
        <div class="gallery-trigger-close close">x</div>
        <div class="col">
          <div class="image"><img src="example/1.jpg" alt="" /></div>
        </div>
        <div class="col">
          <div class="title">Gallery Item 1</div>
          <div class="contents"> Content 1 </div>
        </div>
      </div>
    </div>
  </li>
  <li class="gallery-item">
    <div class="gallery-contents">
      <div class="thumbnail gallery-trigger"><img src="example/2.jpg" alt="" /></div>
      <div class="title">Gallery Item 2</div>
    </div>
    <div class="gallery-expander">
      <div class="gallery-expander-contents">
        <div class="gallery-trigger-close close">x</div>
        <div class="col">
          <div class="image"><img src="example/2.jpg" alt="" /></div>
        </div>
        <div class="col">
          <div class="title">Gallery Item 2</div>
          <div class="contents"> Content 2 </div>
        </div>
      </div>
    </div>
  </li>
  <li class="gallery-item">
    <div class="gallery-contents">
      <div class="thumbnail gallery-trigger"><img src="example/3.jpg" alt="" /></div>
      <div class="title">Gallery Item 3</div>
    </div>
    <div class="gallery-expander">
      <div class="gallery-expander-contents">
        <div class="gallery-trigger-close close">x</div>
        <div class="col">
          <div class="image"><img src="example/3.jpg" alt="" /></div>
        </div>
        <div class="col">
          <div class="title">Gallery Item 3</div>
          <div class="contents"> Content 3 </div>
        </div>
      </div>
    </div>
  </li>
</ul>

2. The required CSS styles.

.gallery-items { font-size: 0; }

.gallery-item {
  display: inline-block;
  vertical-align: top;
  -webkit-transition: height 500ms ease;
  -o-transition: height 500ms ease;
  transition: height 500ms ease;
}

.gallery-expander {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 500ms ease;
  -o-transition: max-height 500ms ease;
  transition: max-height 500ms ease;
}

.gallery-contents { position: relative; }

.gallery-contents:after {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;
  width: 0;
  height: 0;
  content: '';
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  -webkit-transition: border-bottom-width 500ms ease;
  -o-transition: border-bottom-width 500ms ease;
  transition: border-bottom-width 500ms ease;
}

.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }

body {
  font-family: 'Nanum Barun Gothic';
  font-weight: 200;
  color: #555;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.gallery-item {
  text-align: left;
  font-size: 25px;
  margin: 0 10px;
  padding: 10px 0;
}

.gallery-item .thumbnail {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item .thumbnail > img {
  position: absolute;
  top: 50%;
  margin-top: -300px;
  max-width: 300px;
}

.gallery-item .title {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

.gallery-contents:after { border-bottom-color: #F6F3ED; }

.gallery-expander { background: #F6F3ED; }

.gallery-expander-contents {
  margin: 0 auto;
  width: 1000px;
  padding: 20px 0;
}

@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents { width: 640px; }
}

@media (max-width: 639px) {

.gallery-expander-contents { width: 100%; }
}

.gallery-expander-contents:after {
  clear: both;
  display: table;
  content: '';
}

.gallery-expander-contents > div.col {
  float: left;
  width: 480px;
}

@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents > div.col { width: 310px; }
}

@media (max-width: 639px) {

.gallery-expander-contents > div.col {
  float: none;
  padding: 25px 20px 0;
  width: auto;
}

}

.gallery-expander-contents > div.col + div.col { margin-left: 40px; }

@media (min-width: 640px) and (max-width: 999px) {

.gallery-expander-contents > div.col + div.col { margin-left: 20px; }

}

@media (max-width: 639px) {

.gallery-expander-contents > div.col + div.col { margin-left: 0px; }

}

.gallery-expander-contents div.close {
  position: absolute;
  top: 10px;
  right: 20px;
}

.gallery-expander-contents div.title {
  font-weight: 500;
  color: #D28A3C;
}

.gallery-expander-contents div.contents {
  margin-top: 10px;
  border-top: 1px solid #BCB098;
  border-bottom: 1px solid #BCB098;
  padding: 10px 0;
  font-size: 14px;
  line-height: 24px;
  color: #797262;
}

.gallery-expander-contents div.image > img {
  width: 100%;
  display: block;
}

3. Include jQuery library and the jQuery ImageListExpander plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="js/jquery.imagelistexpander.js"></script> 

4. Initialize the thumbnail grid.

(function(global, $){
  $('.gallery-items').imagelistexpander({
    prefix: "gallery-"
  });
})(this, jQuery)

---

This awesome jQuery plugin is developed by tastelab-kr. For more Advanced Usages, please check the demo page or visit the official website.