Lightbox portfolio thing

In this example below you will see how to do a Lightbox portfolio thing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by q51, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright q51 ©
  • HTML
  • CSS
  • JavaScript
    .lightbox
  .lightbox-cover
  .lightbox-controls
    %a.close
    %a.prev
    %a.next
  .item-container
    .item.closed
      .item-caption
        <span>Item 1</span>
      .item-image
        <img src="http://lorempixel.com/300/300/abstract/9"></img>
      .item-title
        Img 1
      .item-stats
        <p>2002, Painting</p>
      .item-desc
        <p>This is the description</p>
  .item-container
    .item.closed
      .item-image
      <img src="http://lorempixel.com/300/300/abstract/8"></img>
      .item-text
      
      
      

/*Downloaded from https://www.codeseek.co/q51/lightbox-portfolio-thing-wjVzzg */
    //globals
$item-size: 300px
$item-padding: 30px
$color: yellow

//HTML margin must be set to 0 for offset to work as expected
html
  margin: 0

.lightbox
  width: 100%
  text-align: center
  
.item,
.item-container
  width: $item-size
  height: $item-size
  border-radius: 50%
  display: inline-block
  overflow: hidden

.item-container
  margin: $item-padding
  position: relative

.item
  position: absolute
  left: 0
  background-color: $color
  transition: border-radius 0.1s ease-out 1s, box-shadow 0.1s ease-out 1s
  
.item.open
  border-radius: 0px
  box-shadow: 0px 0px 50px rgba(0,0,0,0.5)
  z-index: 2
  
.item .item-caption
  height: 100%
  vertical-align: middle
  &.span
    height: 100%
    vertical-align: middle
  &:before
    content: ''
    height: 100%
    display: inline-block
  
.item
  &:hover
    .item-caption
    
.lightbox-cover
  transition: opacity 0.5s
  opacity: 0
  pointer-events: none
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  background-color: rgba(0,0,0,0.25)
.lightbox-cover.active
  z-index: 1
  opacity: 1
  pointer-events: all


/*Downloaded from https://www.codeseek.co/q51/lightbox-portfolio-thing-wjVzzg */
    //find the middle of the viewport
var vw = $(window).width();
var vh = $(window).height();
//refresh on resize
$(window).resize(function(){
  vw = $(window).width();
  vh = $(window).height();
});
//set some vars to store original position when we need them. This could also be done with .data()... Hmm
// var originalPosV = 0;
// var originalPosH = 0;

//Activate on click
$('.item-container').on('click', '.closed', function(){
//find the current position relative to the document, so we can switch it to fixed positioning (for the next step);
  var windowOffset = $(window).scrollTop();
  var offset = $(this).parent().offset();
  var originalPosV = (offset.top - windowOffset);
  var originalPosH = offset.left;
  //Store it as data
  $(this).data('originalPos', {'H': originalPosH, 'V': originalPosV});
    //console.log($(this).data('originalPosH'));
  //animate it into the center of the window
  $(this).css({
    'position': 'fixed',
    'top': originalPosV,
    'left': originalPosH
  });
  $(this)
  .animate({
    'left': (vw/2) - ($(this).width()/2),
    'top': (vh/2) - ($(this).height()/2)
  }, {
    duration: 750, 
    easing: 'easeOutElastic'
  })
  .animate({
    'scale': 0.6,
    'top': (vh/2) - ($(this).height()/2)
  }, {
    duration: 750, 
    easing: 'easeOutElastic'
  })
  .addClass('open').removeClass('closed');
  $('.lightbox-cover').addClass('active');
  $('.lightbox-controls').addClass('active');
});
var closeLightbox = function(){
  $('.lightbox-cover').removeClass('active');
//console.log($('.lightbox').find('.item.open').data('originalPosH'));
  var openItem = $('.lightbox').find('.item.open');
  $(openItem)
  .animate({
    'left': openItem.data('originalPos').H,
    'top': openItem.data('originalPos').V,
    }, {
      duration: 750, 
      easing: 'easeOutElastic'
    }).removeClass('open').addClass('closed');
  };

$('.lightbox-controls .close').click(closeLightbox);
$('.lightbox-cover').click(closeLightbox);

Comments