Galeri merupakan tempat memamerkan benda atau karya seni. Banyak teori dan pendapat mengenai pengertian seni, walaupun dengan pemahaman yang berbeda, namun dari teori dan pendapat yang ada dapat disimpulkan bahwa seni merupakan barang atau karya hasil dari sebuah kegiatan.
Jadi dalam artikel ini saya akan menjelaskan hasil tugas mata kuliah Pemrograman Web yang berjudul Menampilkan Gallery dengan Jquery. Disini saya menggunakan tipe Photo Popup Gallery, Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.
Bahan-bahan yang diperlukan adalah:
- Sublime Text
- Kumpulan foto-foto
- Jquery
- Jquery Lightbox
1. Source Code
- Kode HTML untuk bagian [head] [/head]
<link rel="stylesheet" type="text/css" href="css/1.css" />
<link rel="stylesheet" type="text/css" href="css/2.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquerylightbox.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
- Kode untuk mengaktifkan jquery lightbox dengan ID #gallery
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
- Kode HTML untuk bagian <body> </body>
<body>
<div class="demo-container">
<div class="twd-top">
<span class="twd-top-left"><strong>JUDUL</strong>: Menampilkan Gallery dengan Jquery <strong>OLEH</strong> : <a href="http://www.behance.net/gallery/Mini-Ghettoblaster-The-Paper-Stuff/5310013" target="_blank">RIZA SUSANTO - J1F114093</a></span>
<span class="twd-top-right"><strong><a href=""http://rizasusanto.blogspot.co.id/2016/11/pemrograman-web-menampilkan-gallery.html">KEMBALI KE ARTIKEL → </a></strong></span>
<div class="twd-clear"></div>
</div>
<header><h1>Gallery Popup Image: <span>rizasusanto.ilkom@gmail.com</span></h1></header>
<section
<div id="gallery">
<ul>
<li>
<a href="photo/1.jpg" title="Satu">
<img src="photo/thumb/1.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/2.jpg" title="Dua">
<img src="photo/thumb/2.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/3.jpg" title="Tiga">
<img src="photo/thumb/3.jpg" alt="tutorial web design"/>
</a>
</li>
<li>
<a href="photo/4.jpg" title="Empat">
<img src="photo/thumb/4.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/5.jpg" title="Lima">
<img src="photo/thumb/5.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/6.jpg" title="Lima">
<img src="photo/thumb/6.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/7.jpg" title="Lima">
<img src="photo/thumb/7.jpg" alt="tutorial web design" />
</a>
</li>
<li>
<a href="photo/8.jpg" title="Lima">
<img src="photo/thumb/8.jpg" alt="tutorial web design" />
</a>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>
- Kode CSS untuk memperindah tampilan
body{background:url('../images/white_carbonfiber.png');}
section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}
#gallery{padding:10px}
#gallery ul{
list-style-type:none;
}
#gallery ul li{
display:inline-block;
padding:5px;
}
#gallery ul li img:hover{
opacity:0.8;
}
2. Output
- Tampilan Gallery Photo Popup.
- Tampilan foto saat thumbnail di klik.
Demo program klik disini:
Demikian postingan saya kali ini, semoga bermanfaat.
Terima kasih.
