Mand4rt | Kali Ini Saya Akan Share Efek Gambar Membesar Dengan Keterangan Yang Saya Dapat Dari Situs Asing Untuk Menyingkat Waktu Langsung Saja Ikuti Tutorial Di Bawah Ini :D!
Example Thumbnail Effect With Zoom And Sliding Captions, Klik Here,,
CSS::
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
.thumbnailWrapper ul {
list-style-type: none; /* remove the default style for list items (the circles) */
margin:0px; /* remove default margin */
padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
float:left; /* important: left float */
position:relative; /* so we can use top and left positioning */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* not important, the pics we use here are too big */
position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
}
.caption{
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
display:none; /* hide by default */
/* styling bellow */
background:rgba(0,0,0,0.8);
color:white;
}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:110%;
}
.clear { clear:both; } /* to clear the float after the last item */
SCRIPT::
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
//set and get some variables
var thumbnail = {
imgIncrease : 100, /* the image increase in pixels (for zoom) */
effectDuration : 400, /* the duration of the effect (zoom and caption) */
/*
get the width and height of the images. Going to use those
for 2 things:
make the list items same size
get the images back to normal after the zoom
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
};
//make the list items same size as the images
$('.thumbnailWrapper ul li').css({
'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight
});
//when mouse over the list item...
$('.thumbnailWrapper ul li').hover(function(){
$(this).find('img').stop().animate({
/* increase the image width for the zoom effect*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* we need to change the left and top position in order to
have the zoom effect, so we are moving them to a negative
position of the half of the imgIncrease */
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)
},{
"duration": thumbnail.effectDuration,
"queue": false
});
//show the caption using slideDown event
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
//when mouse leave...
}, function(){
//find the image and animate it...
$(this).find('img').animate({
/* get it back to original size (zoom out) */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0
}, thumbnail.effectDuration);
//hide the caption using slideUp event
$(this).find('.caption').slideUp(thumbnail.effectDuration);
});
});
</script>
HTML::
<!-- start thumbnailWrapper -->
<div class='thumbnailWrapper'>
<ul>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy Conference 2010</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/4.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Coffee</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/5.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Quantum</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/6.png' /></a>
<div class='caption'>
<p class='captionInside'>Infinite Love</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/7.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Fathom</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/9.PNG' /></a>
<div class='caption'>
<p class='captionInside'>Mixed Pome</p>
</div></li>
<li><a href='#'><img src='http://web.enavu.com/demos/thumbnailZoom/images/10.jpg' /></a>
<div class='caption'>
<p class='captionInside'>Golf Lessons Online</p>
</div></li>
<div class='clear'></div><!-- clear the float -->
</ul>
</div><!-- end spolightWrapper -->
Semoga bermanfaat yaa,, ^^
6 Komentar