Sexy LightBox

index.html

<section id="thumbsList">
  <h3>New Zealand 2015</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet facere voluptas vel ipsam vero, cum voluptatum molestiae eos at nemo eum corrupti a maiores perspiciatis quod expedita, minus placeat, eius!</p>
  <ul>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_12.png" alt="" /></li>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_71.png" alt="" /></li>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_9.png" alt="" /></li>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_11.png" alt="" /></li>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Social.jpg" alt=""/></li>
    <li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/38.png" alt=""/></li>
  </ul>
</section>

<div id="lightBox">
  <img id="lightBoxImage" src="" alt="" />
  <div id="prevImg"><span></span></div>
  <div id="nextImg"><span></span></div>
  <div id="closeLightbox-button"></div>
</div>

script.js

window.onload = function() {
  
  var thumbsList = document.getElementById("thumbsList");  
  var allLIs = thumbsList.getElementsByTagName("li");  
  var allImages = thumbsList.getElementsByTagName("img");
  
  var TheLightBox = document.getElementById("lightBox");
  var ThelightBoxImage = document.getElementById("lightBoxImage");
  
  var prevImg = document.getElementById("prevImg");
  var nextImg = document.getElementById("nextImg");
  
  var numberOfImages = allLIs.length;  
  var counter = 0;
  var currentImage = counter;
  
  function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
  }

  function addClass(el, className) {
    if (el.classList)
      el.classList.add(className)
    else if (!hasClass(el, className)) el.className += " " + className
  }

  function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className)
    else if (hasClass(el, className)) {
      var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
      el.className=el.className.replace(reg, ' ')
    }
  }
  
  ThelightBoxImage.setAttribute("src", (allImages[0].getAttribute("src")));
  
  function loadImageInLightBox(URL, callback){
    var url = URL;
    ThelightBoxImage.setAttribute("src", url);    
    if(typeof callback == "function"){
      callback();
    }   
  }
  
  function loadLightBox(){
    addClass(TheLightBox, "lightBox-active");
    addClass(ThelightBoxImage, "active-image");
  }
  
  function unloadLightBox(){
    removeClass(TheLightBox, "lightBox-active");
    removeClass(ThelightBoxImage, "active-image");
  }
  
  function prevImage(){
    if(counter <= 0){
      counter = numberOfImages;
    }
    counter--;
    loadImageInLightBox(allImages[counter].getAttribute("src"));
  }
  
  function nextImage(){
    counter++;
    if(counter == numberOfImages){
      counter = 0;
    }
    loadImageInLightBox(allImages[counter].getAttribute("src"));
  }
  
  document.getElementById("lightBox").addEventListener("click", function(e){
    switch (e.target.id) {
      case "prevImg":
        prevImage();
        break;
      case "nextImg":
        nextImage();
        break;
      case "lightBoxImage":
        break;
      default:
        unloadLightBox();
    }
      
  })

  for (var i=0; i < allImages.length; i++){
    allImages[i].setAttribute("id", "thumb_" + i);
    allImages[i].addEventListener("click",
      function (e){
        var theIndex =  e.target.id.match(/\d+/)[0];
        counter = theIndex;
        loadImageInLightBox(e.target.getAttribute("src"), function(){
          loadLightBox(e.target.getAttribute("src"));
        }); 
      }
    );
  }
  
}

Sexy LightBox .markdown

Sexy LightBox

Some experiment with sexy FX

A Pen by Erick Jones on CodePen.

License.

style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

$buttonWidth: 50px;
$primaryColor: #222222;
$secondaryColor: #E60000;

body {
  background-color: $primaryColor;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  color: #666;
  
}

#thumbsList {
  overflow: hidden;
  display: block;
  margin: 50px auto;
  width: 90%;
  max-width: 1000px;
  background: #eaeaea;
  border: 1px solid #CCC;
  
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  
  padding: 20px;
}

#thumbsList h3 {
  margin-bottom: .5em;
  font-size: 2.3em;
  color: #333;
}

#thumbsList p {
  font-size: 1em;
  margin-bottom: 1em;
}

#thumbsList ul {
  list-style-type: none;
  padding: 0;
}

#thumbsList ul li {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  width: 33.3%;
  height: 200px;
  float: left;
  background-color: #000;
}

#thumbsList ul li img {
  position: relative;
  display: block;
  max-width: 100%;
  
  transition: all 0.3s linear;
}

#thumbsList ul li img:hover {
  opacity: 0.5;
  
  -webkit-transform: scale(2) rotate(30deg); /* Safari */
  -ms-transform: scale(2) rotate(30deg); /* IE 9 */
  transform: scale(2) rotate(30deg); /* Standard syntax */
  
  transition: transform 10s ease, opacity 1s ease;
} 

#lightBox {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.8);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
}

.lightBox-active {
  display: block !important;
  opacity: 1 !important;
  top: 0 !important;
  bottom: 0 !important;
  
  transition: all 0.5s ease;
}

#prevImg {
  position: absolute;
  top: 50%;
  margin-top: -($buttonWidth/2);
  width: $buttonWidth;
  height: $buttonWidth;
  cursor: pointer;
  background-color: $secondaryColor;
  
  transition: all 0.3s ease;
}
#prevImg:hover, #nextImg:hover {
  background-color: #B30000;
  
  transition: all 0.3s ease;
}

#prevImg:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 8px;
  margin-top: 13px;
  margin-left: 20px;
  border-left: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  transform: rotate(45deg);
}

#nextImg {
  @extend #prevImg;
  right: 0;
  
}
#nextImg:after {
  margin-left: 8px;
  transform: rotate(225deg);
}

#closeLightbox-button {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #B30000;
  width: $buttonWidth;
  height: $buttonWidth;
  
  transition: all 0.7s ease;
}

#closeLightbox-button:hover {
  background-color: red;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}

#closeLightbox-button:before {
  content: "";
  display: block;
  position: relative;
  width: 2px;
  height: 25px;
  background-color: white;
  left: 23px;
  top: 12px;
  
  -ms-transform: rotate(40deg); /* IE 9 */
  -webkit-transform: rotate(40deg); /* Safari */
  transform: rotate(40deg);
}
#closeLightbox-button:after {
  content: "";
  display: block;
  position: relative;
  width: 2px;
  height: 25px;
  background-color: white;
  left: 23px;
  top: -13px;
  
  -ms-transform: rotate(-40deg); /* IE 9 */
  -webkit-transform: rotate(-40deg); /* Safari */
  transform: rotate(-40deg);
}

#lightBox img {
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.active-image {
  max-width: 90% !important;
  max-height: 100% !important;
  
  transition: all .5s ease !important;
}

@media (max-width: 1000px) {
  #thumbsList ul li {
    position: relative;
    width: 50%;
  }
}

@media (max-width: 680px) {
  #thumbsList ul li {
    position: relative;
    width: 100%;
  }
}