Live Preview Untuk Gambar Menggunakan Jquery

Tentu pernah anda mengunjungi website yang ada galeri fotonya .biasanya ada thumbnail atau tampilan gambar yang ukuranya kecil,namun apabila di click akan tampil ukuran aslinya.
Pada trik ini,saya akan memebuat cara yang berbeda untuk melihat gambar dalam ukuran aslinya,dimana apabila kursor mouse berada di atas gambar ( tanpa di click ),maka akan tampil gambar dalam ukuran aslinya.

Untuk lebih jelasnya kita menggunkan pluign jquery image preview (pimg.js)perhatiakn skrip berikut ini yang di tebalkan.


<html>
<head>


<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="pimg.js"></script>
<script type="text/javascript" >
$(document).ready(function($){
pimg();
})
</script>

<style type="text/css">
#pimg {
display: none;
position: absolute;
}
</style>
</head>

<body>
<div>
<p><img img_src="images/1.jpg" class="pimg" src="images/1.jpg" width="100" height="65"></p>
<p><img img_src="images/2.jpg" class="pimg" src="images/2.jpg" width="100" height="65"></p>
<p><img img_src="images/3.jpg" class="pimg" src="images/3.jpg" width="100" height="65"></p>
</div>
</body>
</html>

 


JIKA MOUSE DI GERAKAN KE FOTO KECIL SECARA OTOMATIS PREVIEW FOTO BESARNYA AKAN MUNCUL

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Livechat

  • Eddy Marketing

  • Iwan Marketing

  • Agus Support

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Marketing : 021-2636-3170
    021-4631-0337 (Edi)
    0812-3356-3561 (Edi)
    087-888-190-566 (Iwan)
     
WhatsApp : 0813-1977-8908 (Iwan)
    0812-806-2772
     
Support : 021 - 3377 0050
    08788-9089-588 (Agus)
     
Finance : 021-2636-3170
    0816-180-8005 (Yudi)
     
Web : www.proweb.co.id