| 363 | |
| 364 | // 预处理整页图片 |
| 365 | function ImageView(imgList) { |
| 366 | helper.getCss('//cdn.jsdelivr.net/lightgallery/1.3.7/css/lightgallery.min.css'); |
| 367 | helper.getScript('//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js'); |
| 368 | helper.getScript('//cdn.jsdelivr.net/lightgallery/1.3.7/js/lightgallery.min.js'); |
| 369 | helper.getScript('//cdn.jsdelivr.net/g/lg-fullscreen,lg-thumbnail,lg-autoplay,lg-zoom'); |
| 370 | helper.getScript('//cdn.jsdelivr.net/mousewheel/3.1.13/jquery.mousewheel.min.js'); |
| 371 | |
| 372 | helper.addCss('#viewer{max-width:1280px;margin:auto;display:none}#viewer > ul{margin-bottom:0;padding:0;column-count:5;-moz-column-count:5;-webkit-column-count:5;}#viewer > ul > li{-moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid;float:left;margin-bottom:15px;margin-right:15px;width:240px;list-style-type:none}#viewer > ul > li a{border:3px solid #FFF;border-radius:3px;display:block;overflow:hidden;position:relative;float:left}#viewer > ul > li a > img{transition:transform .3s ease 0s;transform:scale3d(1, 1, 1);width:240px}#viewer > ul > li a:hover > img{transform:scale3d(1.1, 1.1, 1.1);opacity:.9}'); |
| 373 | $('div#main').before('<div id="viewer"><ul id="lightgallery" class="list-unstyled row"></ul></div>'); |
| 374 | |
| 375 | var lightGallery = $('#lightgallery'); |
| 376 | $.each(imgList, function(i, n) { |
| 377 | i++; |
| 378 | lightGallery.append('<li data-src="' + n + '" data-sub-html="<h4>Image' + i + '</h4><p>' + n + '</p>"><a href=""><img class="img-responsive" src="' + n + '"></a></li>'); |
| 379 | }); |
| 380 | |
| 381 | helper.addCss('.viewer{position:fixed; top:7px; right:7px; cursor:pointer;}'); |
| 382 | helper.addScript('function Viewer(){ $("#lightgallery").lightGallery(); $("html,body").animate({scrollTop:0}, 500); $("div#viewer,div#main,div#footer").fadeToggle(300); }'); |
| 383 | $('body').append(`<svg class="viewer" onmousedown="this.style.opacity=0;" onclick="Viewer();this.style.opacity=1;" title="预览整页图片" style="width: 50px;height: 50px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M871.125 433.75a119.85 119.85 0 1 0 0-239.66 119.85 119.85 0 0 0 0 239.66z m209.622-399.318H102.272c-38.955 0-69.93 31.701-69.93 70.656v817.067c0 38.954 30.975 70.656 69.93 70.656h978.475c38.954 0 69.93-31.702 69.93-70.656V105.088c0-38.955-30.976-70.656-69.93-70.656z m-257.28 493.44a42.837 42.837 0 0 0-31.958-15.488c-12.714 0-21.674 5.973-31.957 14.208l-46.677 39.467c-9.728 6.997-17.494 11.733-28.672 11.733a41.301 41.301 0 0 1-27.478-10.24 338.09 338.09 0 0 1-10.752-10.24L511.701 412.075a55.04 55.04 0 0 0-41.685-18.774c-16.725 0-32.213 8.278-41.941 19.499L112.213 793.643V143.53c2.475-16.982 15.702-29.227 32.683-29.227h892.928c17.237 0 31.19 12.757 32.213 29.952l0.726 649.899L823.38 527.872z"></path></svg>`); |
| 384 | } |
| 385 | |
| 386 | /*-------------------------------------------------------------------------------------------------------------------------------------------*/ |
| 387 | |