Dengan menggunakan feature dari dialog jQuery UI, kita dapat menampilkan gallery yang terdiri dari thumbnail dan image besarnya. Berikut akan dijelaskan bagaimana menampilkan thumbnail dan image besarnya.
Pertama-tama kita membuat tampilan thumbnail dan link ke image besar dan diberi class tertentu misalnya thumb :
<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>
<br/><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>
Kemudian coding di javascriptnya seperti di bawah ini :
(function($){
var namafile,
judul,
pilihan ={
modal:true,
autoOpen: false,
open: function() {
$(“#dialogku”).empty();
$(“<img />”,{src: namafile}).appendTo(“#dialogku”);
$(“#dialogku”).dialog(“option”,”title”,judul);
}
} ;
$(“#dialogku”).dialog(pilihan);
$(“.thumb”).click(function(e){
e.preventDefault();
namafile = $(this).attr(“href”);
judul=$(this).attr(“title”);
$(“#dialogku”).dialog(“open”);
});
})(jQuery);
Coding secara keseluruhan adalah :
<!DOCTYPE html>
<html>
<head>
<title>Dialog</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</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>
<br/><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>
<div id=”dialogku”>
</div><!–end of dialogku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.position.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.dialog.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.draggable.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.resizable.js”>
</script>
<script>
(function($){
var namafile,
judul,
pilihan ={
modal:true,
autoOpen: false,
open: function() {
$(“#dialogku”).empty();
$(“<img />”,{src: namafile}).appendTo(“#dialogku”);
$(“#dialogku”).dialog(“option”,”title”,judul);
}
} ;
$(“#dialogku”).dialog(pilihan);
$(“.thumb”).click(function(e){
e.preventDefault();
namafile = $(this).attr(“href”);
judul=$(this).attr(“title”);
$(“#dialogku”).dialog(“open”);
});
})(jQuery);
</script>
</body>
</html>
Demonya dapat dilihat di http://aris.proweb.asia/dialog_thumb.html dengan tampilan seperti di bawah ini
Kunjungi www.proweb.co.id untuk menambah wawasan anda.