远方的海
远方的海,WordPress,免费
2015 Aug 06 04 : 36

WordPress图片灯箱fancyzoom下载 附带非插件实现

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

Fancy zoom是一款优秀的jquery图片灯箱插件,所谓的图片灯箱,就是点击图片,在不跳出新的页面下,生成一个相对较大较清晰的图片。

WordPress下也有对应的插件wp-fancyzoom。本文提供该插件的下载,和非插件实现的图片灯箱方法。

插件效果展示

先来看看这个插件的效果如何,比如这里有一个图片,点击可以查看在fancy zoom下的浏览效果,可以看见,图片在没有打开新窗口的情况下,变大了。

WordPress图片灯箱fancyzoom下载 附带非插件实现

fancyzoom插件下载

在这里可以下载这个插件点击下载

直接上传到自己的插件下即可使用啦。

非插件实现图片灯箱效果

插件是能少就少,这样可以提高加载速度。首先,你的主题需要装载jquery库,然后需要引用两个js脚本,下载这两个脚本:

下载FancyZoom.js  下载FancyZoomHTML.js

下载完毕后,把js文件放在主题的根目录下,并且在主题的<body>标签其后,加入这两个js文件:

<script type="text/javascript" src="//www.seavia.com/wp-content/themes/Wildfire(你的主题文件夹,区分大小写)/FancyZoom.js"></script>
<script type="text/javascript" src="//www.seavia.com/wp-content/themes/Wildfire(你的主题文件夹,区分大小写)/FancyZoomHTML.js"></script>

再给你的<body>标签,加入一个onLoad="setupZoom();"属性,即:形如<body onLoad="setupZoom();">

最后一步,把下载文件,解压,把里面的images-global文件夹中的zoom文件夹和里面的图片文件,上传到当前Wordpress主题的images文件夹下即可,如果你的主题没有images文件夹,则自己建立一个。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. eleven_music :

    2015-12-7
  2. eleven_music :

    主题的body?是首页模板吗?

    2015-12-7
  3. 春春 :

    :!: :???:

    2015-10-1