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 :
1. JQuery
- jquery.js
2. CSS
- standalone.css
- scrollable-horizontal.css
- scrollable-buttons.css
- overlay-basic.css
- overlay-gallery.css
Kesemua file diatas telah saya siapkan dalam satu paket beserta dengan script HTML nya. sobat bisa download full source code tutorial ini pada link yang saya sediakan di bagian bawah posting ini.
Lihat Juga : Cara Mudah Mendapatkan Dollar Dari Internet...!!!
Berikut tampilan dari galeri yang akan kita buat :
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 atau 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 fotoyang ingin ditampilkan, keduanya harus dengan nama yang sama. Sedangkan keterangan foto yang berwarna merah, ganti dengan keterangan foto tersebut.
Untuk lebih jelasnya silakan sobat download full source code (HTML, CSS, JS) pada link berikut ini :
Sekian dulu tutorial saya yang berjudul Cara Membuat Galeri Foto Dengan CSS Dan JQuery Di Halaman Website. Selamat mencoba dan semoga bermanfaat.
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 fotoyang ingin ditampilkan, keduanya harus dengan nama yang sama. Sedangkan keterangan foto yang berwarna merah, ganti dengan keterangan foto tersebut.
Untuk lebih jelasnya silakan sobat download full source code (HTML, CSS, JS) pada link berikut ini :
Sekian dulu tutorial saya yang berjudul Cara Membuat Galeri Foto Dengan CSS Dan JQuery Di Halaman Website. Selamat mencoba dan semoga bermanfaat.
1 komentar :
Salam kenal mas Hidra, sy Lila dr BIma, NTB
Sy sdh mencobanya dan berhasil, hanya saja sy tak mengerti bagaimana cara mengubah style box/table galeri dr bentuk panjang horisontal menjadi persegi dan vertikal...
sy udah coba utak atik syntax css nya tp begitulah, ilmu dan otak sy mgkn tak sampai dstu, pdhl mgkn menurut anda itu hal sepele...
Mohon bantuannya mas Hidra, sekali lg salam kenal..
Posting Komentar
Berhubung Makin Banyaknya Komentar Yang Tidak Mematuhi Peraturan, Maka Setiap Komentar Yang Masuk Akan Di Moderasi (Diterbitkan Atas Persetujuan) Oleh Admin Terlebih Dulu.
Aturan Berkomentar
1. Silakan Berkomentar Dengan Baik Dan Sopan.
2. Komentar Sesuai Topik Artikel
3. Mohon Untuk Tidak Mencantumkan Link Aktif Pada Komentar.
4. Mohon Untuk Tidak Promosi Produk Disini (Dianggap Spam).
5. Komentar Menggunakan Akun Personal (mis. Akun Google), Bukan Akun Nama Produk Barang (Dianggap Promosi) dan Nama yang Mengarah ke URL Tertentu (Dianggap Spam).
6. Bila Komentar Tidak Sesuai Aturan Diatas Maka Komentar Tidak Diterbitkan Dan Akan Saya Hapus.
Spam = Delete...!!
Promosi = Spam = Delete...!!
Komentar Yang Sesuai Aturan akan Diterbitkan Selambat-Lambatnya Dalam 1x24 Jam.
-->Untuk Pertanyaan Yang Dirasa Penting (Urgent) Silakan Contact Saya Melalui Email Pada Link Berikut Ini : Contact Us
<-- Thank's -->