lightbox（jQuery灯箱是什么单纯的网页弹框吗只是效果特别好看而已）

本文目录

• jQuery灯箱是什么单纯的网页弹框吗只是效果特别好看而已
• wordpress插入视频怎么实现lightbox效果模式
• 第一，引用lightbox 第二，用法
• zbrush中的lightbox里不显示原有的模型是什么原因
• WordPress如何启用LightBox
• 一个页面中有多个图片，然后点击每一个图片就会有显示一个带有图片的div出现，这种情况用js怎么做
• lightbox于其他代码冲突
• 如何使用lightbox制作登录窗口
• lightbox的使用方法
• 哪位大侠可以给我讲下google那个图片特效的原理

jQuery灯箱是什么单纯的网页弹框吗只是效果特别好看而已

灯箱其实就是由lightbox翻译过来的，所谓的lightbox其实真的可以理解为弹窗
当然流行一些的lightbox插件不光光是效果很绚，当然也包括浏览器兼容性较好，功能也较强，比如说支持模态弹窗和非模态弹窗之类的。但是究其本质就是那么回事

wordpress插入视频怎么实现lightbox效果模式

使用 NextGEN Gallery 插件代替WordPress自带媒体库：WordPress › NextGEN Gallery « WordPress Plugins，汉化包在这里Simplified Chinese Language Pack for NextGEN Gallery，使用方法参考这里。注意在插件设置-选项-效果中将JavaScript 缩略图效果设置为不显示。
使用wp-jquery-lightbox插件形成Lightbox特效：WordPress › WP jQuery Lightbox « WordPress Plugins。无需设置。

第一，引用lightbox 第二，用法

函数INDEX()有两种形式：数组和引用。数组形式通常返回数值或数值数组；引用形式通常返回引用。 　　
语法：INDEX(array，row_num，column_num)返回数组中指定的单元格或单元格数组的数值。INDEX(reference，row_num，column_num，area_num)返回引用中指定单元格或单元格区域的引用。 　　
参数：Array为单元格区域或数组常数；Row_num为数组中某行的行序号，函数从该行返回数值。如果省略row_num，则必须有column_num；Column_num是数组中某列的列序号，函数从该列返回数值。如果省略column_num，则必须有row_num。Reference是对一个或多个单元格区域的引用，如果为引用输入一个不连续的选定区域，必须用括号括起来。Area_num是选择引用中的一个区域，并返回该区域中row_num和column_num的交叉区域。选中或输入的第一个区域序号为1，第二个为2，以此类推。如果省略area_num，则INDEX函数使用区域1 　　
实例：如果A1=68、A2=96、A3=90，则公式“=INDEX(A1:A3，1，1)”返回68，=INDEX(A1:A3，1，1，1)返回68。
-lightbox

zbrush中的lightbox里不显示原有的模型是什么原因

lightbox显示原有的模型，楼主意思是zb中默认所提供的模型吗？
1不管是zb所提供 的还是楼主你自己导入的模型，首先你得确定，这些模型文件是在Pixologic\ZBrush 4.0\ZProjects中（我是4.0的zb）这个文件夹是lightbox默认指认的。
2其他模型在ztool中也有一些，可用lightbox查看。
3 lightbox就是个查看器，这功能很人性化。
-lightbox

WordPress如何启用LightBox

把“wp-cltlbgallery”文件夹放到“wp-content/plugins”文件夹里。进入WordPress后台的“Plugins（插件）”里，启用“ThickBox And LightBox for WordPress Gallery”就可以了
-lightbox

一个页面中有多个图片，然后点击每一个图片就会有显示一个带有图片的div出现，这种情况用js怎么做

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN“
        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》

《title》Lightbox JS v2.0《/title》

《meta http-equiv=“content-type“ content=“text/html; charset=gb2312“ /》
《meta http-equiv=“content-language“ content=“en“ /》

《meta name=“description“ content=“Lightbox JS v2.0 is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.“ /》
《meta name=“keywords“ content=“lightbox, lightbox2, lightbox v2.0, lightbox js, lokesh, dhakar“ /》

《link rel=“shortcut icon“ type=“image/ico“ href=“/images/favicon.gif“ /》
《link rel=“stylesheet“ href=“css/screen.css“ type=“text/css“ media=“screen“ /》
《link rel=“stylesheet“ href=“css/lightbox.css“ type=“text/css“ media=“screen“ /》

《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》
《/head》
《body》


《div id=“topborder“》《/div》

