Social Icons

facebook google plus email

Tuesday, February 7, 2012

Membuat Galeri Foto Dengan CSS Dan JQuery

Share on :
JQuery atau Java Script Library dapat mempermudahkan kita dalam membuat sebuah halaman web yang menarik dan lebih dinamis. 

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
Agar mempermudah anda, untuk mendapatkan semua file diatas anda bisa download saja, klik tombol dibawah ini.
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 :
  1. js (letakan jquery.js didalamnya)
  2. css (letakkan semua css didalamnya)
  3. 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......!!



Share on :
Share

Lihat Juga Yang Berikut Ini :



Special Tips :

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 -->