拥抱博客

壁立千仞,无欲则刚

PayPal注册图文教程及注意事项在淘宝上买的Zippo终于到手

Z-blog之LightBox图片特效插件屡试不爽?

LightBox插件在我的博客中90后贱女孩荣升"中国第一博"?传说中的香港视觉系新宠MaiRox这两篇都有应用,此插件来自猴子的小窝LightBox插件发布页面,发布原因是原插件在新版的z-blog中遇到代码冲突无法使用。

下载插件使用后感觉挺爽,这是一种不错的相册解决方案。慢慢也发现了不少问题,众所周之网站或者博客安装的插件过多会导致网站打开速度的大幅度下降,我发现这个插件安装后在首页中也加入了执行的代码,这使首页打开的速度被拖慢了许多,这点可以用Firefox中的插件Firebug看到。

LightBox在文章页中的表现也不算完美。图片的插入一般有两种做法,一种是通过自己制作的缩略图点击后看到完整尺寸的图片,另一种是页面下载完整的图片,在页面中将图片压缩至较小尺寸,点击后看到原图。

第一种做法,此方法图片载入显得重复,点击小图看大图还需下载时间,使得观者感觉得到信息的速度过慢。试想一下,打开页面,看到小图,点击,等待下载大图,看到大图,程序显得臃肿。况且小图加大图无疑是浪费了宝贵的网站存储空间。可以看看这个例子《90后贱女孩荣升"中国第一博"?

第二种做法,页面直接下载完整图片,通过代码限制图片大小,那么最明显的问题是多幅图片会带来页面打开过慢的问题,况且整张图片都下载了还要再次通过点击才可以看到,这对访客来说也不算友好。可以看看这个例子《北京奥运银牌张琳与名模翟陵甜蜜合影

最后说下我是怎么使用这款插件的

1.因为我的首页中没有需要运用这款插件的图片,所以安装插件后不激活这款插件,这样他就不会被放到首页中去执行,加快了首页的打开速度。

2.文章页中在正文的源代码中使用如下代码可获得LightBox效果,这样可以将LightBox特效运用到你需要的文章中去

文章源代码最后加上如下代码:(单的方法是先激活插件,从你的首页找到类似代码拷贝下来,再将插件停用)
<link media="screen" href="http://你的域名/PLUGIN/LightBoxF/Code/LightBox.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://你的域名/PLUGIN/LightBoxF/Code/prototype.js"></script><script type="text/javascript" src="http://你的域名/PLUGIN/LightBoxF/Code/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="http://你的域名/PLUGIN/LightBoxF/Code/LightBox.js"></script>
插入图片的代码形如:
【单张图片】
<a href="images/image-1.jpg" rel="lightbox" title="">image #1</a>
【多幅图片】
<a href="images/image-1.jpg" rel="lightbox[任意同组图片相同英文字符]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[任意同组图片相同英文字符]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[任意同组图片相同英文字符]">image #3</a>

3.根据写作习惯的需要,尽量让访客打开页面后直接看到原图,根据需要才使用LightBox插件。
说白了就是能不用尽量不用......实在需要再用。

最后是LightBox的官方网站链接,其实很简单的一个插件,越说越复杂了

Lightbox 2http://www.lokeshdhakar.com/projects/lightbox2/
Lightbox JShttp://www.lokeshdhakar.com/projects/lightbox/


转载请注明文章转载自:拥抱博客 [ http://www.90me.com/ ]
本文链接地址:http://www.90me.com/post/LightBox-zblog.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  • 网站分类

    Search

    热文排行

    随机文章

    Powered By Z-Blog

    Auto Publisher Copyright © 2008-2010 拥抱博客 All Rights Reserved | 京ICP备07023062号