javascript - 自作のライトボックスで jQuery フェードイン効果

Question

この問題を解決する方法がよくわかりません。私はこのイメージを持っています。サムネイル画像で、クリックすると大きな画像がポップアップします。ダウンロード可能なライトボックスを使用する必要があるとは言わないでください。ポップアップだけでなく、誰かがクリックしたときにもフェードイン効果が欲しいことを除けば、これは私にとって完璧です。

    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='block'; document.getElementById('image1_lightbox').style.display='block';">
    <div class="thumbnail"><img src="image1.jpg" /></div>
    </a>
    <div id="image1" class="underlay" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    </div>
    <div id="image1_lightbox" class="lightbox">
    <a href="javascript:void();" onclick="document.getElementById('image1').style.display='none'; document.getElementById('image1_lightbox').style.display='none';">
    <div><img width="100%" height="100%" src="image1" /></div>
    <div style="padding-left:6px; padding-bottom:8px; text-shadow:0.1em 0.1em #eee;">Some text asdasdasdasd.</div></a>

これが私の CSS (ライトボックスとアンダーレイ クラス) です。

.underlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.5;
opacity:.50;
filter:alpha(opacity=50);
}

.lightbox{
display:none;
position:fixed;
top:100px;
left:25%;
width:50%;
z-index:100000;
background-color:#fff;
box-shadow:0px 0px 10px 5px #161616;
text-decoration:none;
}