使用方法如下：
步骤 1 - 安装
1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 将需要外调这三个 Javascript 文件在的 header.
<仿弯script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到现行的样式表中).
慎大丛<宽樱link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
步骤 2 - 激活
1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选择项: 使用 title 属性加上说明.
2、如果有一套想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<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>
3、没有限定每个页面的图片组数量和每个图片组图片的数量。
下边是使用方法：因为它是在jquery基础上开发的，所以你首先必须包含渣岁jquery包如下：
<script type="text/javascript" src="js/jquery.js">
当然更加需要包含lightBox文件了，这个不用说
<script type="text/javascript" src="js/jquery.lightbox-0.5.js">
引入lightBox的样式文件，这个文件在 lightBox下载压缩包中存在
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css>
下边就是用jquery的选择器，选择需要绑定lightBox方法的图片集合，然后绑定事件。
<script type="text/javascript">
$(function() {
// 第一种选择
$('a[@rel*=lightbox]').lightBox()// 选择所有的rel为lightbox的链接
// 第二种选择
$('#gallery a').lightBox()// 选择id为gallery下的所有链接
// 第三种选择
$('a.lightbox').lightBox()// 选择所有class为lightbox的链接
// 第四种选择
$('a').lightBox()// 选择页面中所有的链接
//…………还有更多的选择，哈哈，发挥你的想象力吧
})
</script>
如果你是一步猜梁宽一步跟着做的话，现在你就可以看看效果了，是不是特玄，呵呵……当然如果你不知道jquery的穗亮选择器怎么用，那么确实是一个麻烦问题。学习 一下jquery吧，确实很好用的。转载，仅供参考。
type 框架和 Scriptaculous 效果库。你将需要外调这三个 Javascript 文件放在你的网页header里面我的扒扰困惑是 header在哪里。。。（请不要嘲笑我 人家小白 ><)
header是网页的头部区域，一般是
<head>。。。。。。。。</head>结构，你把你的语法放到其中，只要不影响其他语句就好，最笨的办法是直接放到<head>之后，这样肯定不影响其他语句。
2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中)。
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /春岩旦>
第二个困惑 这段代码要放到什么位置 @ @
css是用来规定样式的文件，一般放到title段的下方中即可
例如下例子：
<title>益盟股票论坛 *** 盘手,基金,财经,投资,港股,论坛,证券,软件</title>
<link href="/bbs/style/style.css" rel="stylesheet" type="text/css">
<link href="/style/css_menu.css" rel="stylesheet" type="text/css">
3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置。同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置
步骤 2 - 激活1、添加 rel=”lightbox” 属性到任何一个链接标签去激活lightbox. 例如：
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
这个是什枣卜么意思 是用我的图片地址更换 image/image-1.jpg么？？
这个的意思是如果你要加载的css文件所在路径为/bbs，其下有image目录，css规定要加载的图片文件要到image文件夹中找。
也就是你css所在文件夹下要有images文件夹，并且其中有你要指定的例如image-1.jpg等。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
如果安装成功的话 在blog里贴图要怎么贴？直接贴地址还是有上传框？？
还有我Down了Lightbox那个软件 解压出来三个文件夹 CSS image 和JS
可是我完全不知道这个是做什么用的。。。。囧
一般的博客网站很少能给客户直接访问文件目录功能，也就是已经给定你的框架，你就用，不能再添加东西更改了，例如我在原来页面上新增一个页面，这个页面不是基于blog系统生成的，而是我在我的blog主页上定制的指向另一个文件，如index.html等，除非你是vip客户，大型blog系统不会给你这种特权。
基于安全考虑，否则成了给你免费空间放主页了！！
＝＝＝＝＝＝＝＝＝＝
问题二 还有那种显示略缩图 点击一下会跳到别的界面显示大图的效果是怎么做的？
用blog本身能提供的功能实现是最好的，所有想实现的功能都基于是否blog系统能提供给你，而不是你想做什么就能做到。
问题三 blog界面的READ MORE 点一下会跳转到新的界面显示全文 怎么设置代码能让它不用跳转就直接显示全文呢？
如果blog系统能让你直接填写html代码并解析，这个并不困难，但我接触的blog都把这个功能作死了，例如163.com的和sina.com的，这个功能是blog的功能，不是你要自己设计的功能。
举个例子，你要整清楚，你是去饭店吃饭，不是拿着菜去饭店作。。。不过你可以自带饮料，但是有些东西还是要受所在环境限制的，例如你自带菜要自己做，在饭店吃，还不想给饭店钱。。。。
不知道这个例子贴切否。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）