Menampilkan sebuah foto dengan JQuery Zoom
Sekarang banyak toko-toko online yang bertebaran di dunia maya yang menjajakan beberapa barang dagangan mereka dengan tampilan yang sangat aktraktif seperti pada gambar di bawah ini.
Haah, ingin membuatnya apa mari ikuti langkahnya sebagai berikut:
langkah 1.
Buatlah 2 gambar dimana ada yang besar dan kecil seperti berikur ini":
.jpg)
kecil.jpg.jpg)
Ini nih jurus jitu buat menghasilkan gambar yang mashur dan makyus pokoknya
Haah, ingin membuatnya apa mari ikuti langkahnya sebagai berikut:
langkah 1.
Buatlah 2 gambar dimana ada yang besar dan kecil seperti berikur ini":
kecil.jpg.jpg)
besar.jpg
langkah 2Ini nih jurus jitu buat menghasilkan gambar yang mashur dan makyus pokoknya
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jqzoom : <default></title>
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript' src='jquery.jqzoom1.0.1.js'></script>
<link type='text/css' href='jqzoom.css' rel='stylesheet'/>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var options ={
zoomType: 'standard',
zoomWidth: 200,
zoomHeight: 200,
xOffset: 10,
yOffset: 0,
position: "right" ,
lens:true,
lensReset : false,
imageOpacity: 0.2,
title : true,
alwaysOn: false,
showEffect: 'show',
hideEffect: 'hide',
fadeinSpeed: 'medium',
fadeoutSpeed: 'medium',
preloadImages :true,
showPreload: true,
preloadText : 'Loading zoom',
preloadPosition : 'center'
}
$(".myvalue").jqzoom(options);
});
</script>
<a href="foto1.jpg" class="myvalue" title="foto coretan">
<img src="foto.jpg" title="Foto coretan" >
</a>
</body>
</html>
DEMO | DOWNLOAD
Comments
Post a Comment