jQuery:同一页上有多个照片库

我正试图找出如何在一个页面上多次使用jQuery照片库。大多数情况下,如果不是所有jQuery库都存在,那么用户可以使用一个ID来定位主库图像并替换该属性。

如何构造一个库并仅替换相关的主库图像?

<div class="gallery">
    <div class="main_view">
        <img src="092519.jpg" alt="Some Image" />
    </div>
    <ul class="thumb">
        <li><a href="092519.jpg"><img src="092519.jpg" alt="" /></a></li>
        <li><a href="092520.jpg"><img src="092520.jpg" alt="" /></a></li>
        <li><a href="092521.jpg"><img src="092521.jpg" alt="" /></a></li>
        <li><a href="092522.jpg"><img src="092522.jpg" alt="" /></a></li>
        <li><a href="092523.jpg"><img src="092523.jpg" alt="" /></a></li>
        <li><a href="092524.jpg"><img src="092524.jpg" alt="" /></a></li>
        <li><a href="092525.jpg"><img src="092525.jpg" alt="" /></a></li>
        <li><a href="092526.jpg"><img src="092526.jpg" alt="" /></a></li>
    </ul>
</div>

查询:

$("ul.thumb li a").click(function () {
    var mainImage = $(this).attr("href"); // Find Image Name
    //$(".main_view img").attr({ src: mainImage });
    $(this).closest("div.main_view").hide(); // doesn't work
    return false;
});