lightboxsatu 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...
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;
}
.post {
max-width: 700px;
width: 100%;
margin: 0 auto;
} Hostingkan JavaScript berikut medium-lightbox.js Kemudian coba letakan terlebih dahulu di atas tag </body> bisa juga sebelum tag </head>
Contoh:
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!
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> 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)
Kode ini juga musti ada, nilai style (padding-bottom) adalah rumusan...Tinggi gambar/Lebar gambar dikalikan 100 [(height/width)*100]
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
Tool untuk melihat kode lawan warna. Ada juga yg menyebutnya color complementary!
Tool untuk melihat jumlah karakter kata di dalam teks dan mengurutkan berdasarkan frekuensi banyak.
Menampilkan jumlah karakter kata dengan menghilangkan terlebih dahulu kata yang sama.
Download
