Lightbox������ӱʵ�õ���ʾͼƬЧ��

��Lightbox����һ�����������õ�ͼƬ��ʾЧ����������ʹͼƬֱ�ӳ����ڵ�ǰҳ��֮�϶�����ת���µĴ��ڡ����ֱ�����Ȼ�������ˣ��������ȿ�һ�� Lightbox ����ʾҳ�档

���ʹ�ã�

Lightbox�ܷdz��򵥵�Ӧ�õ�����ҳ���ϡ����Ƚ�lightbox.js��������ҳ���header���֣�

<script src="lightbox.js" type="text/javascript"></script>

��rel="lightbox"���Լ��뵽�κ������ӵı���������Լ���Lightbox���ܣ����磺

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

Ҳ����ע�⵽�������Ǹ������У������򿪡�ͼƬʱ�ῴ��ͼƬ������һ��˵�����֡�������title���Կ��Ƶġ�title������һ����ѡ�Ҳ����˵�����Բ�д����Ȼ��û��Ǽ�̵�˵��һ�±ȽϺá�

�������ƣ�

����ʹ��CSS���ԡ�ͼƬ�㡱�������Σ���������Ǹ�ʾ��ҳ���У����Dz���������CSS���룺

#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    }
    #lightboxDetails{
    font-size: 0.8em;
    padding-top: 0.4em;
    }
    #lightboxCaption{ float: left; }
    #keyboardMsg{ float: right; }
    #lightbox img{ border: none; }
    #overlay img{ border: none; }

��Ҫ������ӰЧ���Ļ�����Ҫ׼��һ�Ű�͸����PNGͼƬ������CSS������IE��PNGͼ�ε����֧�֣�����֧��PNG͸�������Dz��ò������д����Ĵ��룺

#overlay{ background-image: url(overlay.png); }
    * html #overlay {
    background-color: #000;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

lightbox.js��һ��var loadingImage = 'loading.gif';������������ͼƬ��ȫ����֮ǰ���Ǹ���Loading...��Ч���ģ������ʹ���κ���ͼƬ�������
ͬ���ģ�var closeButton = 'close.gif';���Կ��ơ��رա���ť��ͼƬ��Դ��

����

lightbox.js - Javascript���ļ�
lightbox.css - ��ͼƬ�㡱��ʽ�ļ�
overlay.png - 80% ͸����PNGͼƬ������ʵ����ӰЧ��
loading.gif - ��Loading��ͼƬ
close.gif - ���رա� ��ť

��������ɫ����
���α༭��moby

�������̳��ҳ��������վ�ۺ����μ�����