Membuat gallery dengan jQuery Colorbox
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.
Portfolio
Livechat
-
Sonny
Marketing -
Aris G
Support -
Agus
Support -
Kurnianto
Support -
Eko P
Designer -
Andreas
Designer -
Address
PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"
| Phone | : | 021 - 2636 3170 |
| 021 - 3377 0050 | ||
| Mobile | : | 0856 - 9360 1378 |
| 0812 - 806 2772 | ||
| 0857 - 1586 8992 | ||
| 0816 - 180 8005 | ||
| Blackberry PIN | : | 23096502 |
| Fax | : | 021 - 633 5765 |
| Web | : | www.proweb.co.id |