自動添加放大圖標到縮略圖

Question

我正在尋找添加居中放大鏡圖標到我的投資組合庫。 像http://jquerystyle.com/gallery的效果一樣。 我知道我可以用css在每個實例上做到這一點，但我想找到一種方法來自動執行此操作。任何jQuery插件，這樣做？

謝謝！

Answer 1

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

來源：http://jsbin.com/useki4/4/edit

jQuery的一點點增加了做動畫過渡：

$(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; 
}