最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

magento安装lightbox图片插件全解

1.首先下载lightbox插件(以Lightbox v2.04为例 ):http://www.huddletogether.com/projects/lightbox2/

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

3.然后打开lightbox.js,将以下两句
fileLoadingImage:        ‘images/loading.gif’,
fileBottomNavCloseImage: ‘images/closelabel.gif’,

修改成如下形式,以确保JS能够找到loading.gif和closelabel.gif(hello为你的模板名称):
fileLoadingImage:        ‘skin/frontend/default/hello/images/loading.gif’,
fileBottomNavCloseImage: ‘skin/frontend/default/hello/images/closelabel.gif’,

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

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

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

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

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


附英文原版说明:

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="/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> 
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="/templates/default/"";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="/templates/default/"";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="/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> 

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

转载请注明:嗨酷哥,有你更酷! » magento安装lightbox图片插件全解

与本文相关文章

发表我的评论

取消评论
表情 插代码

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

  • 必填项
  • 必填项

网友评论7条  本站回复1

  1. 很不错,网站改版,可以用上。。

    cabinet knobs2011-09-07 09:40 回复
  2. 看了博主的写的东西真的受益匪浅啊。以后还要常来看看。

    便宜好买网2011-08-17 23:31 回复
    • 哎, 这近这程序不知怎么搞的,一天自动清两次数据库,我都快疯了。

      hicoogle2011-08-18 20:47 回复
  3. 呵呵,博主的文,写的总是那么好。

    暖手宝2011-08-17 19:02 回复
  4. 感谢分享如此好的文章。

    热词网2011-08-17 18:48 回复
  5. 嘿嘿,我又来了

    股票信息网2011-08-17 18:02 回复
  6. 好东西。

  7. 留个名证明我来过

    麻辣烫加盟2011-08-17 17:11 回复