2008 3 Okt 2008

Sederhana, Ringan, Lightbox Cross Browser untuk halaman Web Anda

Bukan berarti hanya ada beberapa lightbox yang dapat Anda temukan ketika Anda google. Masalah dengan sebagian besar lightboxes yang saya temukan adalah bahwa mereka semua tampaknya menggunakan satu atau kerangka JAVASCRIPT berat lainnya berat seperti jQuery, Prototype, MooTools dan sejenisnya. Mereka semua keren dan megah mencari. Tapi Jika kebutuhan Anda adalah "TAPI Aku INGIN SCRIPT lightbox SEDERHANA DAN RINGAN UNTUK SITUS SAYA", maka di sini adalah;

Beberapa fitur bagus lightbox ini

  1. Sangat ringan
    a. 4KB Script ketika dikemas (8 kb membongkar)
    b. 2 kb CSS
    c. Beberapa baris HTML untuk wadah lightbox
  2. Sederhana untuk memahami dan melaksanakan
  3. Dapat memiliki beberapa lightboxes pada halaman yang sama.
  4. Wadah lightbox sama digunakan untuk menunjukkan, isi yang berbeda (yang terpisah dimasukkan sebagai divisi tersembunyi di halaman), tergantung pada link / option yang diklik.
  5. Secara otomatis pusat sendiri, dengan mempertimbangkan semua faktor-faktor seperti, tinggi Window dan lebar (resolusi layar), jumlah halaman gulir dan tinggi dari isi lightbox itu
  6. Diuji di IE 7 & FF

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1794 kali)


Menggunakan Lightbox [File dalam file zip]

jo.js, jo_pack.js [versi dikemas]: - satu set sederhana JAVASCRIPT OBJECTS [JO], yang berisi elemen, jendela dan skrip dokumen positioning. Anda dapat membuka JO.JS jika Anda ingin mendapatkan tangan Anda kotor dengan beberapa Javascripting Lanjutan, menciptakan fungsi abstrak, memperluas sifat unsur dan semacamnya. Jika Anda tidak terlalu banyak dalam Javascripting, Biarkan saja.

lightbox.js, lightbox_pack.js [versi dikemas]: - Mengandung script kotak manajer cahaya. Jika Anda adalah halaman desainer, juga bertanggung jawab dengan menerapkan lightbox pada halaman, Anda perlu memahami LightBoxManager tersebut. LightBoxManager pada dasarnya berisi showLightBox hanya dua fungsi dan closeLightBox.

lightbox.css: - Jika Anda tahu CSS, Anda dapat memutar sekitar dengan lightbox.css untuk menyesuaikan tampilan-n-merasa lightbox.css

index.html: Contoh pelaksanaan lightbox dengan dua isi yang berbeda

lb_underlay_bkg.png: - Ini adalah cahaya / Simi gambar transparan yang digunakan latar belakang untuk mendasari lightbox [mendasari adalah lapisan bawah lighbox, yang mencegah pengguna dari mengklik entitas lain pada halaman, sementara lightbox terbuka]. Anda dapat menggunakan gambar atau bahkan warna yang solid untuk tujuan ini, tergantung pada desain halaman dan kebutuhan.

icon_lb_close.gif: - Gambar untuk menangani lightbox dekat di kanan atas dari kotak cahaya. Bisa menggunakan gambar apapun sesuai desain

Lihat Demo |
Ambil Lightbox Sumber Zip (download 1794 kali)

Silakan beritahu kami memiliki komentar dan umpan balik ...


NDK rumah | Mengekspresikan TI | Langit-langit Mulut Mengekspresikan | Penmenship Mengekspresikan | Awe Mengekspresikan | Mengekspresikan Diriku