CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery 图片弹出框插件 lightbox 使用教程

发布时间:『 2017-06-24 11:46』  博客类别:WEB前端  阅读(2398) 评论(0)

关于 lightbox 的使用教程,网上介绍的不是很多,我在这里整理一篇相关的教程。希望能帮到大家。

Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。

lightbox 插件

上面这张图是lightbox 插件的运行效果。

lightbox 插件使用步骤

添加对以下js和css文件的引用

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

启用 Lightbox 插件。

$(function() {
    $('#gallery a').lightBox({});
});

给图片链接增加一个rel="lightbox"属性

<a href="images/image-1.jpg"rel="lightbox" title="业余草">www.xttblog.com</a>

参数配置

  • verlayBgColor 定义覆盖层的颜色 颜色值 默认值:#000 (black)

  • overlayOpacity 定义覆盖层的的透明度 0-1的小数 0.8

  • imageLoading 设置加载动画 图片路径字符串 images/lightbox-ico-loading.gif

  • imageBtnClose 设置关闭弹出框的按钮图片路径 图片路径字符串 images/lightbox-btn-close.gif

  • imageBtnPrev 设置弹出框上一张图片导航按钮图片路径 图片路径字符串 images/lightbox-btn-prev.gif

  • imageBtnNext 设置弹出框下一张图片导航按钮图片路径 图片路径字符串 images/lightbox-btn-next.gif

  • containerBorderSize 设置图片框的边框大小 整数 10

  • containerResizeSpeed 重置图片容器的速度 整数 400

  • keyToNext 显示下一张幻灯片的快捷键 键字母 n

  • keyToPrev 显示上一张幻灯片的快捷键 键字母 p

  • keyToClose 关闭幻灯片的快捷键 键字母 c


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   lightbox     jQuery     插件     图片浏览器     图片弹框  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有