Prodigy of Head | It's Fullstylish Zoomerang n ImageLightbox

Link to Tutorial Blog for Stylish Blogger

It's Fullstylish Zoomerang n ImageLightbox

Posted: 05 Feb 2014 07:00 PM PST

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

Prodigy of Head | It's Fullstylish Zoomerang n ImageLightbox

Prodigy of Head | It's Fullstylish Zoomerang n ImageLightbox

Zoomerang

Next

Newer Post

Previous

Older Post