lightbox的使用方法有哪些？

Posted 2023-05-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了lightbox的使用方法有哪些？相关的知识，希望对你有一定的参考价值。

问题一 lightbox2.0 想用在我的blog里

问题是网上搜了一下都还是不明白到底要怎么用的

网上最常见的那三个步骤我都不太明白的

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库。你将需要外调这三个 javascript 文件放在你的网页header里面

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

我的困惑是 header在哪里。。。（请不要嘲笑我人家小白 ><)

2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中)。

<link href="css/lightbox.css" rel="stylesheet" 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>

这个是什么意思是用我的图片地址更换 image/image-1.jpg么？？

如果安装成功的话在blog里贴图要怎么贴？直接贴地址还是有上传框？？
还有我Down了Lightbox那个软件解压出来三个文件夹 CSS image 和JS

可是我完全不知道这个是做什么用的。。。。囧

问题二还有那种显示略缩图点击一下会跳到别的界面显示大图的效果是怎么做的？

问题三 blog界面的READ MORE 点一下会跳转到新的界面显示全文怎么设置代码能让它不用跳转就直接显示全文呢？

问题多了点儿
希望能有高手好好回答。。小女子感激不尽~~~
超级感谢的~~~已经明白了一些咯
因为我用的是FC2的blog 可以自定义模板也可以自己加一些插件进去的我看到有用fc2 blog的筒子我说的那些效果都做到了。。所以想问一下。。能把那些html的写法告诉我么？？感谢UPM我~~~我会给U加分的~~~

　　Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.
　　使用方法如下：
　　步骤 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、没有限定每个页面的图片组数量和每个图片组图片的数量。参考技术A 1、Lightbox v2.0 使用 Prototype 框架和 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的功能，不是你要自己设计的功能。

举个例子，你要整清楚，你是去饭店吃饭，不是拿着菜去饭店作。。。不过你可以自带饮料，但是有些东西还是要受所在环境限制的，例如你自带菜要自己做，在饭店吃，还不想给饭店钱。。。。
不知道这个例子贴切否。本回答被提问者采纳

支持移动触摸的jQuery图片Lightbox插件

简介

这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。该LightBox插件可以在移动手机和桌面设备中运行，它具有响应式，预加载图片，键盘支持等特点，非常实用。它的特点还有：

响应式设计

触控/触摸友好

提供多项配置

图像预加载

支持 iOS / Android / Windows phone

使用 CSS3 过度效果，并回退兼容旧浏览器

支持 jQuery 1.x 和 2.x 版本

支持键盘控制

在线演示及下载

在线演示

下载页面

使用方法

可以通过npm或bower来安装该插件。


npm install simplelightbox
bower install simplelightbox

或者下载该插件直接引用

引入文件


<link rel="stylesheet" href="css/simplelightbox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/simple-lightbox.min.js"></script>

HTML


<div class="jqhtml">
    <a href="images/image1.jpg">
        <img src="images/thumbs/thumb1.jpg" alt="" title="第一张图片描述">
    </a>
    <a href="images/image2.jpg">
        <img src="images/thumbs/thumb2.jpg" alt="" title="第二张图片描述">
    </a>
    <a href="images/image3.jpg">
        <img src="images/thumbs/thumb3.jpg" alt="" title="第三张图片描述">
    </a>
    ...
</div>

JavaScript


$(function(){
    $('.dowebok a').simpleLightbox();
});

配置

选项

名称	类型	默认值	说明
overlay	布尔值	true	显示遮罩
spinner	布尔值	true	显示 Loading 效果
nav	布尔值	true	显示左右导航
navText	数组	[‘←’,’→’]	左右导航的文本
captions	布尔值	true	显示标题/描述
captionsData	字符串	title	标题/描述来源，可指定 title 或 data-title
close	布尔值	true	显示关闭按钮
closeText	整数	123456	关闭按钮的文本
fileExt	正则表达式	‘png\|jpg\|jpeg\|gif’	限制图片格式
animationSpeed	整数	250	动画过度时间
preloading	布尔值	true	预加载图片
enableKeyboard	布尔值	true	键盘支持，方向键控制，Esc 退出
loop	布尔值	true	循环
docClose	布尔值	true	点击空白处关闭
swipeTolerance	整数	50	移动设备上滑动多少像素开始切换
className	字符串	simple-lightbox	添加 class
widthRatio	浮点数	0.8	图像宽度于屏幕宽度的的比例
heightRatio	浮点数	0.9	图像宽度于屏幕高度的的比例

自定义事件

名称	说明
show.simplelightbox	Lightbox 开启前的事件
shown.simplelightbox	Lightbox 开启后的事件
close.simplelightbox	Lightbox 关闭前的事件
closed.simplelightbox	Lightbox 关闭后的事件

示例


$('.jqhtml a').on('open.simplelightbox', function(){
    // do something…
});

公共方法

名称	说明
open	开启 Lightbox
close	关闭 Lightbox
next	显示下一个
prev	显示上一个
destroy	销毁 Lightbox

示例：


var $dowebok = $('.dowebok a').simpleLightbox();
$dowebok.next();

官方主页：http://andreknieriem.de/simple-lightbox/

GitHub 地址：https://github.com/andreknieriem/simplelightbox

以上是关于lightbox的使用方法有哪些？的主要内容，如果未能解决你的问题，请参考以下文章

Drupal - Lightbox -> iframe 节点显示整个网站的视图

smarty模板中怎么使用lightbox啊求教啊

在https上使用Nivo Lightbox时出现混合内容错误

lightbox使用

JavaScipt实现LightBox效果

如何使用lightbox制作登录窗口