Untuk membuat gallery dengan mudah kita dapat mengunakan colorbox yang dapat didownload di http://jacklmoore.com/colorbox/ .
Langkahnya cukup mudah
- Lihat demonya, dan pilih demo yang anda suka misalnya example 5
- Copy css dan image dari demo tersebut ke directory misalnya colorbox
- Copy juga file javascriptnya
- Include css dan jquerynya
<link rel=”stylesheet” href=”./colorbox/colorbox.css” />
<script src=”development-bundle/jquery-1.6.2.js”></script>
<script src=”./colorbox/jquery.colorbox-min.js”></script>
<script>
$(document).ready(function(){
$(“.thumb”).colorbox({transition:’none’});
});
</script> - Kemudian codingnya sederhana misalnya:
<a href=”http://proweb.co.id/pic/portfolio_5_wearnes_gd.jpg” class=”thumb” title=”Wearnes”><img src=”http://proweb.co.id/pic/portfolio_5_wearnes_out.jpg” /></a>
<a href=”http://proweb.co.id/pic/portfolio_149_trimasjaya_gd.jpg” class=”thumb” title=”Trimas jaya”><img src=”http://proweb.co.id/pic/portfolio_149_trimasjaya_over.jpg” /></a> - Coding lengkapnya :
<!DOCTYPE html>
<html>
<head>
<title>Colorbox Gallery</title>
<link rel=”stylesheet” href=”./colorbox/colorbox.css” />
<script src=”development-bundle/jquery-1.6.2.js”></script>
<script src=”./colorbox/jquery.colorbox-min.js”></script>
<script>
$(document).ready(function(){
$(“.thumb”).colorbox({transition:’none’});
});
</script>
</head>
<body>
<a href=”http://proweb.co.id/pic/portfolio_5_wearnes_gd.jpg” class=”thumb” title=”Wearnes”><img src=”http://proweb.co.id/pic/portfolio_5_wearnes_out.jpg” /></a>
<a href=”http://proweb.co.id/pic/portfolio_149_trimasjaya_gd.jpg” class=”thumb” title=”Trimas jaya”><img src=”http://proweb.co.id/pic/portfolio_149_trimasjaya_over.jpg” /></a>
</body>
</html> - Demonya dapat dilihat di http://aris.proweb.asia/colorbox.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Membuat gallery dengan jQuery Colorbox