썸네일에 자동 확대 아이콘 추가

Question

내 포트폴리오 갤러리에 중심 돋보기 아이콘을 추가하려고합니다. 효과는 http://jquerystyle.com/gallery에 있습니다. 각 인스턴스마다 CSS를 사용하여이 작업을 수행 할 수 있음을 알고 있지만 자동으로 수행하는 방법을 찾고 싶습니다. 이 작업을 수행하는 모든 jquery 플러그인?

감사합니다.

Answer 1

DEMO :http://jsbin.com/useki4/4

SOURCE : JQuery와 약간 애니메이션 전환을 수행하기위한 추가http://jsbin.com/useki4/4/edit

는 :

$(function() { 
    $('.gallery li').hover(function() { 
     $(this).attr('class', 'current'); 
     $('.gallery li:not(.current)').stop().fadeTo(300, 0.25); 
    }, 
    function() { 
     $(this).removeClass('current'); 
     $('.gallery li').stop().fadeTo(150, 1.0); 
    }); 
});​ 

가 가정 HTML

<ul class="gallery"> 
    <li> 
     <a href="#"> 
     <img src="" alt="" /> 
     <span class="magnifier"></span> 
     </a> 
    </li> 
</ul> 

는 CSS :이 작업을 수행하기위한

.gallery { 
    list-style: none; 
    width: 600px; 
    margin: 0 auto 
} 
.gallery li { 
    position: relative; 
    margin: 0; 
    overflow: hidden; 
    float: left; 
    display: inline; 
} 
.gallery li a { 
    text-decoration: none; 
    float: left; 
} 
.gallery li a img { 
    width: 150px; 
    height: 150px; 
    float: left; 
    margin: 0; 
    border: none; 
    padding: 10px; 
} 
.gallery li .magnifier { 
    width: 32px; 
    height: 32px; 
    background: transparent url(magnifier_zoom_in.png) no-repeat; 
    position: absolute; 
    right: 65px; 
    bottom: 65px; 
    font-size: 1.2em; 
    color: #fff; 
    padding: 0; 
} 
.gallery a:hover .magnifier { 
    background: transparent url(magnifier_zoom_out.png) no-repeat; 
}