Sliding Image Gallery CSS3

Sliding image gallery css3 adalah sebuah gallery yang dibuat hanya menggunakan kode css3 dengan memanfaatkan CSS3 box shadow, css3 border radius, css3 transition dan css3 transformation. Fungsi hover dan css3 transform menjadi kunci utama bekerjanya sliding image gallery. Dengan menggeser masing-masing image ke arah kanan sebesar 20px melalui fungsi translate (css3 transform), maka seluruh image dalam gallery akan memiliki sisi yang dapat disentuh cursor hingga hover yang juga digunakan untuk membuka image dapat bekerja sempurna. Sliding image gallery didesain untuk image berukuran width sebesar 300px dan height sebesar 225px dengan kemampuan memuat 10 buah image. Jika dalam blog anda juga menggunakan sebuah widget image/media viewer (seperti lightbox) maka anda bisa menggabungkan fungsi keduanya. Preview image yang berukuran lebih besar dapat dilakukan melalui image viewer/media viewer (lightbox).

Membuat Slideshow CSS3 u Pelengkap Lightbox

Untuk melengkapi lightbox image viewer dengan slideshow yang manfaatkan sebagai image gallery, kita hanya akan membuatnya menggunakan kode css3. Sekalipun tanpa javascript, jangan sekalipun punya anggapan bahwa slideshow css3 ini menjadi sama sekali tak menarik atau bahkan tak layak ditampilkan sebagai kelengkapan blog. Cobalah anda lihat dulu dan baru kemudian anda bisa beri komentar! He ... he .. setelah melihat dan mencoba pasti anda akan banyak mengerenyitan dahi yang terlihat sudah dipenuhi dengan keriput itu. He... he .. pasti anda akan jadi terlihat jauh lebih tua! He ... he .. ini yang pasti...!!! Anda akan memberikan acungan jempol kaki sambil bergumam ... bagus...bagus...bagus...

Cara Membuat Image Gallery untuk Lightbox

Membuat image galley beserta box yang dipergunakan sebagai wadah pada intinya adalah sebuah cara untuk membuat penataan image agar terlihat rapi hingga sebuah web/blog menjadi lebih menarik dan enak dipandang serta nyaman dinikmati pengunjung. Sebuah kunci yang harus dijadikan patokan ketika ingin membuat image gallery adalah keseragaman gambar. Patokan yang tentunya tak berlaku bagi beberapa blogger yang sudah cukup menguasai kode html. Bagi anda yang masih dalam tahap belajar tak perlu berkecil hati tentang pernyataan di atas, karena "sekalipun seseorang telah cukup ahli dalam penguasaan kode html", penataan image dalam sebuah gallery dengan ukuran bervariasi pada kenyataanya tak terlalu banyak digunakan karena kode html yang dipergunakan menjadi terlalu banyak dan bisa dikatakan blogger yang melakukan ini tak ubahnya "mempersulit diri".

Demo & Kode Html Lightbox Image Viewer for Blogger

Demo Single Image dan Image Gallery

Lightbox Image Viewer bisa difungsikan pada satu buah image (single image) atau beberapa buah image yang terangkai dalam sebuah gallery (image gallery). Untuk single image kode yang dituliskan cukup rel="GRlightbox", sedangkan untuk image gallery bisa ditambahkan nama gallery yang sesuai dengan kategori galelery. Kode dasar yang digunakan adalah rel="GRlightbox[gallery]". Kategory [gallery] bisa anda rubah untuk lebih disesuaikan dengan kebutuhan, seperti misanya [photo-keluarga], [pasar-malam] atau [rumah-adat].