Membuat Popup Image
Oct 5, 2017
Add Comment
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
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Popup Image"
Post a Comment