Плагин PhotoSwipe может реализовать полноэкранный масштаб на мобильном телефоне и дважды щелкнуть изображение, чтобы увеличить изображение.
Официальный сайт плагина PhotoSwipe http://www.photoswipe.com/
Но в этом не очень хорошо. После увеличения на картинке вы не можете закрыть просмотр. Вы должны нажать кнопку «Закрыть» или скользить, чтобы закрыть ее. После долгого поиска вы все еще не упомянули об этом. Вы можете только изменить это самостоятельно.
Open Photoswipe.js, есть определение функции о Tap On Line 3179
Определите переменную в начале
var tap_num = 0;
Затем добавьте его в определение Ontapstart
// Добавить в S, вы добавляете самостоятельно в соответствии с потребностями // Документирование, нажимать или дважды щелкнуть, чтобы закрыть дважды щелкнуть, чтобы увеличить tap_num ++; if (tap_num <2) {settimeout (function () {if (tap_num> 1) {tap_num = 0; return;} else {tap_num = 0; // Защита, есть ли перетаскивание или нет. себя в соответствии с потребностямиНаверное, это все
var taptimer, tapreleasepoint = {}, _dispatchtapevent = function (origvent, releasepoint, pointertype) {var e = document.createevent ('Customevent'), Edetail = {Origvent: Origvent, Target: Origvent.Target, ReleasePoint: Pointerpe: POINTTEPE 'трогать' }; e.initcustomevent ('pswptap', true, true, edetail); Origvent.Target.DispatchEvent (e); }; var tap_num = 0; _registermodule ('tap', {publicmethods: {inittap: function () {_listen ('firsttouchstart', self.ontapstart); _listen ('touchRelease', self.ontaprelease); _listen ('destout', function () {tapReleAs = {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{tull; }); 1) {tap_num = 0; {return; P0); Кнопка '||. _EqualizePoints (TapreLeasePoint, P0);Сжатие модифицированных photoswipe.js, чтобы реализовать нужные функции
Кроме того, использование плагина PhotoSwipe требует вставки фреймворков и кода JavaScript, которые могут быть интегрированы в один JS, а затем введены, так что страница выглядит намного проще.
Сначала напишите структуру альбома изображения на HTML и сопоставьте стиль
<div id = "demo-test-gallery"> <a href = "https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" Data-size = "1600x1600" data-med = "https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" Data-Med-size = "1024x1024"> <img src = "https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg"/> </a> <a href = "https://farm6.staticflickr.com/5591/15008867125_b61960.jhaf01.jhaf01.jhaf01.jaf01.jaf01.jaf01.jaf01.jaf0.jaf01.jaf01.jaf0.jaf01.jaf0.j.j.jaf01.j.j.j.j.jaf0.jaf0.jaf0.jaf0.jaf01.j.j.j.j.jpg"/> </a> data-size = "1600x1068" data-med = "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" Data-Med-size = "1024x1024"> <img src = "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"/> </a> </div>
Организовал JS
document.writeln ("<!-root element of photoswipe. Должен иметь класс pswp.->"); document.writeln ("<div class =/" pswp/"tabindex =/"-1/"role =/" dialog/"aria-hidden =/" true/">"); document.writeln ("<fostice of Photoswip. Анимация непрозрачности быстрее, чем rgba (). class =/"pswp__scroll-wrap/"> "); document.writeln (" <!-Контейнер, который удерживает слайды. "); Document.Writeln (" PhotoSwipe сохраняет только 3 из них в DOM для сохранения памяти. "); Document.Writeln (" Don/'T-Modify эти 3 PSWPEM Elements, DISTEM. class =/"pswp__item/"> </div> "); document.writeln (" <div class =/"pswp__item/"> </div> "); document.writeln (" <div class =/"pswp__item/"> </div> "); document.writeln (" <divetem/"> </div>"); class =/"pswp__item/"> </div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" <! class =/"pswp__ui pswp__ui-hidden/"> "); document.writeln (" "); document.writeln (" <!-управления являются самоочевидными. Порядок может быть изменен.-> "); Document.Writeln ("); class =/"pswp__counter/"> </div> "); document.writeln (" "); document.writeln (" <button class =/"pswp__button pswp__button-close/" title =/"close (esc)/"> <// button> "); document.writeln (" "); документ. pswp__button--share/"title =/" are/"> <// button>"); document.writeln (""); document.writeln ("<button class =/" pswp__button pswp__button-fs/"title =/" toggle fullscreen/"> <// button>"); документ. Демо-демозагруз http:///codepen.io//dimsemenov//pen//yybwor-> "); document.writeln (" <!-элемент получит класс pswp__peloader-Aactive, когда PreLoader работает-> "); Document.Writeln (" <Div Class =/"Divelperprit") class =/"pswp__peloader__icn/"> "); document.writeln (" <div class =/"pswp__peloader__cut/"> "); document.writeln (" <div class =/"pswp__peloader__cut/"> "); class =/"pswp__peloader__donut/"> </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeln (" </div> "); document.writeln (" </div> "); class =/"pswp__share-modal pswp__single-tap/"> "); document.writeln (" <div class =/"pswp__share-modal pswp__sing-tap/"> "); document.writeln (" <div class =/"pswp__share-tooltip/"> </div> "); </div> "); document.writeln (" "); document.writeln (" <button class =/"pswp__button pswp__button-arrow-left/" title =/"предыдущий (стрелка слева)/"> "); document.writeln (" </button> "); document.writeln (" "); document.writeln (" </button> "); document.writeln (" "); pswp__button-arrow-ruight/"title =/" next (arrow right)/">"); document.writeln ("</div>"); document.writeln (""); document.writeln ("<div class =/" pswp__caption/">"); document.writeln ("<div class =/"pswp__caption__center/"> </div> "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln (" "); document.writeln ("); docum ent.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.w riteln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.write ln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln (""); document.writeln ("" "); document.writeln ("); document.writeln ("" <// div> "); document.writeln (" "); document.writeln (" </div> "); (function () {var initphotoswipefromdom = function (galleryselector) {var parsethumbnailelements = function (el) {var thumbelements = el.childnodes, numbrees = thumbelements. Thumbnailel, размер, для (var i = 0; i <numnodes; i ++) {el = thumbelents [i]; el.getattribute ('href'), W: parseint (size [0], 10), h: parseint (size [1], 10), автор: el.getattribe ('Data-Author')}; kidselements [0] .getattribute ('src'); el.getAttribute ('Data-Med-размер'). Split ('x'); ITSE.PUSH (ITER); E. Returnvalue = false; ClickedListItem.parentNode.ChildNodes, numChildNodes = childnodes.length, nodeindex = 0, index; Break; = hash.split ('&'); Parseint (Params.gid, 10); GalleryUID: GalleryElement.getAttribute ('Data-Pswp-UID'), GetThumbBoundsfn: Function (Index) {// См. Options-> GetThumbboundsfn Раздел DOCS для получения дополнительной информации var Thumbnail = Thumbnail.getBoundingClientRect (); captionel.children [0]. http://photoswipe.com/documentation/faq.html#custom-pid-in-url для (var j = 0; j <epers.length; j ++) {if (epertion [j] .pid == index) {options.index = j; Options.index = parseint (index, 10); http://photoswipe.com/documentation/responsive-images.html var realviewportwidth, uselargeimages = false, firstresize = true, imagesrcwillchange; dpiratio = math.min (dpiratio, 2.5); = true; }); }! Открыть галерею, если он содержит #& pid = 3 & gid = 1 var hashdata = photoswipeparsehash (); initPhotosWipeFromDom ('. Демо-галерея');Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.