シャドウボックスが統合されたシンプルな画像ギャラリーを使用しています。これが通常のスクリプトです。
<div id="gallery">
<div id="panel">
<p><a id="showimg" href="images/image_01.jpg" rel="shadowbox">
<img id="largeImage" src="images/image_01.jpg" />
</a></p>
<div id="description">1st image description</div>
</div>
<div id="thumbs">
<img src="images/image_01.jpg" alt="1st image description" />
<img src="images/image_02.jpg" alt="2nd image description" />
<img src="images/image_03.jpg" alt="3rd image description" />
<img src="images/image_04.jpg" alt="4th image description" />
<img src="images/image_05.jpg" alt="5th image description" />
</div>
</div>
</div>
<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
</script>
大きな画像の URL が変更されていないことに気付いたので、スクリプトに別の行を追加して、マウスが画像を変更するたびに href を変更しました。
<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src'));
$('#description').html($(this).attr('alt'));
$('#showimg').attr('href', $(this).attr('src'));
});
</script>
それが正しいかどうかはわかりませんが、マウス ホバーを画像に渡すと、URL は常に異なりますが、SHADOWBOX は常に同じ画像 (最初の画像) を読み込みます。
少し助けてください!