css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="image-viewer">
    <div class="main-image">
      <img src="http://placehold.it/500x500/f4c242/black/"/>
    </div>
    <div class="secondary-images">
      <div class="secondary-image">
        <img src="http://placehold.it/500x500/f4c242/black/"/>
      </div>
      <div class="secondary-image">
        <img src="http://placehold.it/200x1000/42c8f4/black/"/>
      </div>
      <div class="secondary-image">
        <img src="http://placehold.it/300x600/bf42f4/black/"/>
      </div>
      <div class="secondary-image">
        <img src="http://placehold.it/3200x1800/f4425c/black/"/>
      </div>
    </div>
  </div>
  <div class="detail">
    <h1 class="detail-name">Sample Product</h1>
    <p class="detail-short-description"> 
      Bacon ipsum dolor amet boudin strip steak ham, cupim fatback spare ribs short ribs doner ground round jowl bresaola tail jerky ham hock. Corned beef doner shoulder sirloin. Sirloin beef ribs doner, pork loin beef drumstick venison salami burgdoggen. Pork loin frankfurter beef ribs leberkas, flank spare ribs rump. 
    </p>
    <div class="detail-long-description"> 
      <p>Spicy jalapeno bacon ipsum dolor amet velit salami meatball enim jowl quis leberkas esse tempor boudin venison pariatur qui pork loin. Picanha consequat short loin in, swine sirloin tail venison ullamco adipisicing. Non cupim meatloaf duis aliquip. Exercitation filet mignon lorem aliquip meatball pork loin jowl. Cow do strip steak, adipisicing pig flank sausage kevin incididunt commodo. Chuck shoulder aliquip tenderloin meatball turducken commodo rump.</p>

      <p>Meatloaf turducken leberkas sirloin hamburger sunt mollit do ut. Swine meatball boudin venison pastrami eu beef ribs velit in laboris fatback dolore pariatur. Aliquip lorem pariatur corned beef, shankle landjaeger ham leberkas jowl deserunt dolore aute do. Voluptate do ham hock shoulder. Quis ut burgdoggen, in minim shank mollit hamburger cillum elit ex do shoulder non. Bresaola kevin dolor qui. Chuck elit frankfurter, lorem velit consectetur tenderloin in rump laborum consequat laboris bacon nulla.</p>

      <p>Hamburger corned beef est turkey strip steak burgdoggen pastrami. Spare ribs swine occaecat pancetta beef ribs, t-bone ex voluptate flank pastrami ipsum non proident. Incididunt reprehenderit rump pastrami excepteur enim. Consectetur proident kevin ad, consequat mollit tri-tip ex enim aliquip bacon ribeye dolor minim. Shoulder elit brisket sint cow frankfurter sausage corned beef doner pork belly occaecat.</p>

      <p>Esse veniam tongue eu eiusmod doner beef ham picanha aliquip fugiat hamburger. Dolor incididunt pork belly strip steak aliquip nisi tri-tip. In spare ribs adipisicing pork loin shoulder pork belly sint officia fugiat quis strip steak. Exercitation eu aute frankfurter ut. Spare ribs enim filet mignon minim ut tri-tip est jerky. Pariatur in pork chop prosciutto boudin laborum.</p>

      <p>Cillum excepteur chuck, pig swine sint ribeye elit ham pork belly shank ea. Kevin adipisicing hamburger, alcatra brisket quis ball tip. Pork chop sirloin kielbasa, ham anim tail lorem aliquip ea cupidatat fatback incididunt. Proident turkey minim occaecat t-bone pork loin tenderloin do irure cow pancetta ham shoulder landjaeger eu. Enim turkey adipisicing kielbasa. Sausage deserunt et ea, nulla shankle ut kevin ground round aute short loin jowl ut. Rump id venison cupidatat picanha.</p>
    </div>
  </div>
  <div class="pricing">
    <div class="pricing-price">$419.99</div>
    <button class="btn pricing-btn">Add to Cart</button>
  </div>
  <div class="lightbox" id="lightbox">
    <img src="http://placehold.it/650x650"/>
    <div class="lightbox-controls">
      <div class="lightbox-controls-close">
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>
      <div class="lightbox-controls-previous">
        <i class="fa fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="lightbox-controls-next">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>
  
</div> 
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Amaranth|Quicksand');

/* Coolors Exported Palette - coolors.co/efeeda-c5f4e0-c2eaba-a7c4a0-8f8389 */

/* HSL */
$color1: hsla(57%, 40%, 90%, 1);
$color2: hsla(154%, 68%, 86%, 1);
$color3: hsla(110%, 53%, 82%, 1);
$color4: hsla(108%, 23%, 70%, 1);
$color5: hsla(330%, 5%, 54%, 1);

/* RGB */
$color1: rgba(239, 238, 218, 1);
$color2: rgba(197, 244, 224, 1);
$color3: rgba(194, 234, 186, 1);
$color4: rgba(167, 196, 160, 1);
$color5: rgba(143, 131, 137, 1);

$color-background: $color1;
$color-text: lighten(black, 30%);
$color-window: $color2;
$color-lightbox-background: transparentize(darken($color-background, 20%), 0.1);
$color-lightbox-controls: white;
$color-lightbox-controls-background: darken($color-lightbox-background, 20%);

$padding: 25px;
$padding-small: $padding / 2;
$padding-x-small: $padding / 4;

$margin: $padding;
$margin-small: $margin / 2;
$margin-x-small: $margin / 4;
$margin-large: $margin * 2;

$height-control: 70px;
$width-control: $height-control;

//debug
$show-borders: false;

//mixins

@mixin transition($property: "all", $duration: 0.5s, $delay: 0s, $ease: "ease-in-out"){
  -webkit-transition: #{$property} $duration $delay #{$ease};
  -moz-transition: #{$property} $duration $delay #{$ease};
  -ms-transition: #{$property} $duration $delay #{$ease};
  -o-transition: #{$property} $duration $delay #{$ease};
  transition: #{$property} $duration $delay #{$ease};
}


html,body {
  background-color: $color-background;
  color: $color-text;
  width:100%;
  height:100%;
  padding: 0;
  margin: 0;
  font-family: 'Amaranth', sans-serif;
}

@for $i from 1 through 6 {
  h#{$i} {
    font-family: 'Quicksand', sans-serif;
  }
}

.container {
  padding: $padding;
  background-color: $color-background;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.btn {
  transition: all 0.3s ease-in-out;
  font-family: 'Quicksand', sans-serif;
  background-color: $color-background;
  color: $color-text;
  border: 1px solid $color-text;
  padding: $padding-small;
  cursor: pointer;
  
  &:hover {
    background-color: $color-text;
    color: $color-background;
  }
  
  &:focus {
    outline: none;
  }
  
  &:active {
    transition: all 0.1s ease-in-out;
    background-color: $color-background;
    color: $color-text;
  }
}

.image-viewer {
  margin: $margin;
  @if $show-borders {
    border: 1px solid $color4;
  }
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  
  .main-image {
    width: 300px;
    height: 300px;
    align-self: center;
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      cursor: zoom-in;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
  }
  .secondary-images {
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    
    .secondary-image {
      padding: $padding-x-small;
      height: 50px;
      img {
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}

.section {
  padding: $padding-small;
  @if $show-borders {
    border: 1px solid $color4;
  }
}


.pricing {
  @extend .section;
  width: 15%;
  padding: $padding-small;
  //margin-top: $margin-x-small;
  
  &-price {
    text-align: right;
    margin: $margin-small 0;
    font-size: 3em;
  }
  
  &-btn {
    width: 100%;
  }
}

.detail {
  @extend .section;
  width: 30%;
  
  .detail-short-description {
    margin-top: 2em;
  }
  
  .detail-long-description {
    margin-top: 3em;
    font-size: 0.8rem;
  }
}

.lightbox {
  @include transition($delay:0s);
  position:fixed;
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
  background: $color-lightbox-background;
  z-index:501;
  opacity:0;
  img {
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-width:0%;
    max-height:0%;
  }
  
  .lightbox-controls {
    position: relative;
    height: 100vh;
    
    
    .lightbox-control {
      height: $height-control;
      width: $width-control;
      position: absolute;
      z-index: 502;
      background: $color-lightbox-controls-background;
      color: $color-lightbox-controls;
      font-size: 3em;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .lightbox-controls-close {
      @extend .lightbox-control;
      position: absolute;
      top:0%;
      right:0%;
      //@include transition($delay: 0s);
    }
    
    .lightbox-controls-previous {
      @extend .lightbox-control;
      position: absolute;
      top:50%;
      left:-20%;
      @include transition($delay: 0s);
    }
    
    .lightbox-controls-next {
      @extend .lightbox-control;
      position: absolute;
      top:50%;
      right:-20%;
      @include transition($delay: 0s);
    }
  }
}

.lightbox.show {
  @include transition();
  top:0%;
  bottom:0%;
  opacity:1;
  
  img {
    @include transition($delay: 0.5s);
    max-width:100%;
    max-height:100%;
  }
  
  .lightbox-controls {
    
    .lightbox-controls-previous {
      @extend .lightbox-control;
      position: absolute;
      top:50%;
      left:0%;
      @include transition($delay: 0.75s);
    }
    
    .lightbox-controls-next {
      @extend .lightbox-control;
      position: absolute;
      top:50%;
      right:0%;
      @include transition($delay: 0.75s);
    }
  }
}
            
          
!
            
              class ImageViewer {
  constructor(selector) {
    this.selector = selector;
    $(this.secondaryImages).click(() => this.setMainImage(event));
    $(this.mainImage).click(() => this.showLightbox(event));
    $(this.lightboxClose).click(() => this.hideLightbox(event));
  }
  
  get secondaryImageSelector() {
    return '.secondary-image';
  }
  
  get mainImageSelector() {
    return '.main-image';
  }
  
  get lightboxImageSelector() {
    return '.lightbox';
  }
  
  get lightboxClose() {
    return '.lightbox-controls-close';
  }
  
  get secondaryImages() {
    var secondaryImages = $(this.selector).find(this.secondaryImageSelector).find('img')
    return secondaryImages;
  }
  
  get mainImage() {
    var mainImage = $(this.selector).find(this.mainImageSelector);
    return mainImage;
  }
  
  get lightboxImage() {
    var lightboxImage = $(this.lightboxImageSelector);
    return lightboxImage;
  }
  
  setLightboxImage(event){
    var src = this.getEventSrc(event);
    this.setSrc(this.lightboxImage, src);
  }
  
  setMainImage(event){
    var src = this.getEventSrc(event);
    this.setSrc(this.mainImage, src);
  }
  
  getSrc(node){
    var image = $(node).find('img');
  }
  
  setSrc(node, src){
    var image = $(node).find('img')[0];
    image.src = src;
  }
  
  getEventSrc(event){
    return event.target.src;
  }
  
  showLightbox(event){
    this.setLightboxImage(event);
    $(this.lightboxImageSelector).addClass('show');
  }
  
  hideLightbox(){
    $(this.lightboxImageSelector).removeClass('show');
  }
}

new ImageViewer('.image-viewer');
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console