jQuery LightBox图片浏览效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery LightBox图片浏览效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>

	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
    
    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <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" />
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
    
    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
		background-color: #444;
		padding: 10px;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #3e3e3e;
		border-width: 5px 5px 20px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 20px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	</style>
</head>

<body>

<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="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

</body>
</html>

JS代码(jquery.lightbox-0.5.pack.js):

/** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.js * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11,2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */
eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--)r[e(c)]=k[c]||e(c);
	k=[function(e){
	return r[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('(6($){
	$.2N.3g=6(4){
	4=23.2H({
	2B:\'#34\',2g:0.8,1d:F,1M:\'18/5-33-Y.16\',1v:\'18/5-1u-2Q.16\',1E:\'18/5-1u-2L.16\',1W:\'18/5-1u-2I.16\',19:\'18/5-2F.16\',1f:10,2A:3d,2s:\'1j\',2o:\'32\',2j:\'c\',2f:\'p\',2d:\'n\',h:[],9:0}
,4);
	f I=N;
	6 20(){
	1X(N,I);
	u F}
6 1X(1e,I){
	$(\'1U,1S,1R\').l({
	\'1Q\':\'2E\'}
);
	1O();
	4.h.B=0;
	4.9=0;
	7(I.B==1){
	4.h.1J(v 1m(1e.17(\'J\'),1e.17(\'2v\')))}
j{
	36(f i=0;
	i<I.B;
	i++){
	4.h.1J(v 1m(I[i].17(\'J\'),I[i].17(\'2v\')))}
}
2n(4.h[4.9][0]!=1e.17(\'J\')){
	4.9++}
D()}
6 1O(){
	$(\'m\').31(\'<e g="q-13"></e><e g="q-5"><e g="5-s-b-w"><e g="5-s-b"><1w g="5-b"><e 2V="" g="5-k"><a J="#" g="5-k-V"></a><a J="#" g="5-k-X"></a></e><e g="5-Y"><a J="#" g="5-Y-29"><1w W="\'+4.1M+\'"></a></e></e></e><e g="5-s-b-T-w"><e g="5-s-b-T"><e g="5-b-A"><1i g="5-b-A-1t"></1i><1i g="5-b-A-1g"></1i></e><e g="5-1s"><a J="#" g="5-1s-22"><1w W="\'+4.1W+\'"></a></e></e></e></e>\');
	f z=1D();
	$(\'#q-13\').l({
	2K:4.2B,2J:4.2g,S:z[0],P:z[1]}
).1V();
	f R=1p();
	$(\'#q-5\').l({
	1T:R[1]+(z[3]/10),1c:R[0]}
).E();
	$(\'#q-13,#q-5\').C(6(){
	1a()}
);
	$(\'#5-Y-29,#5-1s-22\').C(6(){
	1a();
	u F}
);
	$(G).2G(6(){
	f z=1D();
	$(\'#q-13\').l({
	S:z[0],P:z[1]}
);
	f R=1p();
	$(\'#q-5\').l({
	1T:R[1]+(z[3]/10),1c:R[0]}
)}
)}
6 D(){
	$(\'#5-Y\').E();
	7(4.1d){
	$(\'#5-b,#5-s-b-T-w,#5-b-A-1g\').1b()}
j{
	$(\'#5-b,#5-k,#5-k-V,#5-k-X,#5-s-b-T-w,#5-b-A-1g\').1b()}
f Q=v 1j();
	Q.1P=6(){
	$(\'#5-b\').2D(\'W\',4.h[4.9][0]);
	1N(Q.S,Q.P);
	Q.1P=6(){
}
}
;
	Q.W=4.h[4.9][0]}
;
	6 1N(1o,1r){
	f 1L=$(\'#5-s-b-w\').S();
	f 1K=$(\'#5-s-b-w\').P();
	f 1n=(1o+(4.1f*2));
	f 1y=(1r+(4.1f*2));
	f 1I=1L-1n;
	f 2z=1K-1y;
	$(\'#5-s-b-w\').3f({
	S:1n,P:1y}
,4.2A,6(){
	2y()}
);
	7((1I==0)&&(2z==0)){
	7($.3e.3c){
	1H(3b)}
j{
	1H(3a)}
}
$(\'#5-s-b-T-w\').l({
	S:1o}
);
	$(\'#5-k-V,#5-k-X\').l({
	P:1r+(4.1f*2)}
)}
;
	6 2y(){
	$(\'#5-Y\').1b();
	$(\'#5-b\').1V(6(){
	2u();
	2t()}
);
	2r()}
;
	6 2u(){
	$(\'#5-s-b-T-w\').38(\'35\');
	$(\'#5-b-A-1t\').1b();
	7(4.h[4.9][1]){
	$(\'#5-b-A-1t\').2p(4.h[4.9][1]).E()}
7(4.h.B>1){
	$(\'#5-b-A-1g\').2p(4.2s+\' \'+(4.9+1)+\' \'+4.2o+\' \'+4.h.B).E()}
}
6 2t(){
	$(\'#5-k\').E();
	$(\'#5-k-V,#5-k-X\').l({
	\'K\':\'1C M(\'+4.19+\') L-O\'}
);
	7(4.9!=0){
	7(4.1d){
	$(\'#5-k-V\').l({
	\'K\':\'M(\'+4.1v+\') 1c 15% L-O\'}
).11().1k(\'C\',6(){
	4.9=4.9-1;
	D();
	u F}
)}
j{
	$(\'#5-k-V\').11().2m(6(){
	$(N).l({
	\'K\':\'M(\'+4.1v+\') 1c 15% L-O\'}
)}
,6(){
	$(N).l({
	\'K\':\'1C M(\'+4.19+\') L-O\'}
)}
).E().1k(\'C\',6(){
	4.9=4.9-1;
	D();
	u F}
)}
}
7(4.9!=(4.h.B-1)){
	7(4.1d){
	$(\'#5-k-X\').l({
	\'K\':\'M(\'+4.1E+\') 2l 15% L-O\'}
).11().1k(\'C\',6(){
	4.9=4.9+1;
	D();
	u F}
)}
j{
	$(\'#5-k-X\').11().2m(6(){
	$(N).l({
	\'K\':\'M(\'+4.1E+\') 2l 15% L-O\'}
)}
,6(){
	$(N).l({
	\'K\':\'1C M(\'+4.19+\') L-O\'}
)}
).E().1k(\'C\',6(){
	4.9=4.9+1;
	D();
	u F}
)}
}
2k()}
6 2k(){
	$(d).30(6(12){
	2i(12)}
)}
6 1G(){
	$(d).11()}
6 2i(12){
	7(12==2h){
	U=2Z.2e;
	1x=27}
j{
	U=12.2e;
	1x=12.2Y}
14=2X.2W(U).2U();
	7((14==4.2j)||(14==\'x\')||(U==1x)){
	1a()}
7((14==4.2f)||(U==37)){
	7(4.9!=0){
	4.9=4.9-1;
	D();
	1G()}
}
7((14==4.2d)||(U==39)){
	7(4.9!=(4.h.B-1)){
	4.9=4.9+1;
	D();
	1G()}
}
}
6 2r(){
	7((4.h.B-1)>4.9){
	2c=v 1j();
	2c.W=4.h[4.9+1][0]}
7(4.9>0){
	2b=v 1j();
	2b.W=4.h[4.9-1][0]}
}
6 1a(){
	$(\'#q-5\').2a();
	$(\'#q-13\').2T(6(){
	$(\'#q-13\').2a()}
);
	$(\'1U,1S,1R\').l({
	\'1Q\':\'2S\'}
)}
6 1D(){
	f o,r;
	7(G.1h&&G.28){
	o=G.26+G.2R;
	r=G.1h+G.28}
j 7(d.m.25>d.m.24){
	o=d.m.2P;
	r=d.m.25}
j{
	o=d.m.2O;
	r=d.m.24}
f y,H;
	7(Z.1h){
	7(d.t.1l){
	y=d.t.1l}
j{
	y=Z.26}
H=Z.1h}
j 7(d.t&&d.t.1A){
	y=d.t.1l;
	H=d.t.1A}
j 7(d.m){
	y=d.m.1l;
	H=d.m.1A}
7(r<H){
	1z=H}
j{
	1z=r}
7(o<y){
	1B=o}
j{
	1B=y}
21=v 1m(1B,1z,y,H);
	u 21}
;
	6 1p(){
	f o,r;
	7(Z.1Z){
	r=Z.1Z;
	o=Z.2M}
j 7(d.t&&d.t.1F){
	r=d.t.1F;
	o=d.t.1Y}
j 7(d.m){
	r=d.m.1F;
	o=d.m.1Y}
2q=v 1m(o,r);
	u 2q}
;
	6 1H(2C){
	f 2x=v 2w();
	1q=2h;
	3h{
	f 1q=v 2w()}
2n(1q-2x<2C)}
;
	u N.11(\'C\').C(20)}
}
)(23);
	',62,204,'||||settings|lightbox|function|if||activeImage||image||document|div|var|id|imageArray||else|nav|css|body||xScroll||jquery|yScroll|container|documentElement|return|new|box||windowWidth|arrPageSizes|details|length|click|_set_image_to_view|show|false|window|windowHeight|jQueryMatchedObj|href|background|no|url|this|repeat|height|objImagePreloader|arrPageScroll|width|data|keycode|btnPrev|src|btnNext|loading|self||unbind|objEvent|overlay|key||gif|getAttribute|images|imageBlank|_finish|hide|left|fixedNavigation|objClicked|containerBorderSize|currentNumber|innerHeight|span|Image|bind|clientWidth|Array|intWidth|intImageWidth|___getPageScroll|curDate|intImageHeight|secNav|caption|btn|imageBtnPrev|img|escapeKey|intHeight|pageHeight|clientHeight|pageWidth|transparent|___getPageSize|imageBtnNext|scrollTop|_disable_keyboard_navigation|___pause|intDiffW|push|intCurrentHeight|intCurrentWidth|imageLoading|_resize_container_image_box|_set_interface|onload|visibility|select|object|top|embed|fadeIn|imageBtnClose|_start|scrollLeft|pageYOffset|_initialize|arrayPageSize|btnClose|jQuery|offsetHeight|scrollHeight|innerWidth||scrollMaxY|link|remove|objPrev|objNext|keyToNext|keyCode|keyToPrev|overlayOpacity|null|_keyboard_action|keyToClose|_enable_keyboard_navigation|right|hover|while|txtOf|html|arrayPageScroll|_preload_neighbor_images|txtImage|_set_navigation|_show_image_data|title|Date|date|_show_image|intDiffH|containerResizeSpeed|overlayBgColor|ms|attr|hidden|blank|resize|extend|close|opacity|backgroundColor|next|pageXOffset|fn|offsetWidth|scrollWidth|prev|scrollMaxX|visible|fadeOut|toLowerCase|style|fromCharCode|String|DOM_VK_ESCAPE|event|keydown|append|of|ico|000|fast|for||slideDown||100|250|msie|400|browser|animate|lightBox|do'.split('|'),0,{
}
))

CSS代码(jquery.lightbox-0.5.css):

/** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.css * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11,2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:0;float:left;}
#lightbox-nav-btnNext{right:0;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#666;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

附件:下载该文件资源,减少时间成本(增值服务)