您的位置：首页 > Web前端 > JQuery

jquery实现图片放大功能

2014-07-11 23:19 423 查看

利用的jquery是fancyzoom

下载fancyzoom文件不赘述

将解压后的文件放在工程的静态目录下例如 static 是静态目录 static下有js 目录将fancyzoom放到js目录下

之后在所在的html中引用以下代码

<script
src="/static/js/fancyzoom/js/FancyZoom.js"
language="JavaScript"
type="text/javascript"></script>
<script
src="/static/js/fancyzoom/js/FancyZoomHTML.js"
language="JavaScript"
type="text/javascript"></script>
<body onload="setupZoom();">
<a href="big_image_url"><img src="small_image_url"/></a>

以上是前端代码 big_image_url 是大图片的地址 small_image_url是缩略图地址

可能出现问题：

1众多用来美化的图片不能显示，原因是请求图片的路径不对。因为做的是简易版所以我只说明必要的关闭大图片的差号的处理。

fancyzoom/js 下的FancyZoomHTML.js 文件中的 closebox.png的图片地址给改掉，因为在静态目录下所以自己找一下closebox.png图片的静态路径然后配置上就可以。
2有其他解决方案，修改FancyZoom.js 中的 zoomImagesURI 值为静态的图片文件夹目录（未测试）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航