try:製作image gallery

by cactus77kiki

HTML

<!--try: different size thumbnail test-->
<body>


<div class="album-thumbnails">
  <a href="#" class="image-container">
    <img src="https://lh3.googleusercontent.com/-QmnzEDQzVKk/WY1bbQS4_jE/AAAAAAAAVWk/rUi0oKXPEu0bxLkSAn7MUcbK-BQp7qdxgCHMYCg/s240/6452914364880584241">
  </a>
  <a href="#" class="image-container">
    <img src="https://lh3.googleusercontent.com/-n2LmFYh07jI/WHSMS9i_C7E/AAAAAAAAUnk/KAXt1U2ghl8jYl5bj399_FcXTvUT4J8zwCHMYCg/s240/6373873630022929329">
  </a>
  <a href="#" class="image-container">
    <img src="https://lh3.googleusercontent.com/-xQPciO2lFcM/WMvs7yI_X3E/AAAAAAAAVOM/2kgucPyhucEsU2a9m7nl1Nk6r2L7_3HXACHMYCg/s240/6398468207425838961">
  </a>
  <a href="#" class="image-container">
    <img src="https://lh3.googleusercontent.com/-0XLDEQQNPKo/VAsR3oKnnZE/AAAAAAAATI4/YqSUU6UN140yCYPgkq0vO6fbrBZV-PbpQCHMYCg/s240/6055953771302198673">
  </a>
  <a href="#" class="image-container">
    <img src="https://lh3.googleusercontent.com/-L6CyTFlPZJ8/VA7XTv34D5E/AAAAAAAAVWk/rjUarpmFZbguepoCMvdPFM8P7puDcCEYACHMYCg/s240/6057015283128209297">
  </a>
  
  
</div>

</body>

CSS

body{ max-width:1000px; min-width:300px;}
.album-thumbnails a {
  /* set the desired width/height and margin here */
  width: 14%;
  height: 88px;
  margin-right: 1px;

  position: relative;
  overflow: hidden;
  display: inline-block;
}
.album-thumbnails a img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.album-thumbnails a img.portrait {
  width: 100%;
  height: auto;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 

  var addImageOrientationClass = function(img) {
    if(img.naturalHeight > img.naturalWidth) {
      img.classList.add("portrait");
    }
  }

  // Add "portrait" class to thumbnail images that are portrait orientation
  var images = document.querySelectorAll(".album-thumbnails img");
  for(var i=0; i<images.length; i++) {
    if(images[i].complete) {
      addImageOrientationClass(images[i]);
    } else {
      images[i].addEventListener("load", function(evt) {
        addImageOrientationClass(evt.target);
      });
    }
  }

});