Efek Lytebox pada pautan gambar atau pautan web, untuk blog dan laman web
Pernahkah anda melihat paparan LightBox, ShadowBox dan seumpamanya di laman2 web atau blog? LyteBox adalah variasi kepada LightBox, ShadowBox, Thickbox dll. Oleh kerana ia adalah kod JavaScript tunggal, maka masalah keserasian dengan framework JavaScript seperti jQuery dan Mootool dapat dielakkan.
Lytebox ditulis dari kelas Lightbox yang dimajukan oleh Lokesh Dhakar (http://www.huddletogether.com). Lytebox menyokong paparan gambar tunggal, galeri gambar, slideshow, dan juga kandungan HTML.
Contoh Imej Tunggal:
Contoh Sekumpulan Imej:
Contoh SlideShow (Nota : gunakan kod LyteShow dan bukan LyteBox):
Contoh Kandungan HTML:
Nota: Apabila menggunakan fitur "Lyteframe", attribut REV digunakan untuk mengawal lebar, tinggi dan skrol tingkap. Jika attribut REV diabaikan, makan secara default lebar/tinggi ditetapkan kepada 400px dan skrol ditetapkan ke auto.
Nota : Sila link fail2 skrip ke lokasi hos web anda sendiri, tolong jangan curi link dari laman web lain.
 |
| Efek lightbox/thickbox pada galeri gambar di laman web Media Sukan. |
Lytebox ditulis dari kelas Lightbox yang dimajukan oleh Lokesh Dhakar (http://www.huddletogether.com). Lytebox menyokong paparan gambar tunggal, galeri gambar, slideshow, dan juga kandungan HTML.
Apa yang anda perlu lakukan untuk mengaplikasi Lytebox di blog/laman web anda?
- Muat turun fail2 skrip dari http://dolem.com/lytebox/lytebox_v3.22.zip.
- Ekstrak dan upload ke pelayan web. Oleh kerana Blogger adalah servis hos blog percuma dan ia tidak menyokong upload fail selain gambar dan video, anda perlu uploadkan fail2 ke mana2 hos web percuma atau berbayar. Google selain menghoskan Blogger, ia juga menghoskan laman web. Servis ini dikenali sebagai Google Site. Layari http://sites.google.com/ dan langgan servis ini jika perlu. Anda perlu upload fail satu per satu melalui browser di Google Site ini.
- Masukkan kod berikut ke dalam segmen dokumen HTML anda. Untuk Blogger, jejak segmen dalam template dan masukkan kod ini dalam segmen itu.
<script type="text/javascript" language="javascript" src="lytebox.js"></script> <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
- Seterusnya masukkan attribut rel pada tag link a, <a href="" ... rel="">. Anda perlu masukkan kod ini secara manual pada pautan gambar atau galeri atau slideshow atau kandungan, setiap kali anda menerbitkan artikel baru.
Contoh Imej Tunggal:
<a href="images/image-1.jpg" rel="lytebox" title="Image Description">
Image #1</a>
Contoh Sekumpulan Imej:
<a href="images/image-1.jpg" rel="lytebox[vacation]"
title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg"
rel="lytebox[vacation]" title="My Sister">My Sister</a>
Contoh SlideShow (Nota : gunakan kod LyteShow dan bukan LyteBox):
<a href="images/image-1.jpg" rel="lyteshow[vacation]"
title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg"
rel="lyteshow[vacation]" title="My Sister">My Sister</a>
Contoh Kandungan HTML:
<a href="http://www.google.com" rel="lyteframe" title="Search Google"
rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog"
>Summer Catalog</a><a href="catalog1.htm" rel="lyteframe[catalog]"
title="Winter Catalog">Winter Catalog</a>NOTA : Semua URL lokasi fail skrip dan yang berkaitan hendaklah ditukar dan merujuk kepada lokasi di pelayan anda.
Nota: Apabila menggunakan fitur "Lyteframe", attribut REV digunakan untuk mengawal lebar, tinggi dan skrol tingkap. Jika attribut REV diabaikan, makan secara default lebar/tinggi ditetapkan kepada 400px dan skrol ditetapkan ke auto.
Nota : Sila link fail2 skrip ke lokasi hos web anda sendiri, tolong jangan curi link dari laman web lain.
Ulasan
Catat Ulasan