Posts

Assalamualaikum Warahmatullahiwabarakatuh, kali ini saya akan sharing ilmu bagaimana cara membuat image preview pada web kita, nah disini saat kita klik sebuah gambar maka akan menampilkan pop up dari gambar tersebut. Berikut caranya

1. Buat kodingan berikut ini pada file dimana teman-teman akan menampilkan gambarnya

<a href="#" class="pop">								    
   <img width="80" height="80" 
src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">
</a>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">							   
    <div class="modal-content">         						      
     <div class="modal-body">
								      	 
       <button type="button" class="close" data-dismiss="modal"><span 
       aria-hidden="true">&times;</span><span class="sr- 
       only">Close</span></button>						        
      <img src="" class="imagepreview" style="width: 100%;">
								      
     </div>							    
   </div>								   
  </div>
</div>

2. Selanjutnya tambahkan script berikut pada file yang sama saat kita ingin menampilkan gambar

<script>
   $(function() {
     $('.pop').on('click', function() {
       $('.imagepreview').attr('src',$(this).find('img').attr('src'));
       $('#imagemodal').modal('show');   
       });		
   });
</script>

3. Save dan coba jalankan maka akan tampil pop up ketika kita klik gambarnya

Good Luck!