Zaenal Arif: Cara Membuat Galeri Foto Dengan CSS Dan JQuery Di Halaman Website

Cara Membuat Galeri Foto Dengan CSS Dan JQuery Di Halaman Website | Gho Bog's - 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 :

1. JQuery

jquery.js

2. CSS

standalone.css
scrollable-horizontal.css
scrollable-buttons.css
overlay-basic.css
overlay-gallery.css

3. File-file gambar pendukung lainnya.

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.

Berikut tampilan dari galeri yang akan kita buat :

Silakan sobat lihat LIVE DEMO galeri yang dibuat pada link berikut ini : --[ Demo Galeri ]--

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.

<html><head><title>Gallery Dengan jQuery Dan CSS</title><script src="js/jquery.js"></script></head><body><link rel="stylesheet" type="text/css" href="css/standalone.css"><link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css"><link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css"><link rel="stylesheet" type="text/css" href="css/overlay-basic.css"><link rel="stylesheet" type="text/css" href="css/overlay-gallery.css"><script>$(document).ready(function() { $(".scrollable").scrollable().find("a").tooltip({     tip: '#tooltip' }).overlay({     target: '#gallery',     expose: '#111',     closeOnClick: false }).gallery({     disabledClass: 'inactive' }); }); </script><style></style><table align="center" width="75%" border="0"><tr><td><a class="prevPage browse left disabled"></a><div class="scrollable">    <div class="items">        <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>    <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>    <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>      <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>      <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>      <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">        <img src="galeri/namafoto.jpg" width="80" height="80"></a>      <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>         <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>     <a class="" href="galeri/namafoto.jpg" title="Keterangan Foto">    <img src="galeri/namafoto.jpg" width="80" height="80"></a>    </div></div><div style="position: absolute; top: 59px; left: 606px; display: none;" id="tooltip">JQuery Dan CSS</div><a class="nextPage browse right"></a><br clear="all"><div class="simple_overlay" id="gallery"><div class="close"></div><a style="opacity: 0.8;" class="prev disabled">prev</a>    <a style="opacity: 0.8;" class="next">next</a>    <div style="opacity: 0.8;" class="info"></div><img class="progress" src="galeri/loading.gif"></div></td></tr></table></body></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.

Zaenal Arif

Rabu, 02 April 2014

Cara Membuat Galeri Foto Dengan CSS Dan JQuery Di Halaman Website

Tidak ada komentar:

Posting Komentar