1.html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery全屏画廊灯箱效果</title>
<link href="fsgallery.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="fs_forse.js"></script>
</head>
<body style="padding-top: 50px;">
<div id="gallery"> //ID很关键
<div>dddd</div>
<div>
<div>
<a href="http://www.17sucai.com/preview/147804/2015-05-28/jiaoben155300/img/1.jpg">
<img src="1_mini.jpg" alt="">
</a>
</div></div>
<div>
<a href="http://www.17sucai.com/preview/147804/2015-05-28/jiaoben155300/img/2.jpg">
<img src="2_mini.jpg" alt="">
</a>
</div>
<div>
<a href="http://www.17sucai.com/preview/147804/2015-05-28/jiaoben155300/img/3.jpg">
<img src=".3_mini.jpg" alt="">
</a>
</div>
<div>
<a href="http://www.17sucai.com/preview/147804/2015-05-28/jiaoben155300/img/4.jpg">
<img src="4_mini.jpg" alt="">
</a>
</div>
</div>
</body></html>
2.css文件fsgallery.css
.fs_gallery { background: rgba(0,0,0, 0.9); position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; } .fs_gallery_close { position: absolute; top: 20px; right: 20px; width: 25px; height: 25px; color: #ccc; font-size: 34px; line-height: 23px; text-align: center; cursor: pointer; z-index: 102; } .fs_gallery_close:before { content: "×"; } .fs_gallery_close:hover { color: #fff; } .fs_gallery_prev, .fs_gallery_next { position: absolute; width: 80px; color: #ccc; font-size: 30px; cursor: pointer; z-index: 101; } .fs_gallery_prev:hover, .fs_gallery_next:hover { background: rgba(0,0,0, 0.1); color: #fff; } .fs_gallery_prev { left: 0; top: 0; bottom: 0; } .fs_gallery_next { right: 0; top: 0; bottom: 0; } .fs_gallery_prev:before { content: "‹"; position: absolute; height: 30px; margin-top: -30px; top: 50%; left: 35px; } .fs_gallery_next:before { content: "›"; position: absolute; height: 30px; margin-top: -30px; top: 50%; left: 35px; } .fs_gallery_shuft { position: relative; width: 9999999px; } .fs_gallery_shuft:after { clear: both; content: ""; display: block; } .fs_gallery_shuft_item { float: left; position: relative; background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAABkZGXd3dy0tLUVFRTIyMj09PWJiYlZWViYmJiIiIjAwMGpqanV1dQAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQACgABACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQACgACACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkEAAoAAwAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkEAAoABAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAAKAAUALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAAKAAYALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQACgAHACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAAKAAgALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAAKAAkALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQACgAKACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkEAAoACwAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==); background-position: center center; background-repeat: no-repeat; } .fs_gallery_shuft_item img { box-shadow: 0 0 8px rgba(0,0,0, 0.8); position: absolute; top: 50%; left: 50%; }
3.JS文件fs_forse.js
eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('(7(d,m,g){7 t(a,c,d,b){J(a>d||c>b){8 f=a/d,e=c/b;f>e?(a=d,c/=f):(a/=e,c=b)}9{y:a,x:c}}7 p(a,c){8 d=["-1D-","-1K-","-o-","-Y-",""],b={},f,e=d.B;H(f=0;f<e;f++)b[d[f]+a]=c;9 b}7 u(a){9 1f?p("1M","2w("+a+"2x, 0)"):{2y:a}}8 h=0,v=7(a,c,d){7 b(b,a){H(8 c P b)J(g[b[c]]!==d)9"2v"==a?b[c]:!0;9!1}7 f(a,c,f){8 e=a.2u(0).2q()+a.2r(1),g=(a+" "+m.1J(e+" ")+e).1B(" ");J("2s"===I c||"15"===I c)c=b(g,c);2t a:{g=(a+" "+l.1J(e+" ")+e).1B(" "),a=g;H(8 n P a)J(e=c[a[n]],e!==d){c=!1===f?a[n]:"7"===I e?e.1l(f||c):e;23 a}c=!1}9 c}a={};8 e=c.1w("2A"),g=e.2H,m=["2I","2J","O","Y"],l=["1D","1K","o","Y"],e={},n=[],r=n.2F,q,h={}.2B,k;"15"===I h||"15"===I h.T?k=7(b,a){9 a P b&&"15"===I b.1F.M[a]}:k=7(b,a){9 h.T(b,a)};1u.M.1l||(1u.M.1l=7(b){8 a=6;J("7"!=I a)2p 1h 2D;8 c=r.T(1j,1),d=7(){J(6 2E d){8 l=7(){};l.M=a.M;8 l=1h l,e=a.1s(l,c.1v(r.T(1j)));9 2K(e)===e?e:l}9 a.1s(b,c.1v(r.T(1j)))};9 d});e.1r=7(){8 b=c.1w("1r");9!!b.1p&&!!b.1p("2d")};e.1G=7(){9!!f("1M")};e.1I=7(){9 f("1S")};H(8 s P e)k(e,s)&&(q=s.1L(),a[q]=e[s](),n.1n((a[q]?"":"26-")+q));g.28="";9 e=29,a.2m="2.5.3",a.2l=l,a.2i=m,a.2j=7(a){9 b([a])},a.2c=f,a}(6,6.20);1f=v.1G&&v.1I;1c="2n"P m;Z=2a.2o.1L().2h(/(2k|2g|2L|2b|2e|2C 2U|3c|3d|3e|3b\\.3a|34|35|36)/);8 k=7(a,c){6.e=d(a);6.o=d.38({},d.1g.1m.1Z,c);6.i=0;6.w=g.16||d(g).16();6.h=g.13||d(g).13();6.1z();6.1H();6.1C();6.1y()};k.M={1F:k,1z:7(){8 a=6;a.j=[];a.e.11("a").B?a.e.11("a").1A(7(){a.j.1n({K:6.1t,N:d(6).19("10")[0].N})}):a.e.1A(7(){a.j.1n({K:6.K,N:6.N})})},1H:7(){d("1W").R(6.Q=d(\'<z D="32">\').S().R(Z?"":6.1o=d(\'<z D="33">\'),Z?"":6.1q=d(\'<z D="2R">\'),6.22=d(\'<z D="2S">\'),6.A=d(\'<z D="2Q">\'),d(\'<z D="2T">\').R(6.30=d(\'<z D="2Y">\'))))},1C:7(){8 a,c=6.j.B;H(a=0;a<c;a++)6.A.R(d(\'<z D="25">\').L({y:6.w,x:6.h}))},1U:7(a,c){d("<10>",{K:6.j[a].K,N:6.j[a].N}).2V("2W",7(){c(a,d(6))})},1y:7(){7 a(a){a.1a();f=(a.X||a.1E[0].X)-b.C;1c?b.A[0].18("1e",c,!1).18("1x",h,!1):d(m).17(c).1N(h)}7 c(a){a.1a();e=!0;b.C=(a.X||a.1E[0].X)-f;2X(k);b.F(b.C,0);b.C- -(b.i*b.w)>b.w/4&&(b.E(-1),d(6).1d("17 1e"));b.C- -(b.i*b.w)<-b.w/4&&(b.E(1),d(6).1d("17 1e"))}7 h(a){e||b.E(1);b.C- -(b.i*b.w)>-b.w/4&&b.F(-b.i*b.w,p);d(6).1d("17 1N 1x");e=!1}8 b=6,f=0,e=!1,k,p=b.o.12;b.C=0;1c?b.A[0].18("2N",a,!1):d(b.A).2M("10","2P",a);Z||(b.1o.V(7(){b.E(-1)}),b.1q.V(7(){b.E(1)}));d(g).3f(7(){b.w=g.16||d(g).16();b.h=g.13||d(g).13();8 a=b.j[b.i],a=t(a.y,a.x,b.w,b.h);b.A.19("z").L({y:b.w,x:b.h}).19("10").L({y:a.y,x:a.x,1Y:-a.y/2,1X:-a.x/2});b.F(-b.i*b.w,0)});(b.e.11("a").B?b.e.11("a"):b.e).V(7(a){a.1a();a=b;8 c;a:{8 d=6.K||6.1t;H(c P b.j)J(b.j[c].K==d){c=2f(c);23 a}c=3g 0}a.i=c;b.1i();b.F(-b.i*b.w,0);b.1V()});b.22.V(7(){b.S()});b.Q.V(7(a){d(a.3k).3j("25")&&b.S()});d(m).3h(7(a){27==a.1b?b.S():37==a.1b&&b.Q.21(":1Q")?b.E(-1):39==a.1b&&b.Q.21(":1Q")&&b.E(1)})},1i:7(){8 a=6.j.B-1,c;H(c=6.i-6.o.G;c<=6.i+6.o.G;c++)0>c?6.o.U&&6.G(a+c+1):c>a?6.o.U&&6.G(c-a):6.G(c)},G:7(a){8 c=6,d=c.A.31("z").2Z(a);d.14().1T||(d.14({1T:!0}),c.1U(a,7(a,f){W=t(f[0].y,f[0].x,c.w,c.h);c.j[a].y=f[0].y;c.j[a].x=f[0].x;d.R(f.L({y:W.y,x:W.x,1Y:-W.y/2,1X:-W.x/2}).1O(c.o.1P))}))},1V:7(){6.Q.1O(1k)},S:7(){6.Q.3i(1k)},F:7(a,c){1f?6.A.L(p("1S-12",c+"Y")).L(u(a)):6.A.F(u(a),c);6.C=a},24:7(a){0>a&&(a=6.o.U?6.j.B-1:0);a>6.j.B-1&&(a=6.o.U?0:6.j.B-1);9 a},E:7(a){6.i=6.24(6.i+a);6.F(-6.i*6.w,6.o.12);6.1i()}};d.1g.1m=7(a){h++;8 c=d(m.1W);c.14("1R"+h)||c.14("1R"+h,1h k(6,a));9 6};d.1g.1m.1Z={12:1k,U:!1,G:2,1P:2G}})(2z,20,2O);',62,207,'||||||this|function|var|return||||||||||images||||||||||||||height|width|div|shuft|length|pos|class|goTo|animate|preload|for|typeof|if|src|css|prototype|alt||in|gallery|append|hide|call|loop|click|size|pageX|ms|mobile|img|parent|duration|innerHeight|data|undefined|innerWidth|mousemove|addEventListener|find|preventDefault|keyCode|touch|unbind|touchmove|css3|fn|new|checkLoad|arguments|500|bind|fsgallery|push|prev|getContext|next|canvas|apply|href|Function|concat|createElement|touchend|events|createArray|each|split|createImages|webkit|targetTouches|constructor|csstransforms|createHtml|csstransitions|join|moz|toLowerCase|transform|mouseup|fadeIn|fadeTime|visible|fsgallery_|transition|loaded|loadImg|show|body|marginTop|marginLeft|defaults|document|is|close|break|getIndex|fs_gallery_shuft_item|no||cssText|null|navigator|ipad|testAllProps||iemobile|parseInt|iphone|match|_cssomPrefixes|testProp|android|_domPrefixes|_version|ontouchstart|userAgent|throw|toUpperCase|substr|string|else|charAt|pfx|translate|px|left|jQuery|modernizr|hasOwnProperty|windows|TypeError|instanceof|slice|1E3|style|Webkit|Moz|Object|ipod|delegate|touchstart|window|mousedown|fs_gallery_shuft|fs_gallery_next|fs_gallery_close|fs_gallery_thumbs|ce|on|load|clearInterval|fs_gallery_thumbs_list|eq|fs_thumbs_list|children|fs_gallery|fs_gallery_prev|symbian|nintendo|wii||extend||browser|up|netfront|playstation|midp|resize|void|keydown|fadeOut|hasClass|target'.split('|'),0,{}))
$(document).ready(function() { $('#gallery img').fsgallery()
})