-->

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

0 Response to "Membuat Popup Image"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel