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

【问题标题】：using a thumbnail viewer to display both the thumbnail and the enlarged image使用缩略图查看器同时显示缩略图和放大的图像
【发布时间】：2014-01-10 06:30:18
【问题描述】：

我有一个显示目录中图像缩略图的 .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>

ThumbnailViewer

您可以通过以下方式查看此脚本的运行情况：

Loading a thumbnail with large image

目前我必须滚动缩略图来放大它。我知道如何将其更改为“点击”，但不会在页面加载时自动加载放大的图像。 url中的?name=Solanti可以改成任意图片文件名。

我正在快速学习 jquery，但还有很多东西要学。谁能帮帮我？

【问题讨论】：

标签： javascript php jquery image

【解决方案1】：

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


})

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

【讨论】：