Enlarge thumbnail (Photo Gallery)

Enlarge thumbnail (Photo Gallery).markdown

Enlarge thumbnail (Photo Gallery) ('-' * 33)

A Pen by Ry Arush on CodePen.

License.

index.html

<div style="position:relative;">
  <ul id="image-gallery">
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide1.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide2.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide3.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide4.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide5.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide6.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide7.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/bg1-slide22.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/b2-slide22.jpg" /></li>
    <li><img src="http://fluence.com.my/wp-content/uploads/2015/04/olm.jpg" /></li>
  </ul>
</div>

script.js

var gal = {
  init: function() {
    if (!document.getElementById || !document.createElement || !document.appendChild) return false;
    if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
    var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
    li[0].className = 'active';
    for (i = 0; i < li.length; i++) {
      li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
      li[i].title = li[i].getElementsByTagName('img')[0].alt;
      gal.addEvent(li[i], 'click', function() {
        var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
        for (j = 0; j < im.length; j++) {
          im[j].className = '';
        }
        this.className = 'active';
        document.getElementById('gallery-caption').innerHTML = this.title;
      });
    }
  },
  addEvent: function(obj, type, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function() {
        obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
gal.addEvent(window, 'load', function() {
  gal.init();
});

style.css

#image-gallery {
  display: none;
}

#jquery-gallery {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

#jquery-gallery li {
  width: 104px;
  height: 100px;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-right: 10px;
  border: 3px solid #fff;
  outline: 1px solid #E3E3E3;
  margin-bottom: 10px;
  opacity: .5;
  filter: alpha(opacity=50);
  float: left;
  display: block;
}

#jquery-gallery li img {
  position: absolute;
  top: 100px;
  left: 0px;
  display: none;
}

#jquery-gallery li.active img {
  display: block;
  border: 3px solid #fff;
  outline: 1px solid #E3E3E3;
  width: 100%;
  height: auto;
}

#jquery-gallery li.active,
#jquery-gallery li:hover {
  outline-color: #DFDFDF;
  opacity: .99;
  filter: alpha(opacity=99);
}