使用縮略圖查看器同時顯示縮略圖和放大的圖像

Question

我有一個.js文件，該文件顯示目錄中圖像的縮略圖。 設置為在鼠標懸停時觸發並顯示放大的圖像。 我需要修改此.js以便在頁面加載時在同一頁面上以兩個不同的分區顯示縮略圖和放大的圖像。

觸發.js的代碼是：

    <a href="http://www.marknutt.com/photos/storage/<?php echo $rows['file']; ?>" data-                         lightbox="" name="<?php echo '<b><i>'.$rows['painting'].'</i></b>'.'&nbsp;&nbsp;&nbsp;'."<font color='#585858'>".$rows['year2'].'&nbsp;'    .$medb.' on.$rows['material2'].'&nbsp;&nbsp;&nbsp;'.$pieces[0].' x '.$pieces[1].' x '.$pieces[2].'&nbsp;in.&nbsp;&nbsp;&nbsp;'
."<sup><font size=&quot;1&quot;>".$location2a.'</font></sup>&nbsp;'.$rows['location2'].'&nbsp;&nbsp;&nbsp;'.$status3.'&nbsp;&nbsp;&nbsp;'.
"<a id='displayText' href='javascript:toggle()'></font><font color=&quot;#31B404&quot;><i>Price</i></font></a><div id='toggleText' style='display: none' >&nbsp;&nbsp;".$pieces2a.$pieces2."</div>".
'<br>'.$markcom.'<br>'.$com.$query4d.'</a>'; ?>"

title="<?php echo $rows['painting']; ?>" 

onclick="return false"

style="max-width:70px;max-height:70px;" rel="enlargeimage2" 
rev="targetdiv:loadarea,link:http://www.marknutt.com/photos/storage/
<?php echo $rows['file']; ?>">

這將從目錄中提取圖像，並將它們顯示在帶有一列表的分區中。 rel =“ enlargeimage2”激活此腳本。

<script type="text/javascript" src="thumbnailviewer_b.js"></script>

縮略圖查看器

您可以通過以下方式查看該腳本的運行情況：

加載大圖縮略圖

目前，我必須滾動縮略圖以放大它。 我知道如何將其更改為“單擊”，而不是在頁面加載時自動加載放大的圖像。 網址中的？name = Solanti可以更改為任何圖像文件名。

我正在快速學習jquery，但仍有很多東西要學習。 誰能幫幫我嗎？

Answer 1

$(window).load(function(){
    $('#<yourImageID').fadeIn(1500); //fade image in once all the images (only 1?!) are loaded


})

這應該可以解決問題，並且看起來不錯，因為圖像會淡入，而不是笨拙地加載。