Penampil Gambar Kotak Cahaya Untuk Blogger

Kotak cahaya adalah addon penampil gambar yang sangat elegan menggunakan javascript dan kerangka prototipe. Pertama-tama saya ingin memberikan penghargaan kepada pembuat kotak cahaya asli, Lokesh Dhakar

Saya juga telah menambahkan beberapa demo Lightbox ke halaman ini. Jadi jika Anda tidak yakin, apa itu lightbox, maka lihatlah dua demo di Posting ini. Ini akan sangat membantu Anda dalam membangun galeri yang ditata dengan baik seperti blog.

Langkah-langkah instalasi

1.Login ke Dasbor Blogger Anda

2. Pergi ke Desain > Edit HTML

3. Temukan potongan kode ini

</ head >

dan ganti dengan

<! - Kode Lampu Kotak Mulai Bloggerplugins.ORG -> 
< style >
#lightbox {position: absolute; kiri: 0; lebar: 100%; z-index: 100; perataan teks: tengah; garis-tinggi: 0;}
#lightbox img {width: auto; tinggi: otomatis;}
#lightbox a img {border: none; }

#outerImageContainer {position: relative; warna latar: #fff; lebar: 250px; tinggi: 250px; margin: 0 otomatis; }
#imageContainer {padding: 10px; }

#loading {position: absolute; atas: 40%; kiri: 0%; tinggi: 25%; lebar: 100%; perataan teks: tengah; garis-tinggi: 0; }
#hoverNav {position: absolute; atas: 0; kiri: 0; tinggi: 100%; lebar: 100%; z-index: 10; }
#imageContainer & gt; #hoverNav {kiri: 0;}
#hoverNav a {outline: none;}

#prevLink, #nextLink {width: 49%; tinggi: 100%; background-image: url (data: image / gif; base64, AAAA); / * Trik IE agar menampilkan hover * / display: block; }
#prevLink {kiri: 0; float: left;}
#nextLink {right: 0; float: right;}
#prevLink: hover, #prevLink: dikunjungi: hover {background: url (http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5jika tidak tinggal lagi ; }
#nextLink: hover, #nextLink: dikunjungi: hover {background: url (http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5% ulangi% ; }

#imageDataContainer {font: 10px Verdana, Helvetica, sans-serif; warna latar: #fff; margin: 0 otomatis; garis-tinggi: 1.4em; overflow: otomatis; lebar: 100%; }

#imageData {padding: 0 10px; warna: # 666; }
#imageData #imageDetails {width: 70%; mengapung: kiri; perataan teks: kiri; }
#imageData #caption {font-weight: bold; }
#imageData #numberDisplay {display: block; jelas: kiri; padding-bottom: 1.0em; }         
#imageData #bottomNavClose {width: 66px; mengapung: benar; padding-bottom: 0.7em; garis besar: tidak ada;}      

#overlay {position: absolute; atas: 0; kiri: 0; z-index: 90; lebar: 100%; tinggi: 500px; warna latar: # 000; }
</ style > 
< script  src = 'http: //ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js'  type = 'teks / 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 ' /> 
<! - Kode Lampu Kotak Berakhir Bloggerplugins.ORG -> 
</ head >

Menambahkan Gambar untuk Penampil Lightbox

Sekarang Anda telah menambahkan skrip dan gaya yang diperlukan untuk lightbox. Bagian berikutnya adalah menambahkan gambar kami ..

Anda juga dapat menambahkan teks ke gambar Anda dan juga mengelompokkan beberapa gambar ke dalam album. Pertama-tama unggah foto Anda menggunakan alat unggah foto blogger. Sekarang beralihlah ke tampilan edit html dari editor pos

Lihat instruksi dalam gambar-gambar ini. (Klik untuk melihat versi yang lebih besar .. :))

Pastikan Anda menghapus -h dari s1600-h . Sekarang Anda harus dapat melihat gambar (yang Anda unggah) di overlay LightBox

Opsi Dijelaskan ...

menambahkan rel = "lightbox" title = "Caption gambar Anda" akan membuat penampil lightbox untuk gambar tunggal.

Demo Gambar Tunggal

Membuat album dengan kotak cahaya

Jika Anda membuat album dari banyak gambar, kemudian tambahkan rel = "lightbox [albumname]" title = "Judul Gambar Anda"  ke setiap gambar yang ada di album itu. Gambar dengan nama album yang sama akan membentuk overlay satu kotak Light, dan Anda dapat melintasi album menggunakan Tombol Berikutnya dan Sebelumnya . Gambar dalam album jelas dapat memiliki takarir yang berbeda, tetapi nama album yang umum. Anda dapat membuat beberapa album dalam satu posting dengan memilih nama album yang berbeda.

Demo Album Kotak Cahaya

Apakah Anda memperhatikan bahwa tombol panah keyboard Anda dapat digunakan untuk menavigasi album? :) Saya harap ini akan sangat berguna bagi mereka yang memiliki blog fotografi. Jika Anda memiliki masalah dalam mengimplementasikan ini, Anda pasti dapat menghubungi saya melalui komentar atau @ Forum Blogger . Jika Anda membaca ini di pembaca feed, Demo tidak akan ditampilkan. Untuk melihat demo, kunjungi halaman posting yang sebenarnya