MEMBUAT ZOOM IMAGE
-Langka pertama,agan buat file dengan nama "index.html" kode :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Zoom Image</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
var move = -15
zoom = 1.2;
$('.item').hover(function() {
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeOut(400);
});
});
</script>
<style>
.item {
width:304px;
height:271px;
border:4px solid #333;
margin:30px 12px 10px 5px;
overflow:hidden;
position:relative;
float:left;
}
.item .caption {
width:304px;
height:71px;
bottom:0;
color:#fff;
background:#000;
font-weight:700;
position:absolute;
left:0;
display:none;
filter:alpha(opacity=82);
-moz-opacity:0.9;
opacity: 0.9;
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:17px;
letter-spacing:-1px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
color:#fff;
line-height:15px;
font-size:12px;
}
.item img {
border:0;
position:absolute;
}
</style>
</head>
<body>
<?php include 'header.php';
?>
<div class="item"> <img src="http://flowerian.com/wp-content/uploads/2015/01/Cara-Menanam-Bunga-Mawar-Potong.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/S9c">Mawar</a>
<p>Tempat Koleksi Semua Jenis Bunga Mawar</p>
</div>
</div>
<div class="item"> <img src="http://lintangluku.net/wp-content/uploads/2012/07/katak-bibir-putih.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/6r3">Katak</a>
<p>Bagi Pecinta Katak, Wajib kunjungi !!</p>
</div>
</div>
<div class="item"> <img src="https://griyagawe.files.wordpress.com/2014/12/tips-sederhana-agar-buah-naga-cepat-panen.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/Dvl">Buah Naga</a>
<p>Bagi Pecinta Buah Naga,Simak Informasi Berikut</p>
</div>
</div>
<div class="clear"></div>
<?php include 'footer.php';?>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Zoom Image</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {
var move = -15
zoom = 1.2;
$('.item').hover(function() {
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeIn(300);
},
function() {
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});
$(this).find('div.caption').stop(false,true).fadeOut(400);
});
});
</script>
<style>
.item {
width:304px;
height:271px;
border:4px solid #333;
margin:30px 12px 10px 5px;
overflow:hidden;
position:relative;
float:left;
}
.item .caption {
width:304px;
height:71px;
bottom:0;
color:#fff;
background:#000;
font-weight:700;
position:absolute;
left:0;
display:none;
filter:alpha(opacity=82);
-moz-opacity:0.9;
opacity: 0.9;
}
.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:17px;
letter-spacing:-1px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
.item .caption p {
padding:5px;
margin:0;
color:#fff;
line-height:15px;
font-size:12px;
}
.item img {
border:0;
position:absolute;
}
</style>
</head>
<body>
<?php include 'header.php';
?>
<div class="item"> <img src="http://flowerian.com/wp-content/uploads/2015/01/Cara-Menanam-Bunga-Mawar-Potong.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/S9c">Mawar</a>
<p>Tempat Koleksi Semua Jenis Bunga Mawar</p>
</div>
</div>
<div class="item"> <img src="http://lintangluku.net/wp-content/uploads/2012/07/katak-bibir-putih.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/6r3">Katak</a>
<p>Bagi Pecinta Katak, Wajib kunjungi !!</p>
</div>
</div>
<div class="item"> <img src="https://griyagawe.files.wordpress.com/2014/12/tips-sederhana-agar-buah-naga-cepat-panen.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/Dvl">Buah Naga</a>
<p>Bagi Pecinta Buah Naga,Simak Informasi Berikut</p>
</div>
</div>
<div class="clear"></div>
<?php include 'footer.php';?>
</body>
</html>
Tips :
-Tulisan bewarna Biru Tebal itu di ubah linknya
-Tulisan bewarna Merah itu di ubah textnya sesuai keinginan ..
-Tulisan bewarna Pink itu di ubah dengan link image/foto ..
Berikut adalah tampilan zoom emage nya.
Dan ini adalah link nya : file:///D:/disk_1_201453002%20lena/index.html
Tidak ada komentar:
Posting Komentar