wordpress图片灯箱和延迟加载最佳效果插件:Images Lazyload and Slideshow

WP插件 欲思 4评论

这几天一直在折腾博客。想找些好的图片插件。效果都不是很好。偶然发现一个比较不错的图片灯箱和延迟加载二和一的插件。感觉不错。

试用了一下,效果也还可以。所以分享给大家。有需要的朋友可以试试看。下面分别列一下具体的一些功能。

 

wordpress图片灯箱和延迟加载最佳效果插件: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试试,不过由此带了一个问题,带输出图标的统计代码不能支持,要把统计代码空着,要不然会扰乱页面布局。

好了。如果需要的朋友可以直接在后台搜索 Images Lazyload and Slideshow下载安装插件。如果不会的或者有什么问题可以在下面留言。

转载请注明:欲思博客 » wordpress图片灯箱和延迟加载最佳效果插件:Images Lazyload and Slideshow

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (14)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. “另外,本插件对通过外部相册批量导过来的图片列表,有特别的支持。如我经常用 http://www.yupoo.com/ 的批量外链来发表一些图片文章,文章中的图片能全部具备图片浏览效果。”也就是说我复制已有的文章过来,文章中的图片是外链图片,这样也能有灯箱效果? 一直找这样的解决办法,但都不行。这个怎么设置一下呢?
    司馬刀2014-03-25 21:38 回复
    • 是的。效果一样。装上插件就行了。不需要其他设置什么的。
      欲思2014-03-25 21:55 回复
      • 试了一下,复制一个图片后,“链接url”选项默认是“当前链接”,图片为原始大图 ,没有灯箱效果。 修改为“链接到图像”时,图片较小,没有灯箱效果。 修改为“无”时,图片较小,有灯箱效果。 新手不懂,请问能否在灯箱显示原始大图呢?
        司馬刀2014-03-25 22:58 回复
        • 图片大小需要你在自己css中做些限制。大图在显示的时候像素修改到不超过页面大小就可以了。点击后自然会显示原始大小。至于链接路径是哪里的无所谓的。效果应该都有。
          欲思2014-03-26 15:17 回复