《div id=“sidebar“》
《h1》《a href=“http://www.huddletogether.com/projects/lightbox2/“》Lightbox JS 《em》v2.0《/em》《/a》《/h1》
《p》《a href=“http://www.huddletogether.com“》by Lokesh Dhakar《/a》 译: 《a href=“mailto:minicroc@gmail.com“》croc《/a》《/p》
《p》《a href=“http://www.huddletogether.com/projects/lightbox2/“》点此查看原文《/a》《/p》
《ul id=“nav“》
《li》《a href=“#overview“》概要《/a》《/li》
《li》《a href=“#example“》例子《/a》《/li》
《li》《a href=“#how“》如何使用《/a》《/li》
《li》《/li》
《li》《/li》
《li》《/li》
《/ul》
《!-- 《div》

《a href=“http://digg.com/submit?phase=2&url=http://www.huddletogether.com/projects/lightbox2/“》《img src=“/images/digg.gif“ width=“16“ height=“16“ alt=“Digg icon“ /》《/a》
《a href=“http://del.icio.us/post?url=http://www.huddletogether.com/projects/lightbox2/&title=Lightbox%20JS%20v2.0“》《img src=“/images/delicious.gif“ width=“16“ height=“16“ alt=“Delicious icon“ /》《/a》

《/div》--》
《/div》

《div id=“content“》

《a name=“overview“》《/a》
《div class=“section first“》
《h3》概要《/h3》
《p》Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.《/p》
《h3》最新更新 Version 2.0《/h3》
《ul》
《li》《strong》图片集:《/strong》 分组相关的图片并且能轻松的导航它们《/li》
《li》《strong》视觉特效《/strong》: 奇特的自适应调整《/li》
《li》《strong》向后兼容《/strong》: yes!《/li》
《/ul》
《/div》《!-- end .section --》


《a name=“example“》《/a》
《div class=“section clearfix“》

《h3》例子《/h3》

《h3》单一图片《/h3》
《div》
《a href=“images/image-1.jpg“ rel=“lightbox“》《img src=“images/thumb-1.jpg“ width=“100“ height=“40“ alt=““ /》《/a》
《/div》
《div》
《a href=“images/image-2.jpg“ rel=“lightbox“ title=“Optional caption.“》《img src=“images/thumb-2.jpg“ width=“100“ height=“40“ alt=““ /》《/a》
《/div》

《h3 style=“clear: both;“》图片集《/h3》

《div》
《a href=“images/image-3.jpg“ rel=“lightbox[plants]“ title=“Mouseover image to move forward.“》《img src=“images/thumb-3.jpg“ width=“100“ height=“40“ alt=“Plants: image 1 0f 4 thumb“ /》《/a》
《/div》
《div》
《a href=“images/image-4.jpg“ rel=“lightbox[plants]“ title=“Alternatively you can press the N key.“ 》《img src=“images/thumb-4.jpg“ width=“100“ height=“40“ alt=“Plants: image 2 0f 4 thumb“ /》《/a》
《/div》
《div》
《a href=“images/image-5.jpg“ rel=“lightbox[plants]“ title=“The script preloads the next image in the set as you’re viewing.“》《img src=“images/thumb-5.jpg“ width=“100“ height=“40“ alt=“Plants: image 3 0f 4 thumb“ /》《/a》
《/div》
《div》
《a href=“images/image-6.jpg“ rel=“lightbox[plants]“ title=“Press X to close“》《img src=“images/thumb-6.jpg“ width=“100“ height=“40“ alt=“Plants: image 4 0f 4 thumb“ /》《/a》
《/div》

《/div》《!-- end .section --》


《a name=“how“》《/a》
《div》
《h3》如何使用:《/h3》
《h3》步骤 1 - 安装 《/h3》
《ol》
《li》Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
          《pre》《code》《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》
《/code》《/pre》
《/li》
《li》外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
《pre》《code》《link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /》
《/code》《/pre》
《/li》
《li》检查 CSS 并确定调用的 《code》prev.gif《/code》 和 《code》next.gif《/code》 文件在正确的位置. 同样要确定调用的 《code》loading.gif《/code》 和 《code》close.gif《/code》 文件及 《code》lightbox.js《/code》 文件在正确的位置.《/li》
《/ol》
《h3》步骤 2 - 激活《/h3》
《ol》
《li》添加 《code》rel=“lightbox“《/code》 属性到任何一个链接标签去激活lightbox. 例如:
《pre》《code》《a href="images/image-1.jpg" rel="lightbox" title="my caption"》image #1《/a》
《/code》《/pre》
《em》可选择项: 《/em》使用 《code》title《/code》 属性加上说明. 《/li》
《li》如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如: 
          《pre》《code》《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》
《/code》《/pre》
没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！《/li》
《/ol》
《/div》
《!-- end .section --》《!-- end .section --》《!-- end .section --》

《/div》《!-- end #content --》

