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
- 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>
- 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" />
- Check the CSS and make sure the referenced
prev.gif
andnext.gif
files are in the right location. Also, make sure theloading.gif
andclose.gif
files as referenced near the top of thelightbox.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:<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. - 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图片插件全解
很不错,网站改版,可以用上。。
看了博主的写的东西真的受益匪浅啊。以后还要常来看看。
哎, 这近这程序不知怎么搞的,一天自动清两次数据库,我都快疯了。
呵呵,博主的文,写的总是那么好。
感谢分享如此好的文章。
嘿嘿,我又来了
好东西。
留个名证明我来过