JQuery开发的lightBox控件实例

官方参考地址:

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);

 

 

你可能感兴趣的:(jquery)