Ni Foto-foto rosi bile tak racing............
- Nih bahan-bahan untuk adonan nya tingagl di GODOK aja kalo mau :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* ---------------
Zoom efect with jquery
---------------------------------- */
ul.jzoom {
float: left;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
}
ul.jzoom li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.jzoom li img {
width: 100px; height: 100px; /* Set the small jzoomnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.jzoom li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEfMjaOeR4gSW5yXqEMOAopoGWJOWmwjvX_sG-oMTbEzsXKpfbwM_ETxbbn_JL9N4y8M_Rjg47Q4sl-VzjIA8c9QtHC7h0HXCGEoBiXbVZgRU9XgEBs921bq3JoPxSvkJYwiovsvjnZPS/) no-repeat center center;
}
selanjutnya simpan kode berikut tepat diatas kode </head> :Zoom efect with jquery
---------------------------------- */
ul.jzoom {
float: left;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
}
ul.jzoom li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.jzoom li img {
width: 100px; height: 100px; /* Set the small jzoomnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.jzoom li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEfMjaOeR4gSW5yXqEMOAopoGWJOWmwjvX_sG-oMTbEzsXKpfbwM_ETxbbn_JL9N4y8M_Rjg47Q4sl-VzjIA8c9QtHC7h0HXCGEoBiXbVZgRU9XgEBs921bq3JoPxSvkJYwiovsvjnZPS/) no-repeat center center;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> $(document).ready(function(){ $("ul.jzoom li").hover(function() {$(this).css({'z-index' : '10'});$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',marginLeft: '-110px',
top: '50%', left: '50%',
width: '174px',height: '174px',
padding: '20px'}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',marginLeft: '0',
top: '0',left: '0',
width: '100px', height: '100px',
padding: '5px' }, 400);
}); $("ul.jzoom li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
});
});
</script>
<ul class="jzoom">
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Descriptions" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
</ul>
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Descriptions" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
<li><a href="#"><img alt="Description" height="150" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg" width="200" /></a></li>
</ul>
catatan:
Di kotak yang berwarna ijo tulisan yang berwana biru silagkan ganti dengan gambar link anda.
selanjutnya simpan di gadget ataupun di postingan sesuai kebutuhan dan keinginan lho,,,,,
itu saje.........
sedotan: http://www.kangdadang.co.cc
Relate Post:
Labels:
Tak Seperti Biasanya
Posting Komentar
Terima kaseh