Medium Lightbox for Image Zoom, Nice and Elegant

Nemu yang berbeda tentang lightbox satu ini! Master davidecalignano on github membuat MediumLightbox. Dengan segala fitur fungsi yg menyertainya mungkin ini lightbox sederhana tetapi full stylish punya :-) Terinspirasi dari web sosmed medium.com gambar-gambar di sana dapat di klik (zoom) kemudian mengembalikan ke keadaan semula dengan di klik lagi atau dengan cara melakukan scroll! Uniknya tuh scroll, customize zoom image and responsive :D
Ditulis dalam javascript murni untuk kinerja yang lebih baik, ringan dan sederhana. Rada ribet dalam penulisan syntax HTML menurur saya :D

Bagi sobat yg tertarik untuk memasang medium lightbox, silahkan ikuti langkah-langkah berikut ini...

.post {
max-width:700px;
width: 100%;
margin: 0 auto;
}

figure {
margin: 0;
position: relative;
clear: both;
margin: 10px;
}
figure.left {
margin-left: 0;
}
figure.right {
margin-right: 0;
}
figure.full {
margin-left: 0;
margin-right: 0;
}
.one-third {
width: 33.33%;
}
.half {
width: 50%;
}
.full {
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}

/* MediumLightbox style */

.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
.img {
display: block;
margin: auto;
max-width: 100%;
}
.aspectRatioPlaceholder .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zoom-effect .img {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
.zoom-effect .zoomImg,.zoom-effect .zoomImg-wrap {
position: relative;
z-index: 900;
transition: all 300ms;
}
.zoom-effect .zoomImg-wrap--absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zoom-effect .zoomImg {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
}
.zoom-effect .zoomOverlay.show {
opacity: 1;
}
.zoom-effect .zoomOverlay {
z-index: 800;
background: #fff;
position: absolute;
transition: opacity 300ms;
opacity: 0;
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
}

Perhatikan kode CSS.post {
max-width: 700px;
width: 100%;
margin: 0 auto;
}Jangan di pakai kode tersebut, tetapi perhatikan properti max-width: 700px Properti itu harus tertanam pada tag post area blog anda sekalian. Singkat cerita, jika pada area pos sobat sudah memiliki nominal panjang, abaikan kode itu!

Hostingkan JavaScript berikut medium-lightbox.js Kemudian coba letakan terlebih dahulu di atas tag </body> bisa juga sebelum tag </head>
Contoh:<script src="medium-lightbox.js" ></script>
<script>
MediumLightbox ('figure.zoom-effect', {
//margin:20
});
</script>Margin - default: 20 - Margin dalam px diterapkan umtuk gambar dalam tampilan zoom.

Bagian syntax HTML seperti yg sudah saya katakan sebelumnya, sedikit ribet ;)) Ribet demi gaya kan gak apa-apa bos :))

<figure class="one-third left zoom-effect">
 <div class="aspectRatioPlaceholder">
  <div class="aspect-ratio-fill" style="padding-bottom: 00.000000%;"></div>
   <img class="img" data-width="475" data-height="360" src="LINK-IMAGE">
 </div>
</figure>

Keterangan:

Dalam tagging figure, class dengan properti zoom-effect harus ada. Adapun variasi class lain, sobat bisa rangkai dengan seperti yg ada pada kode CSS (.left, .right, .full, .one-third, & .half)

<div class="aspect-ratio-fill" style="padding-bottom: 00.000000%;"></div>
Kode ini juga musti ada, nilai style (padding-bottom) adalah rumusan...Tinggi gambar/Lebar gambar dikalikan 100 [(height/width)*100]

data-width="000" data-height="000"
Nominal pada properti tsb adalah efek lebar dan tinggi zoom pada gambar (perbesaran tampilan gambar)

Done!

Demo: codepen.io/beben-koben/full/LVLXqe
Source: github.com/davidecalignano/MediumLightbox