Catatan Hadi : Membuat Effeck Live Preview Pada Gambar

Bagi pengguna Facebook, Twitter, ataupun website-website lainnya, tentunya pasti anda sudah sering melihat foto-foto teman anda atau siapapun itu. Biasanya pada website-website tersebut menampilkan foto yang berukuran kecil, dan jika ingin melihat ukuran yang sebenarnya dari foto tersebut, kita harus mengkliknya terlbih dahulu. Mungkin tidak masalah jika foto yang ingin kita liat hanya sedikit, tetapi bagaimana jika foto yang ingin kita liat itu begitu banyak, dan koneksi internet kita tidak memungkinkan. tentunya hal tersebut dapat memakan waktu kita.

Pada trik ini saya akan menunjukkan sesuatu yang berbeda pada anda. Berbeda dengan Facebook dan website lainnya, yang perlu mengklik terlebih dahulu untuk melihat foto yang lebih besar. Dengan menggunakan trik ini anda hanya cukup menggerakan kursor mouse saja kearah foto yang ingin anda lihat dalam ukuran besar, maka akan langsung tampil foto dengan ukuran yang sebenarnya,

Untuk lebih jelasnya anda bisa membuatnya langsung.

Disini kita menggunakan plugin JQuery pimg.js .

buatlah programnya seperti ini:

<html>
 <head>
 <title>Live Preview</title>                                                    
 
 <script type="text/javascript" src="../jquery/jquery.js"></script>
 <script type="text/javascript" src="../jquery/livepreview.js"></script>
 
 <script type="text/javascript" >
 $(document).ready(function($){
  pimg();
 }) 
 </script>

 <style type="text/css">
 #pimg {
  display: none;
  position: absolute;
 }
 h2 {
  color:white;
 }
 h4 {
  color:white;
 }
 </style>
 </head>
 <body bgcolor="black">
 <center>
 <h2>LIVE PREVIEW</h2>
 <h4>geser kursor mouse kearah foto untuk melihat ukuran yang sebenarnya</h4>
 <table border="1">
 <tr>
  <td><img img_src="../gambar/php2.jpg" class="pimg" src="../gambar/php2.jpg" width="100" height="95"></td>
  <td><img img_src="../gambar/254141_1739543054929_2339128_n.jpg" class="pimg" src="../gambar/254141_1739543054929_2339128_n.jpg" width="100" height="95"></td>
  <td><img img_src="../gambar/67463_1422532849872_8283416_n.jpg" class="pimg" src="../gambar/67463_1422532849872_8283416_n.jpg" width="100" height="95"></td>
  <td><img img_src="../gambar/384675_2374782615521_269187359_n.jpg" class="pimg" src="../gambar/384675_2374782615521_269187359_n.jpg" width="100" height="95"></td>
 </tr>
 <tr>  
  <td><img img_src="../gambar/542173_4264150768544_1165075416_n.jpg" class="pimg" src="../gambar/542173_4264150768544_1165075416_n.jpg" width="100" height="95"></td>
  <td><img img_src="../gambar/285186_4268947248453_777273980_n.jpg" class="pimg" src="../gambar/285186_4268947248453_777273980_n.jpg" width="100" height="95"></td>
  <td><img img_src="../gambar/531422_3553726048370_661931874_n.jpg" class="pimg" src="../gambar/531422_3553726048370_661931874_n.jpg" width="100" height="95"></td> 
  <td><img img_src="../gambar/248600_4264140608290_1123963134_n.jpg" class="pimg" src="../gambar/248600_4264140608290_1123963134_n.jpg" width="100" height="95"></td>  
 </tr>
 </table>
 </body>
 </html>

sekarang coba anda save dan jalankan program tersebut,
jika benar maka akan keluar output seperti ini:

sekarang coba anda gerakan mouse kesalah satu gambar tersebut, jika programnya benar, maka outputny akan seperti ini:

akan terlihat gambar dengan ukuran yang sebenarnya,
jadi dengan menggunakan cara ini,
anda tidak perlu melakukan klik sana sini lagi untuk memperbesar foto pada website anda .
semoga tutorial ini dapat bermanfaat buat teman-teman :)

Catatan Hadi

Pages

Rabu, 27 Februari 2013

Membuat Effeck Live Preview Pada Gambar

Tidak ada komentar:

Posting Komentar