
JQuery adalah script yang terpisah dari halaman web utama, namun dengan sedikit installasi script pada halaman utama, fungsi JQuery dapat dijalankan sehingga memperkecil penggunaan script pada halaman utama web.
Pada posting kali ini, kita akan mencoba membuat sebuah galeri foto di halaman website dengan memadukan JQuery dan CSS, kita akan memanfaatkan JQuery Tools dan CSS berikut ini :
- jquery.js
- standalone.css
- scrollable-horizontal.css
- scrollable-buttons.css
- overlay-basic.css
- overlay-gallery.css
- Dan beberapa image pendukung
Berikut tampilan dari galeri yang akan kita buat, untuk lebih jelasnya lihat Klik Disini untuk melihat demonya.
Sebelumnya, buat tiga buah directory/ folder dan beri nama masing-masingnya :
- js (letakan jquery.js didalamnya)
- css (letakkan semua css didalamnya)
- galeri (letakkan semua gambar/image didalamnya)
Langkah selanjutnya kita akan membuat halaman galeri dengan sedikit installasi script untuk memanggil fungsi dari JQuery dan CSS tersebut, masukkan script berikut dan simpan diluar ketiga folder diatas, beri nama galeri.php / galeri.html.
Keterangan :
Ganti namafoto.jpg yang berada pada :
<a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">
<img src="galeri/namafoto.jpg" width="80" height="80"></a>
dengan nama foto anda, keduanya harus dengan nama yang sama.
Sedangkan keterangan foto yang berwarna merah, ganti dengan keterangan foto anda.
Selamat Mencoba......!!
Keterangan :
Ganti namafoto.jpg yang berada pada :
<a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">
<img src="galeri/namafoto.jpg" width="80" height="80"></a>
dengan nama foto anda, keduanya harus dengan nama yang sama.
Sedangkan keterangan foto yang berwarna merah, ganti dengan keterangan foto anda.
Selamat Mencoba......!!

0 komentar:
Post a Comment
Aturan Dalam Berkomentar :
1. Silakan Berkomentar Dengan Baik Dan Sopan.
2. Mohon Untuk Tidak Mencantumkan Link Aktif Pada Komentar.
3. Mohon Untuk Tidak Promosi Produk Disini (Dianggap Spam).
4. Bila Komentar Tidak Sesuai Aturan Diatas Maka Komentar Akan Saya Hapus.
<-- Thank's -->