-Mungkin karya yang satu ini tida begitu perfect menurut agan ....tapi perfect menurut saya :D ..
btw,image zoom itu di script ini itu pada saat cursor mouse agan terkena pada image..maka image otomatis ke zoom sendiri ..zoom+ ..
.:SS:.
(Tips:klik kanan image>klik "open link in new tab" untuk memperbesar image!)
Btw,langsung aja dah..
-Langka pertama,agan buat file dengan nama "index.php" ..kode :
Tips :<!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>Lygacool | 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';
$link = '| <a href="http://p.pw/S9c">Kembali ke Blog</a>';
?>
<div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9-gMLeKBLqFnKLtxWaPv1wV7xyjzfsZgY5RRsjx0Isr1AgU2nL2jviOahTb3kyMrNRzsHJLblBZnq45RMflT7YHujC84agNY_Gke-sN0faZP5wP2ay0ihUL8CzFCJFGUhdUqB01re6Y/s1600/step+1.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/S9c">Blog</a>
<p>Tempat yang disarankan untuk anda.</p>
</div>
</div>
<div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_HQS2on9EmQgP-cevyn2MPdJc5DEJRUojTnufPVSwbEPkggL0u_PZfrqZH3TV_pTks-kd0Hiei5dBPUp01b8KHNM7oqaDyRBbVwb2zRiVPgPdSoTiGKtiaVYqWH9cAJQH0JQQN8CtzKI/s1600/Step+1.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/6r3">Games</a>
<p>Tempat yang di sarankan untuk anda pecinta games.</p>
</div>
</div>
<div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2K8loczF5JrOTMvmpbLS3b8Oesss_Ls3XEVZXaWQV2wKHfQn2Jo_aFQWXF6AZk9P0PsRFzX5VC-I9xPjBzaMTh12CTCRwVGdRCDROpaTtgM-5HIs9ki_bFb1A4Iv4ZS9CvlG9vF-uXYf/s468/97-bumi2.jpg" height="271" width="304" />
<div class="caption"> <a href="http://p.pw/Dvl">Forum</a>
<p>ASIK ASIK Jos!!</p>
</div>
</div>
<div class="clear"></div>
<?php include 'footer.php';?>
</body>
</html>
-Tulisan bewarna Biru Tebal itu di ubah linknya gan sesuai keinginan ..
-Tulisan bewarna Merah itu di ubah textnya sesuai keinginan ..
-Tulisan bewarna Pink itu di ubah dengan link image/foto ..
==============================================
-Lalu bagian yang kedua ...agan buat file dengan nama "header.php" ..kode :
<html>
<body>
Text agan ..
</body>
</html>
--Atau kode pada header.php bisa agan isi sesuai ke inginan :D--
=================================================
-Lalu bagian yang ketiga ...agan buat file dengan nama "footer.php" ..kode :
<html>
<body>
Text agan ..
</body>
</html>
--Atau kode pada header.php bisa agan isi sesuai ke inginan :D--
=======================================================
Selesai dah :D..btw,untuk tutor pengunaannya mungkin agan sudah tau ..:D
=======================================================
Btw,agan kurang puas hanya dengan SS ??
-DEMO : KLIK DISINI
=======================================================
Btw,agan malas membuatnya ?
Download : KLIK DISINI
Mirror : KLIK DISINI (MIRROR)
=======================================================
Bagi yang mau kritik/saran/dll ....silahkan comment,90% saya balas dengan cepat :D
banyak link yang mati bro
ReplyDeleteAne coba gk mati kok gan linknya :) ..
Deletelink y mati pak
ReplyDelete