lightbox使用

使用方法:

1、在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件

1 <script type="text/javascript" src="js/jquery.js"></script>
2 <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
3 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css">

2,调用实例化灯箱

$(‘#gallery a‘).lightBox();     
$(‘a.lightbox‘).lightBox();    
$(‘a‘).lightBox(); 

3,扩展:

jQuery lightBox插件配置

在该配置中,您可以定制您的jQuery lightBox插件 。

 1 <script type="text/javascript">
 2     $(function() {
 3         $(‘#gallery a‘).lightBox({
 4         overlayBgColor:"#fff",//设置显示背景
 5         fixedNavigation:false,//是否显示下一页跟上一页的标签
 6         //imageLoading:‘images/lightbox-ico-loading.gif‘,//设置下载图片
 7         //imageBtnPrev:‘images/lightbox-btn-prev.gif‘,//设置上一页按钮的图片地址
 8         //imageBtnNext:‘images/lightbox-btn-next.gif‘,//设置下一页按钮的图片地址
 9         //imageBtnClose:‘images/lightbox-btn-close.gif‘,//设置关闭按钮的图片地址
10         //imageBlank:‘images/lightbox-blank.gif‘,//设置空白的图片地址
11         containerBorderSize:10,//设置显示图片边框的宽度
12         containerResizeSpeed:2000,//设置显示图片的时间
13         txtImage:"图片:",//定义介绍的文字
14         txtOf:"/",//定义页数中间的字符
15         keyToClose:"s",//设置关闭图片的快捷键
16         keyToPrev:"a",//设置上一页的快捷键
17         keyToNext:"d",//设置下一页的快捷键
18         //imageArray:"",
19         activeImage:0,//设置动态显示图片,要用到easing插件
20         easing:"easeOutElastic",
21         overlayOpacity:0.7//设置背景的透明度
22      });
23  });
24
25 例子:
26
27 <script type="text/javascript">
28 $(function() {
29    $(‘a[@rel*=lightbox]‘).lightBox({
30     overlayBgColor: ‘#FFF‘,
31     overlayOpacity: 0.6,
32     imageLoading: ‘http://example.com/images/loading.gif‘,
33     imageBtnClose: ‘http://example.com/images/close.gif‘,
34     imageBtnPrev: ‘http://example.com/images/prev.gif‘,
35     imageBtnNext: ‘http://example.com/images/next.gif‘,
36     containerResizeSpeed: 350,
37     txtImage: ‘Imagem‘,
38     txtOf: ‘de‘
39    });
40 });
41 </script>

lightbox下载地址和案例

时间: 2024-10-06 00:25:54

lightbox使用的相关文章

PHP+jquery 瀑布流+LightBox图片盒子特效

最近在做一个网站,要对很多图片排版,想到了瀑布流,不过瀑布流是实现了,但是需要查看大图片,于是将瀑布流和LightBox图片盒子很好的结合了起来,可在当前页使用Lightbox放大瀑布流中的缩略图,有需要的可下载使用. 完整代码下载:waterwall_lightbox.rar 效果在线显示:http://www.codesc.net/other/waterwall_lightbox/index.php

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

lightBox灯箱效果

最近想做一个类似QQ空间相册,点击照片会出现一个遮罩层,然后显示照片,可以左右切换照片,上网查了,原来叫灯箱效果,于是自己也写了一个简单的灯箱效果,并进行了简单封装,封装得不是很完善,后面还需要改进,下面先发布我的1.0版本,以下是源代码 这是html中 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></ti

Lightbox改造——支持滚轮缩放

在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放图片,下面是一个简单的指引: 1.修改Lightbox源码使支持滚轮缩放 2.修改Lightbox源码使图片的源可支持base64格式 3.如何将Lightbox应用到已有的文章 1.修改Lightbox源码使支持滚轮缩放 支持鼠标滚轮主要就是把弹出后的框整个绑定上mousewheel事件,打开li

PHP CSS3 目录直读式Lightbox 画廊图片展示

PHP CSS3 目录直读式Lightbox 画廊,非常适合用在PHP中建立在线图库.相册中,用于照片的浏览和展示.拖动图片可移动到任意位置,单击放大,可上一张.下一张播放!采用目录直读的方式,无需太多的设置,即可读取指定目录下的图片,而无需手动添加图片的路径和文件名.内核采用fancybox图上浏览插件,简洁漂亮,配合CSS3实现完美的浏览体验. 安装说明:本源码无数据库,因此无需安装,要注意demo.php中的相关变量,主要的地方已给出注释,根据注释可以快速部署到你的PHP开发项目中. 测试

20款美化网站的 jQuery Lightbox 灯箱插件

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载]

FancyBox - 经典的 jQuery Lightbox 插件

FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能.主要特色: ?  能够显示图片.HTML 元素.SWF 影片.iframe 框架和 Ajax 请求的内容 ?  可以通过配置和 CSS 自定义外观和功能 ?  一组内容可以实现导航 ?  支持滚动事件驱动浏览 ?  在放大项目下方有漂亮的投影 效果演示     插件下载 您可能感兴趣的相关文章

lightbox 图片浏览特效

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="public/jquery.js"></script> <link rel="stylesheet" type="text/css" href="public/lightbox.css"> <scri

一款效果非常不错的jquery插件 -Lightbox

今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox.这款图片查看插件体验很好,不仅有左右两个小箭头可以浏览上一张和下一张图片,还支持鼠标的左右键浏览上一张和下一张图片.有点类似google图片的查看器.一起看下效果图: 在线预览   源码下载 我们一起看下实现代码: html代码: <div id="wrapper"> <h1> Responsive Lightbox Portfolio</h1> <ul id="

Strip JS – 低侵入,响应式的 Lightbox 效果

Strip  是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持所有主流浏览器. 效果演示      立即下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTML5 &