使用zoomify在网页中嵌入巨型图片

Zoomifyer介绍

 Zoomifyer彻底改变了使用图像的方式，它在任何尺寸图像的浏览上结合了快速缩放和全景浏览功能 。Zoomifyer增强了发布无缝的Flash整合能力，具有一步完成图像预处理、所有需要的界面选项、完整的包括FLA源码在内的可定制性、100%标准的发布-可以产生精确的JPEGs, HTML, and Flash文件等特点。此处它还为幻灯片播放、3D物体和全景动画、基于web的注释提供了多种图像组件。适用于Flash MX 2004及Flash 8

Zoomify实际上是把文件分割处理后用Flash载入，然后用户可以在当前页面来查看这些巨大的图片，也是PS CS4的一个插件，不过带着一个难看的LOGO，不知道怎么去掉!

使用方法:

用photoshop cs4打开一张超大超清晰的大图,然后选择文件,导出为zoomify,会生成一个以图片名为名的目录.

还有一种方法就是去官方下载 Zoomify Express，它是Zoomify的轻量级版本，免费的，一般用户足够用了；

下载下来解压后运行，选中需要嵌入的图片，Zoomify会生成一个以图片名为名称的目录；
把导出的目录放在你的网站目录下,然后把html里的flash路径指向这个目录中的zoomifyViewer.swf就OK了.加载flash有不少方法,我这里用的是swfobject来加载的这个flash.

 下面是效果,不错吧...这个例子,FLASH+图片,一起有差不多三M.点击图片可放大

 

 

如果要从后台上传怎么办呢? 可以用ICSharpCode.SharpZipLib.dll,把用生成出来的目录打包成ZIP传到服务器上,然后再解压成文件夹,就OK了,

关于ICSharpCode.SharpZipLib的使用园子里应该一大把介绍,不会的找找看!

你可以使用普通的flash代码嵌入zoomify,我使用的是swfobject.js,因为我觉得这个好用,方便,而且不会有兼容问题,也不会有垃圾代码,没用过的可以看看SWFObject简介与使用,

打字累,还是直接贴代码吧!

HTML代码:

<script type="text/javascript" src="/js/swfobject.js"></script>   
<div style="height: 580px; width:700px" id="divFlash">   
</div>   

 

var so = new  SWFObject("/images/zoom/zoomifyViewer02.swf","portfolio", "700", "450", "6", "#A7A690");   //images/zoom/zoomifyViewer02.swf是你存在数据库的地址    
so.addVariable("zoomifyImagePath","/images/portfolio/campus/uakron3D/");   //碎片目录名    
so.addParam("wmode", "transparent");       
so.addParam("menu", "false");       
so.write("divFlash");     

 

 好了,此时你的FLASH可以完全显示了,不过请注意,有一个问题,在IE中,你再刷新一次,FLASH中的图片不来了..可能是由于zoomify 要加载图片,有缓存的问题,要清除cache,就得加一个随机数了.最后的javascript代码是这样的

 

function rand(n) {          
    return (Math.floor(Math.random() * n + 1));          
}          
var randrandom_number = rand(10000);         
var so = new  SWFObject("/images/zoom/zoomifyViewer02.swf?random_number=" + random_number","portfolio", "700", "450", "6", "#A7A690");    
so.addVariable("zoomifyImagePath","/images/portfolio/campus/uakron3D/");  so.addParam("wmode", "transparent");           
so.addParam("menu", "false");           
so.write("divFlash");     

一个简单的示例：https://files.cnblogs.com/chaoren1641/zoomifyDemo.rar