jQuery灯箱插件lightBox使用方法

jQuery灯箱插件lightBox使用方法jQuery的灯箱插件很简单,典雅,乖巧,无需额外的标记,用于覆盖当前页面上的图像“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。    …

jQuery的灯箱插件很简单,典雅,乖巧,无需额外的标记, 用于覆盖当前页面上的图像

“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。

    $(function() {

         $(‘#gallery a’).lightBox({fixedNavigation:true});
    });

使用方法:

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

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.4.js”></script>

<link rel=”stylesheet” type=”text/css” href=”css/jquery.lightbox-0.4.css” media=”screen” />

2、添加 rel=”lightbox” 属性应用到任何链接标记,以激活该灯箱。

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a> 

<a href=”image1.jpg”><img src=”thumb_image1.jpg” width=”72″ height=”72″ alt=”” /></a>

3、如果您希望向用户显示一个加载图形像上面使用如下

var loadingImage = 'loading.gif';

4、自定义关闭图片

var closeButton = 'close.gif';

<script type=”text/javascript”>
  $(function() {

    $(‘a[@rel*=lightbox]’).lightBox();    // Select all links that contains lightbox in the attribute rel
    $(‘#gallery a’).lightBox();     // Select all links in object with gallery ID
    $(‘a.lightbox’).lightBox();     // Select all links with lightbox class
    $(‘a’).lightBox();                   // Select all links in the page
});
</script>

扩展:

jQuery lightBox插件有一些配置,你可以定义调用它。

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

<script type=”text/javascript”>
    $(function() {

        $(‘#gallery a’).lightBox({

        overlayBgColor:”#fff”,//设置显示背景
        fixedNavigation:false,//是否显示下一页跟上一页的标签
        //imageLoading:’images/lightbox-ico-loading.gif’,//设置下载图片
        //imageBtnPrev:’images/lightbox-btn-prev.gif’,//设置上一页按钮的图片地址
        //imageBtnNext:’images/lightbox-btn-next.gif’,//设置下一页按钮的图片地址
        //imageBtnClose:’images/lightbox-btn-close.gif’,//设置关闭按钮的图片地址
        //imageBlank:’images/lightbox-blank.gif’,//设置空白的图片地址
        containerBorderSize:10,//设置显示图片边框的宽度
        containerResizeSpeed:2000,//设置显示图片的时间
        txtImage:”图片:”,//定义介绍的文字
        txtOf:”/”,//定义页数中间的字符
        keyToClose:”s”,//设置关闭图片的快捷键
        keyToPrev:”a”,//设置上一页的快捷键
        keyToNext:”d”,//设置下一页的快捷键
        //imageArray:””,
        activeImage:0,//设置动态显示图片,要用到easing插件
        easing:”easeOutElastic”,
        overlayOpacity:0.7//设置背景的透明度 
     });
 });

例子:

<script type=”text/javascript”>
$(function() {

   $(‘a[@rel*=lightbox]’).lightBox({

    overlayBgColor: ‘#FFF’,
    overlayOpacity: 0.6,
    imageLoading: ‘http://example.com/images/loading.gif’,
    imageBtnClose: ‘http://example.com/images/close.gif’,
    imageBtnPrev: ‘http://example.com/images/prev.gif’,
    imageBtnNext: ‘http://example.com/images/next.gif’,
    containerResizeSpeed: 350,
    txtImage: ‘Imagem’,
    txtOf: ‘de’
   });
});
</script>

下载地址:

 http://leandrovieira.com/projects/jquery/lightbox/

转载于:https://www.cnblogs.com/intcry/archive/2010/10/15/2014554.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35815.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注