Membuat Lightbox Menggunakan CSS Dan Jquery

Setelah melihat-lihat entri blog saya baru sadar sudah beberapa hari ini sya belum membuat artikel mengenai desain blog, tangan saya dibuat lumayan gatal untuk membuat satu artkel lagi sebagai penutup di pagi ini hehehe soalnya mata sudah agak 5watt nih berhubung tadi malam tidur terlalu cepat dan terus bangun tadi jam 1 malam ya akhirnya gini deh jadi melek begadang. Kali ini saya akan berbagi tips untuk membuat sebuah lightbox, buat yang belum tahu lightbox itu adalah sebuah teknik memunculkan gambar di sebuah pop-up, coba sobat klik setiap gambar yang ada dalam postingan di blog ini itu adalah contoh sebuah lightbox. berhubung sekarang berubah jadi 1watt markicab ke TKP...
1. Sobat masuk dulu ke rancangan template dan cari kode </head>  , jika sudah ketemu silahkan copy paste kode dibawah ini tepat diatas kode </head> tadi

<!--LIGHTBOX START--> <style> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTW7LlENcufNmAiBwjNtHkYyUhMsJy8NjdoL82mspHzpF5uU7P-2NXFxj-NvNgUlgpaNu3NFb6Q6c-tfp5q_1GKOnq0YKQDtI2nqQMMCPOVFFbRqU-Xo1R8N_1RaJAtiqyUJkNpu5dKs0/) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIKM6XhM-YqETg05mQ2r1jRSqDAMcaHQYqNEwhH4o0gVGJu-NkIn-s3dMVpu7yKxf3Av5Y47UOnRL4RhJzTVpgN_tDxmdCm1TTS7-SnlBFNXwTMTlT9qeo7D24hzEgwi6_sjK9nbsbQI/) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } </style> <script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/> <script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/> <!--LGHTBOX END-->

Klik save

2. Lakukan Instruksi pada gambar dibawah ini (klik gambar untuk memperbesar) ketika memasukan image pada saat melakukan posting.

note: tulisan "image caption" bisa kamu ganti dengan nama gambar kamu, jangan lupa lihat artikel lain saya tentang lightbox untuk popup teks
Semoga bermanfaat sobat
Bloging is Sharing...

Description: Membuat Lightbox Rating: 4.5