Cara membuat pop up gambar di html
|
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.
<html> <head> <meta charset="utf-8"> <title>Popup Imagetitle> <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 = ""; appear_image = appear_image.concat(" Itu dia scriptnya selamat mencoba, jika artikel ini bermanfaat silakan share. jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah |
