Fancy Thumbnail Hover Effect jQuery

User Rating: / 0
PoorBest 

Hellow, if you follow this tutorial you will descover a very Fancy Thumbnail Hover Effect jQuery!

In the first stept create a html page and in the head section create link with css page, jQuery plugin and copy the script below:

<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb 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);
});

//Swap Image on Click
    $("ul.thumb li a").click(function() {
       
        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });
 
});
</script>

In the html page, in the body tag create the link between html pange and the image:

<ul class="thumb">

    <li><a href="main_image1.png"><img src="thumb1.png" alt="" /></a></li>
    <li><a href="main_image2.png"><img src="thumb2.png" alt="" /></a></li>
    <li><a href="main_image3.png"><img src="thumb3.png" alt="" /></a></li>
    <li><a href="main_image4.png"><img src="thumb4.png" alt="" /></a></li>
    <li><a href="main_image5.png"><img src="thumb5.png" alt="" /></a></li>
    <li><a href="main_image6.png"><img src="thumb6.png" alt="" /></a></li>
    <li><a href="main_image7.png"><img src="thumb7.png" alt="" /></a></li>
    <li><a href="main_image8.png"><img src="thumb8.png" alt="" /></a></li>
    <li><a href="main_image9.png"><img src="thumb9.png" alt="" /></a></li>

</ul>

<div id="main_view">
    <a href="#" title=""><img src="main_image1.png" alt="" /></a>
   
</div>

Now, create a css file, i put style.css name if you prefer another name be carefull with the link of head tag!  

ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 10px;
    width: 360px;
}
ul.thumb li {
    margin: 0; padding: 5px;
    float: left;
    position: relative;
    width: 110px;
    height: 110px;
}
ul.thumb li img {
    width: 100px; height: 100px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
    background:url(thumb_bg.png) no-repeat center center;
    border: none;
}
#main_view {
    float: left;
    padding: 9px 0;
    margin-left: -10px;
}

That is all, bye!

This script has been developed by http://www.sohtanaka.com!