【SiteFactory】文章内容页里的图片如何实现点击后可以放大浏览？

admin

俺在文章内容页里插入了宽为1024PX甚至更大的图片，已经用CSS成比例控制为宽550PX显示。但俺希望用户能点击该550PX的图后，能放大至原来大小的图片查看，请问如何才能实现。谢谢！

解决方法是，用文章内容图片ColorBox效果，亲自实践了，很不错！！
文章内容图片ColorBox效果.rar (40.08 KB, 下载次数: 2)

2010-5-22 14:41 上传

点击文件名下载附件

1.上传Skin到网站根目录。
2.在内容模板中加上代码：

<script language="javascript" type="text/javascript" src="/Skin/ColorBox/jquery-1.4.2.min.js"></script>
<link type="text/css" media="screen" rel="stylesheet" href="/Skin/ColorBox/colorbox.css" />
<script type="text/javascript" src="/Skin/ColorBox/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){  
   $("#zoom img").each(function(){
var _image= $(this).attr('src');
if($(this).parent("a").length > 0){
$(this).unwrap();
           $(this).wrap('<a href="'+_image+'" rel="example1"></a>');
}
else{
           $(this).wrap('<a href="'+_image+'" rel="example1"></a>');
}  
   });
$("a[rel='example1']").colorbox();
});
</script>

3.文章内容标签放在<div id="zoom"></div>里。
<div id="zoom">
文章内容
</div>

注：unwrap()为jQuery 1.4的新方法，旧版jQuery库不支持。

weishengtang

不错，支持，，

蓝月之泪

非常感谢，很需要