您的位置：首页 > Web前端 > JQuery

JQuery开发的lightBox控件实例

2013-01-15 15:25 239 查看

官方参考地址：

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

前台代码：

<head runat="server">
<script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.lightbox-0.5.js" type="text/javascript"></script>
<link href="jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">
$(function () {
$('#gallery a').lightBox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
<ul>
<li>
<a href="http://www.cnblogs.com/Images/ibanner1.jpg" title="aaaa">
<img src="http://www.cnblogs.com/Images/ibanner1.jpg" width="72" height="72" alt="" />
</a>
</li>

<li>
<a href="http://www.cnblogs.com/Images/ibanner2.jpg" title="aaaa">
<img src="http://www.cnblogs.com/Images/ibanner2.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="http://www.cnblogs.com/Images/ibanner3.jpg" title="aaa">
<img src="http://www.cnblogs.com/Images/ibanner3.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="http://www.cnblogs.com/Images/ibanner4.jpg" title="aaa;">
<img src="http://www.cnblogs.com/Images/ibanner4.jpg" width="72" height="72" alt="" />
</a>
</li>

</ul>
</div>

JS源文件

(function($) {
/**
* $ is an alias to jQuery object
*
*/
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
// Configuration related to overlay
overlayBgColor:         '#000',        // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity:            0.8,        // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
// Configuration related to navigation
fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
// Configuration related to images
imageLoading:            'lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
imageBtnPrev: 'lightbox-btn-prev.gif',     /// <reference path="lightbox-blank.gif" />前一个图片
// (string) Path and the name of the prev button image
imageBtnNext:            'lightbox-btn-next.gif',    //后一个图片        // (string) Path and the name of the next button image
imageBtnClose:            'lightbox-btn-close.gif',        // (string) Path and the name of the close btn 关闭按钮
imageBlank:                'lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)
// Configuration related to container image box
containerBorderSize:    10,            // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
containerResizeSpeed:    400,        // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
txtImage:                'Image',    // (string) Specify text "Image"
txtOf:                    'of',        // (string) Specify text "of"
// Configuration related to keyboard navigation
keyToClose:                'c',        // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
keyToPrev:                'p',        // (string) (p = previous) Letter to show the previous image
keyToNext:                'n',        // (string) (n = next) Letter to show the next image.
// Don磘 alter these variables in any way
imageArray:                [],
activeImage:            0
},settings);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航