使用缩略图查看器同时显示缩略图和放大的图像

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


})

这应该可以解决问题，并且看起来不错，因为图像会淡入，而不是笨拙地加载。