Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

D E M O

D E M O Lightbox Slideshow

Beberapa bagian penting yang harus dirubah:

Sekalipun pada dasarnya penambahan kode css3 lightbox hanya dilakukan pada kode css, namun sedikit perubahan juga perlu dilakukan pada javascriptnya. Pengontrol lightbox seperti next, previous, play slideshow, stop slideshow, dan close yang sebelumnya berupa teks (dalam javascript) dihilangkan dan diganti dengan beberapa image yang berfungsi sebagai button pengontrol. Silahkan download kode CSS-nya untuk mengetahui apa saja kode css3 yang ditambahkan hingga lightbox slideshow ini terlihat berbeda.

Kode CSS dan Javascript Lightbox Slideshow plus CSS3

Link javascript & kode CSS Lightbox Slideshow

<link href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/css/gubhugreyot-lightbox-ss-css3.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://gubhugreyot-lightbox-ss1.googlecode.com/files/gubhugreyot_lightbox-ss-1.2.js"></script>

Cara menggunakan lightbox slideshow

Simpan seluruh kode (link kode css dan javascript) di atas kode </head>, kemudian lakukan posting menggunakan lightbox.

Kode Posting Lightbox Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Kode Posting Lightbox-Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Panduan Lengkap

• Panduan menggunakan lightbox slideshow plus css3 ini tak berbeda dengan lightbox sldeshow yang telah terpostingkan sebelumnya. Yang berbeda hanya pada link kode CSS dan link javascript lightbox slideshow. Silahkan buka panduannya melalui link di bawah ini.
  Cara menggunakan lightbox slideshow
• Jika tertarik untuk membuat lightbox yang tanpa slideshow, silahkan buka link berikut:
Lightbox image viewer for blogger
• Membuat lightbox mengharuskan blogger untuk bisa membuat image gallery lightbox. Ikuti panduan cara membuatnya disini:
  Cara membuat Image Gallery u Lightbox

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Kemis WAGE, January, 26, 2012

» Happy Blogging - gubhugreyot «