Membuat Popup Image
Selamat Siang kali ini kita akan membagikan script popup image menggunakan CSS dan JQuery, popup image yaitu menampilkan gambar dengan ukuran yang lebih besar ketika di klik. script ini bisa anda pakai untuk membuat gallery gambar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popup Image</title>
<script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
<style media="screen">
body { width: 100%; height: 100%; background: grey; margin: 0; }
main { width: 100%; height: 100%; position: absolute; }
#my_image {width: 200px; margin: 20px; cursor: zoom-in;}
#my_image:hover {opacity: 0.7;}
#appear_image_div {width: 100%; height: 100%; position: absolute; z-index: 10; opacity: 0.7; background: #002447;}
#appear_image {display: block; margin: auto; position: relative; z-index: 11; top: 20px;}
#close_image {position: fixed; z-index: 12; top: 20px; right: 20px; cursor: pointer;
font-family: sans-serif; color: #fff; font-size: 15pt;}
#close_image:hover{opacity: 0.7;}
</style>
<script type="text/javascript">
jQuery(function($){
$('#my_image').click(function(){
var img = $(this).attr("src");
var appear_image = "<div id='appear_image_div' onclick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+img+"' />");
appear_image = appear_image.concat("<div id='close_image' onclick='closeImage()'>x</div>");
$('body').append(appear_image);
});
});
function closeImage() {
$('#appear_image_div').remove();
$('#appear_image').remove();
$('#close_image').remove();
}
</script>
</head>
<body>
<main>
<img src="perahu.jpg" id="my_image">
</main>
</body>
</html>
Itu dia scriptnya selamat mencoba, jika artikel ini bermanfaat silakan share. jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah
Belum ada Komentar untuk "Membuat Popup Image"
Posting Komentar