哲学思辨

只推崇克里希那穆提

商业观察

你会看到拜物教以外的视角

管理思维

人本以外的都是伪管理

精华转载

价值因分享而倍增

静观人生

出世要深,入世要勤

首页 » 技术文档

wordpress图片插件Lightbox 2

作者: 蔡子方 | 2008年10月23日暂无评论 | 已阅23次

插件名称:Lightbox 2

插件版本:2.5.0

适用版本:WordPress Version: 1.5 or higher

插件下载

插件介绍:Lightbox 2 是一款很酷的图片显示插件,可以让你在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景。使用这款插件,是为了当你的的图片过大必 须缩小到页面的宽度时,可以让读者在当前页面浏览完整大小的图片,而不用离开。并且这款插件支持所有主流的浏览器。
第一次看见这种效果是在firefox官网,当时就十分喜欢,想让自己的blog也支持这种效果,因为一直没耐心和时间研究wp所以拖到了今天。
效果演示 http://www.huddletogether.com/projects/lightbox2/
演示中出现的是原作者的网站,而本次插件下载的是http://www.stimuli.ca/lightbox/ 提供的修改版,笔者认为修改版更适合新手使用因为不用修改代码~上传,激活,使用,完事。相比较原作者已经很久没更新了,何去何从自己选择吧。

使用方法
Add a rel="lightbox" For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

If you have a set of related images that you would like to group
For example: 
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

个性化
Optionally, go to the Options page and select a new Lightbox colour scheme.

出处:不明。

插件原文说明如下:

How to Use

Part 1 – Setup

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    

    Optional: Use the title attribute if you want to show a caption.

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    

    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

原文链接:这里

本站文章除注明转载外,均为本站原创

转载请注明: 文章转载自[商业哲学评论]-Business&Philosophy Reviews

本文标题: 《wordpress图片插件Lightbox 2》

本文链接地址: http://www.busiphi.com/wordpresslightbox-2/

相关博文:

  1. 优化Wordpress-wp终极优化手册 ...
  2. 优化Wordpress–给网站大提速 ...
  3. 10个WordPress的.htaccess技巧 ...
  4. 推荐使用auto-blogroll自助链接插件 ...
  5. 搞定IE的最重要CSS技巧 ...



我要抢沙发…… »

  • #1
    resteven (author) 说:

    试用后发觉太慢,可以试试效果,但不推荐使用。因为它需要在header.php调用js,移至footer.php调用可能会好些,但网页仍给人load不完的感觉。

    [回复]

--不妨留下您的观点--

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif