WP图片相册插件:Images Lazyload and Slideshow

插件转移提示

由于网站内容调整,开发部分的内容转移到了www.brunoxu.com站点,wp插件新地址如下:

simple-lazyload 新地址: http://www.brunoxu.com/simple-lazyload.html

auto-lazyload-and-auto-highslide 新地址: http://www.brunoxu.com/auto-lazyload-and-auto-highslide.html

Images Lazyload and Slideshow 新地址: http://www.brunoxu.com/images-lazyload-and-slideshow.html

插件名称:

Images Lazyload and Slideshow

 

插件介绍:

本插件是一个灵活的、可扩展的、能发挥想象力和创造力的实用插件。功能以 图片迟加载 多种图片浏览效果 为主,添加了 自定义图片样式、与主题无关的网站统计代码设置 实用功能。

 

插件的官网收录页,插件下载地址:

http://wordpress.org/extend/plugins/images-lazyload-and-slideshow/

 

功能说明:

1. 图片迟加载

目前应用的范围是文章内容部分的图片。

插件对通过ajax取文章内容的主题无效,对非规范主题无效。

 

2. 图片浏览效果

目前支持的效果有:fancybox 、prettyPhoto ,由于官网限制,部分效果会在此公布。

fancybox效果:

包含模式:双相册、单相册、单图片

prettyPhoto效果:

包含模式:双相册、单相册、单图片

 

另外,本插件对通过外部相册批量导过来的图片列表,有特别的支持。如我经常用 http://www.yupoo.com/ 的批量外链来发表一些图片文章,文章中的图片能全部具备图片浏览效果。

 

3. 自定义图片样式

主要用来自定义图片样式的,如给文章中图片加个圆角的白框,如鼠标移上去后显示可放大的图标 …

自行设置需要有一定的html、css基础,当然也可参考设置页面上列出的sample进行修改。

 

下面给一些常用的样式:

限制内容页中图片的最大宽度
<style type=”text/css”>
/* maxwidth limit for content images */
#content img,.content img,.archive img,.post img {
margin-top:3px;
max-width:600px;
_width:expression(this.width>600?600:auto);
}
</style>
 
