magento安装lightbox图片插件全解

共计 2947 个字符，预计需要花费 8 分钟才能阅读完成。

1.首先下载lightbox插件（以Lightbox v2.04为例 ）：http://www.huddletogether.com/projects/lightbox2/；

2.解压lightbox插件包，看到有js,css,images三个文件夹以及index.html文件，然后将三个文件夹里的文件依次放入你的模板文件的相应文件夹下；

3.然后打开lightbox.js，将以下两句

[php]
fileLoadingImage: ‘images/loading.gif’,
fileBottomNavCloseImage: ‘images/closelabel.gif’,
[/php]

修改成如下形式，以确保JS能够找到loading.gif和closelabel.gif（hello为你的模板名称）：

[php]
fileLoadingImage: ‘skin/frontend/default/hello/images/loading.gif’,
fileBottomNavCloseImage: ‘skin/frontend/default/hello/images/closelabel.gif’,
[/php]

4.然后打开你的media.phtml，在末尾添加以下代码：

[php]
<link rel="stylesheet" href="/templates/default/"";<?php echo $this->getSkinUrl(); ?>css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/templates/default/"";<?php echo $this->getSkinUrl(); ?>js/prototype.js"></script>
<script type="text/javascript" src="/templates/default/"";<?php echo $this->getSkinUrl(); ?>js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/templates/default/"";<?php echo $this->getSkinUrl(); ?>js/lightbox.js"></script>
[/php]

并且在你的图片相应链接加上rel=”lightbox”，如有多张图片则加上lightbox[roadtrip]，例如

[php]
<li>
<a rel="lightbox[roadtrip]" href="/templates/default/"";#" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="/templates/default/"";<?php echo $myimage ?>" width="225" height="150" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
[/php]

5.这样magento的lightbox图片插件就安装好了，效果如下图所示。

附英文原版说明：
How to Use
Part 1 – Setup

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).

[php]
<script type="text/javascript" src="/templates/default/"";js/prototype.js"></script>
<script type="text/javascript" src="/templates/default/"";js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/templates/default/"";js/lightbox.js"></script>
[/php]

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

[php]
<link rel="stylesheet" href="/templates/default/"";css/lightbox.css" type="text/css" media="screen" />
[/php]

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

Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

[php]
<a href="/templates/default/"";images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
[/php]

Optional: Use the title attribute if you want to show a caption.
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:

[php]
<a href="/templates/default/"";images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="/templates/default/"";images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="/templates/default/"";images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
[/php]

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