JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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');
Also see: Tab Triggers