《/body》
《/html》
-lightbox

lightbox于其他代码冲突

很简单,问题就是出在function $(id) { return document.getElementById(id); }
这一句,你这样写嘛,你可以将你代码封装好一点,这样就不会出现这种问题了,如这样封装
(function($){
// 放你原来的代码 如下
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != ’function’) {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}

function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
.
.
.
.
.
.
})(function $(id) { return document.getElementById(id); });
-lightbox

如何使用lightbox制作登录窗口

还是老规矩，先看看实现的效果吧~~~ 还不错吧，嘿嘿！那接下来就自己也做一个吧~~~一、下载Lightbox 大家可以下载Lightbox，目前最新版本是Lightbox JS V 2.04，点此下载吧。 解压后如下： 二、在ASP.NET中的使用 建立一个网站，然后添加相应的Lightbox文件。 在Photo.aspx页面，添加引用，如下： 《script type=“text/javascript“ language=“javascript“ src=“JS/prototype.js“》《/script》
《script type=“text/javascript“ language=“javascript“ src=“JS/scriptaculous.js?load=effects,builder“》《/script》
《script type=“text/javascript“ language=“javascript“ src=“JS/lightbox.js“》《/script》

《link rel=“Stylesheet“ href=“CSS/lightbox.css“ type=“text/css“ media=“screen“ /》
三、建立数据库(略) 在数据库中存入照片的信息，表结构和数据如下： 在此不多说了！四、在ASP.NET后台调用数据库并显示 1.web.config配置：配置数据库链接字符串 2.在Photo.aspx页面加入Repeater控件，用来显示照片。代码如下： 《h1》奥运相册《/h1》
《div id=“page“》
《div id=“images“》
《ul class=“gallery“》
《asp:Repeater ID=“Repeater1“ runat=“server“》
《ItemTemplate》
《li》《a href=’《%#Eval(“Path“) %》’ rel=“lightbox[roadtrip]“ title=’《%#Eval(“Remark“) %》’ style=“color:Red; size:14pt“》《img src=’《%#Eval(“Path“) %》’ alt=’《%#Eval(“Remark“) %》’ style=“width:120px; height:80px“ /》《/a》《/li》
《/ItemTemplate》
《/asp:Repeater》
《/ul》
《/div》
《/div》 3.Photo.aspx后台调用数据库信息，代码如下： protected void Page_Load(object sender, EventArgs e)
{
Bind();
}
private void Bind()
{
string SqlConn = GetSQLConn();
SqlConnection conn = new SqlConnection(SqlConn);
conn.Open();
string sqlstr = “Select * From Picture“;
DataSet ds = new DataSet();
SqlDataAdapter sda = new SqlDataAdapter(sqlstr,conn);
sda.Fill(ds);
Repeater1.DataSource = ds.Tables.DefaultView;
Repeater1.DataBind();
}
private string GetSQLConn()
{
string conn = ConfigurationSettings.AppSettings[“SQLConnString“];
return conn;
}
-lightbox

lightbox的使用方法

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“ lang=“en“》
《head》

《title》Lightbox JS v2.0 | Test Page《/title》

《link rel=“stylesheet“ href=“css/lightbox.css“ type=“text/css“ media=“screen“ /》
《link rel=“stylesheet“ href=“css/screen.css“ type=“text/css“ media=“screen“ /》
《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》

