.png)
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 komentar :