鼠标移到图片上,图片变暗,同时显示可放大的图标
<style type=”text/css”>
/* style for slideshow images */
.slideshow_imgs {
cursor:url(http://simplenotestheme.googlecode.com/svn/trunk/autohighslide/highslide/graphics/zoomin.cur), pointer;
}
.slideshow_imgs:hover{opacity:0.5;filter:alpha(opacity=50);}
</style>

 

.slideshow_imgs样式是每个加上浏览效果的图片都具有的,程序自动加上,定义它也就影响了所有带效果的图片。对于highslide效果来说,.slideshow_imgs就变成了.highslide或者.highslide-image,因highslide版本而异。

 

4. 网站统计代码设置

可参考设置页面上列出的sample进行设置。

有一点要注意的是,为了排版美观,最好是加个隐藏的容器,不显示统计代码的LOGO。没有LOGO显示出来的不用隐藏,如google的tracking code。

 

5.选择wp_footer还是wp_head

如果主题支持wp_footer,建议保留适用wp_footer;如果主题实在不支持,又不想换主题,就可以选择wp_head试试,不过由此带了一个问题,带输出图标的统计代码不能支持,要把统计代码空着,要不然会扰乱页面布局。

 

插件截图:

设置页:
setting page in the background
fancybox相册效果:
fancybox gallery effect
prettyShow相册效果:
prettyShow gallery effect
highslide相册效果:
highslide gallery effect
fancyzoom图片效果:
fancyzoom effect

 

其他说明:

fancyzoom项目作者已经不更新,效果和兼容性欠佳,不建议使用

fancyzoom有个jQuery插件,我叫它fancyzoomj,因为不够灵活,所以没有加进本插件

discuz的图片浏览效果,不错,但是我剥离出来的代码不够简练,不好运用,也没有加入本插件,如果有朋友有这方面的方便好用的代码,请告诉我。

如果有朋友觉得哪种其他的图片浏览效果不错,欢迎告诉我,我会考虑加入插件,让更多的人方便地使用上自己喜欢的图片浏览效果。

 

highslide、fancyzoom等效果的支持模式如下:(增强版下载地址见评论1楼)

highslide效果:

包含模式:4.0.5单图片(content filter实现)、4.0.5单图片(js实现)、4.1.13相册(js实现)、4.1.13单图片(content filter实现)、4.1.13单图片(js实现)、4.1.13单图片(鼠标移进放大移出缩小、js实现)

fancyzoom效果:

包含模式:单图片

 

一篇更详细的功能介绍: http://webdev.brunoxu.com/archives/1258.html

 

版本更新:

= 2.3.1 =
* 2012-09-24
* upgrade : optimize effect

= 2.3 =
* 2012-09-24
* upgrade : add slimbox2 effect, now has two adapters:’one gallery’ and ‘sigle image’.= 2.2.1 =
* 2012-07-17
* upgrade : optimize effect

= 2.2 =
* 2012-07-17
* upgrade : add exception for plugin WP-PostRatings, for displaying reason.
* upgrade : do not lazyload images for feeds, previews, mobile. refer to Lazy Load plugin.

= 2.1.1 =
* 2012-06-07
* upgrade : optimize effect

= 2.1 =
* 2012-06-07
* upgrade : for better performance, images with width or height use blank_1x1.gif as placeholder, while images without width and height use blank_250x250.gif as placeholder(except: smilies)
* upgrade : add a loading.gif background to each image, if image’s loading is timeout, visitors will understand what happened.

= 2.0.1 =
* 2012-06-06
* upgrade : optimize effect

= 2.0 =
* 2012-06-06
* upgrade : expand the scope of lazyload. previously only the content images take effect, now all the images work.
* upgrade : expand the scope of slideshow, optimize the regexp check rule for images.

= 1.4.1 =
* 2012-05-29
* upgrade : optimize effect

= 1.4 =
* 2012-05-29
* upgrade : optimize lazyload, reduce the Performance Loss
* upgrade : optimize limit_width_selector and add_effect_selector, change to “#content img,.content img,.archive img,.post img,.page img”

= 1.3.1 =
* 2012-05-28
* upgrade : optimize effect

= 1.3 =
* 2012-05-28
* upgrade : user can customize add-effect-selector
* upgrade : user can choose which action to be hook, wp_footer or wp_head
* upgrade : change style wrap for config page, add min-width

= 1.2.2 =
* 2012-05-20
* upgrade : optimize effect

= 1.2.1 =
* 2012-05-18
* upgrade : optimize effect

= 1.2 =
* 2012-05-16
* fixbug : css of images’ max-width limitation for IE6 may cause browser crash

= 1.1 =
* 2012-05-08
* upgrade : add adapters for effect, configurable
* upgrade : add special class ‘slideshow_imgs’ to every effected images
* upgrade : change the blank image to loading gif
* upgrade : setting page style adjust

= 1.0 =
* 2012-04-23 plugin released.

插件转移提示

由于网站内容调整,开发部分的内容转移到了www.brunoxu.com站点,wp插件新地址如下:

simple-lazyload 新地址: http://www.brunoxu.com/simple-lazyload.html

auto-lazyload-and-auto-highslide 新地址: http://www.brunoxu.com/auto-lazyload-and-auto-highslide.html

Images Lazyload and Slideshow 新地址: http://www.brunoxu.com/images-lazyload-and-slideshow.html

126 条评论

昵称
  1. Tmd

    请问你这个头像延迟是另外的?还是本身插件就能实现?
    我安装了,好像头像没延迟

    1. xiaoxu125634

      看了你的网站,效果是正常的,头像有迟加载,是没问题了对吧