《style type=“text/css“》
body{ color: #333; font: 13px ’Lucida Grande’, Verdana, sans-serif; }
《/style》

《/head》
《body》

《h1》lightbox《/h1》
《div id=“content“》
《div class=“section clearfix“》
《h3》单一图片《/h3》
《div class=“thumbnail“》
《a href=“images/image-1.jpg“ rel=“lightbox“》《img src=“images/thumb-1.jpg“ width=“100“ height=“40“ alt=““ /》《/a》
《/div》
《div class=“thumbnail“》
《a href=“images/image-2.jpg“ rel=“lightbox“ title=“Optional caption.“》《img src=“images/thumb-2.jpg“ width=“100“ height=“40“ alt=““ /》《/a》
《/div》
《h3 style=“clear: both;“》图片集《/h3》
《div class=“thumbnail“》
《a href=“images/image-3.jpg“ rel=“lightbox[plants]“ title=“Mouseover image to move forward.“》《img src=“images/thumb-3.jpg“ width=“100“ height=“40“ alt=“Plants: image 1 0f 4 thumb“ /》《/a》
《/div》
《div class=“thumbnail“》
《a href=“images/image-4.jpg“ rel=“lightbox[plants]“ title=“Alternatively you can press the N key.“ 》《img src=“images/thumb-4.jpg“ width=“100“ height=“40“ alt=“Plants: image 2 0f 4 thumb“ /》《/a》
《/div》
《div class=“thumbnail“》
《a href=“images/image-5.jpg“ rel=“lightbox[plants]“ title=“The script preloads the next image in the set as you’re viewing.“》《img src=“images/thumb-5.jpg“ width=“100“ height=“40“ alt=“Plants: image 3 0f 4 thumb“ /》《/a》
《/div》
《div class=“thumbnail“》
《a href=“images/image-6.jpg“ rel=“lightbox[plants]“ title=“Press X to close“》《img src=“images/thumb-6.jpg“ width=“100“ height=“40“ alt=“Plants: image 4 0f 4 thumb“ /》《/a》
《/div》
《/div》《!-- end .section --》
《div class=“section“》《/div》
《!-- end .section --》《!-- end .section --》
《/div》
《!-- end #content --》

《/body》
《/html》
-lightbox

哪位大侠可以给我讲下google那个图片特效的原理

这个很简单，我告诉你正解
这里面用到的技术：ajax，div层的概念，javascript的第三方特效库
div层的概念：类似于一个容器，能够容纳图片等。用代码来解释就是：“《div》这里存放图片《/div》”
略缩图和大图：图像可以用代码来控制显示的大小，所以你能够看到小图和大图
当你点击略缩图示，你最先看到一块白色区域，中间的地方有个加载等待图案，这里面用到了ajax技术，同时用到了div层的概念（稍候解释）。当ajax接收到了图片加载完毕的信息后，会告知浏览器，可以显示图片了。
第二步，图片显示在白色区域中。
为什么有些时候白色区域会变小？
因为这里又用到了第三方的js函数库，他的作用的过渡效果，即div层的移动。所以你会看到白色区域慢慢的向图片边缘靠拢。
问什么你点击不到其他地方？
用技术的角度来解释，就是在你第一次点击小图的时候，他已经自动创建的一个透明的div层在上面，所以你点不到他
这就类似于你在桌子上放一幅画，而在画的上面放上玻璃板，当你用笔去往上写东西的时候，当然不会写到画上面。
我说，大哥，你明白了吗？我解释的不容易啊，给分吧
********************************************
我是搞web开发的，如果用我们的专业术语来给你解释，你能明白吗？你有什么依据来证实你说的是对的？代码的编译原理，程序执行的先后顺序，我能够用我的经验判断出来。如果你想真正弄清楚这是怎么一回事，我希望你看看javascript和html基本语法知识（特别是div的用法，设置他的style的z-index属性和filter属性，然后就是js的基本语法和dom规范），然后再来提问。这样效果会好一些，前提是你愿意在这上面花费一些时间
*********************************************
页面确实有flash控件，但只有一个地方用到了，而图片显示的时候没有用到。共两个文件如下(webroot代表应用根目录)
名称：flash_ad_relay.swf
目录：webroot/comic/flasher/ads_data/
名称：imgad.swf
目录：webroot/comic/flasher/ads_data/
说明：通过观察ads.htm（目录在webroot/comic/flasher/）文件代码，能够判断，flash_ad_relay.swf应该是google提供的一个flash控件，其作用是控制广告程序的加载进度。而imgad.swf则是一个广告（ad）程序，当当网的那个，在页面最下面。
总体来说flash_ad_relay.swf用来控制imgad.swf文件加载的进度并且显示。
入口方法：tianchaoyu.html文件中《script type=“text/javascript“ src=“
scriptaculous 包含以下几个部分：
builder.js ：提供了一种方便的建立html元素的方法
controls.js ：包含自动提示和动态编辑两个控件
dragdrop.js ： 提供元素拖放的功能
effects.js ： 设计优良的ajax效果库，这篇文章要讲的就是这个
slider.js ： 一个滑动条控件
effects.js中提供了两种类型的动画效果，一种称为核心效果（core effect），一种称为组合效果（combination effect）
**********************************************
结合使用
第一步
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》
第二步
外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
《link rel=“stylesheet“ href=“css/lightbox.css“ type=“text/css“ media=“screen“ /》
第三步
检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
方式一：添加 rel=“lightbox“ 属性到任何一个链接标签去激活lightbox. 例如:
《a href=“images/image-1.jpg“ rel=“lightbox“ title=“my caption“》image #1《/a》
方式二：如果你有一套你想分组的相关图片, 接着上一部并且又在 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》
********************************************
********************************************
基本上就是这么用，我都写的快吐血了
要是还有不明白的，提出来，需要详细代码的话，我可以给你做一个demo
lightbox下载地址：http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下载地址（你只需要下在lightbox就可以了，里面包含着个文件了）：
http://www.prototypejs.org/
-lightbox