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

It's Fullstylish Zoomerang n ImageLightbox

Koben punya dua informasi tut's unik. Tutorial lightbox dan zoom yang sama-sama sudah responsive! Kalau melihat dari nama zoom & lightbox sudah pasti berbeda, akan tetapi fitur ini hampir mempunyai kemiripan. Keduanya akan menampilkan konten ketika anda melakukan klik pada sebuah objek, dan diteruskan dengan membesar atau tampil paling depan membelakangi tampilan utama. Begitulah penjelasan singkat yg pasti kalian juga tidak akan paham :))

Zoomerang

Hostingkan javascript dan masukan ke dalam template sebelum tag </head> or </body><script src='https://raw.github.com/yyx990803/zoomerang/master/zoomerang.js' type='text/javascript'></script>Script pemanggil secara default seperti berikut<script>
Zoomerang.listen('./# UNIK-ID')
</script>Kode ./# UNIK-ID bisa sobat gantikan sesuai keinginan Ex: .zoom or #zoom Sehingga penulisan script menjadi<script>
Zoomerang.listen('.zoom')
</script>Markup HTML sbb

<img src="http://LINK-IMAGE" class="zoom" />
or
<span class="zoom">BLAH BLEH BLOH HERE</span>

Jadi zoomerang bisa digunakan membuat efek zoom terhadap property image dan text. Bila sobat mau memakai script pemanggil yg agak sedikit gaya maka penulisannya menjadi

<script>
     Zoomerang.config({
         maxHeight: 400,
         maxWidth: 400,
         bgColor: 'rgba(0,0,0,0.912)',
         bgOpacity: .85
})
.listen('.zoom')
</script>

maxHeight : Batas tinggi image ketika zoom.
maxWidth : Batas lebar image ketika zoom.
bgColor : Warna latar belakang zoom.
bgOpacity : Efek opacity/transparan zoom.

Demo dan source bisa sobat lihat yyx990803.github.io/zoomerang Untuk versi lightbox image, responsive and touch‑friendly pelajari sendiri saja yah on page osvaldas.info/image-lightbox-responsive-touch-friendly :D

Bonus:
cdpn.io/wlFqe - cdpn.io/yrCAi - cdpn.io/HlLua - cdpn.io/nCtFm - cdpn.io/EscmD - cdpn.io/fkCzh - developer.mozilla.org/en-US/demos/detail/book-note - developer.mozilla.org/en-US/demos/detail/phone-simulator