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

时间:2013-12-21 14:04:15

标签: javascript php jquery image

我有一个.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但仍有很多需要学习的东西。有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:0)

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


})

这应该可以做到并且看起来不错,因为图像会淡入,而不是加载uglily。