먼저 몇 가지 렌더링을 살펴 보겠습니다.
이미지 텍스트 설명을 지원할 수있는 사진 중 하나를 클릭하십시오.
공유 기능 지원 :
제스처 확대 및 확대를 지원하십시오
JS 프레임 워크 사용은 Photoswipe입니다.
Photoswipe는 PC 및 모바일 터미널과 호환되는 사진 확대 플러그인입니다. 여러 버전을 경험했으며 지속적으로 업데이트되었습니다. 그것은 수많은 함정이 있으며 모바일 터미널에 큰 장점이 있습니다.
1. : 다음과 같은 다양한 스타일을 제어 할 수 있습니다.
제목, 공유, 전체 화면 버튼, 클릭 이벤트, 자막 추가, 투명 배경 등
2. PC 터미널과 호환되는 모바일 터치 제스처를 지원할 수 있습니다.
모든 기본 제스처 지원 : 다음 또는 이전의 미끄러짐, 드래그 팬, 확대 / 확대 / 축소 또는 닫기, 컨트롤을 전환하여 클릭하여 축소 또는 확대 / 축소를 클릭하십시오.
3. 공유
기본 UI에는 링크를 공유하는 버튼이 있습니다. 기본 링크는 Facebook, Twitter 및 Pinterest이지만 API를 통해 공유 유형을 설정할 수 있습니다.
4. 사용자 인터페이스
사용자 인터페이스는 핵심 스크립트에서 완전히 분리되어 있습니다. 인터페이스를 완전히 사용자 정의 할 수 있습니다. 기본 Photoswipe UI는 반응이 좋으며 데스크탑, 태블릿 및 모바일 장치에 전적으로 사용할 수 있습니다.
5. 더 많은 기능이 당신이 발견하기를 기다리고 있습니다.
공식 웹 사이트 : http://photoswipe.com/
github : https://github.com/dimsemenov/photoswipe
1. 공식 웹 사이트에서 PhotosWipe를 다운로드하여 페이지에 소개합니다.
<link rel = "스타일 시트 프리 페치"href = "css/photoswipe.css"> <link rel = "Stylesheet prefetch"href = "css/default-skin/default-skin.css"> <script src = "js/photoswipe.js"> </script> <script src = "js/photoswipe-ui-default.min.js"> </script>
2. 다음 코드 구조는 페이지에 추가되어야합니다 (이 구조는 플러그인 이미지 브라우징에 필요한 코드입니다. 저자는 JS에 통합되지 않았으므로 사용자는 자신의 웹 페이지에 수동으로 추가해야합니다.
<!- Photoswipe의 루트 요소. 클래스 PSWP가 있어야합니다. -> <div tabindex = "-1"role = "대화 상자"aria-hidden = "true"> <!-Photoswipe의 배경. 애니메이션 불투명도가 rgba ()보다 빠르기 때문에 별도의 요소입니다. -> <div> </div> <!-오버플로가있는 슬라이드 래퍼 : 숨겨진. -> <div> <!-슬라이드를 고정하는 컨테이너. Photoswipe는 메모리를 저장하기 위해 DOM에 3 개만 유지합니다. 이 3 PSWP__ITEM 요소를 수정하지 마십시오. 데이터는 나중에 추가됩니다. -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <!-슬라이딩 영역 상단의 기본값 (PhotoSwipeui_default) 인터페이스. 변경할 수 있습니다. -> <div> <div> <!-컨트롤은 자명합니다. 주문을 변경할 수 있습니다. -> <div> </div> </button> </button> </button> </button> </button> <!-요소는 preloader가 실행될 때 클래스 pswp_preloader를 얻습니다-> <div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div. <div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. 찾아야하는 그림에 Photoswipe 구조 코드를 추가하십시오. 여기에주의를 기울여야 할 것은 무엇입니까?
Data-PSWP-UID는 각 앨범에서 고유해야합니다. 데이터 크기는 확대 될 때 그림의 너비와 높이입니다. 지정된 너비와 높이가 그림과 일치하지 않으면 표시된 그림이 변형됩니다. 데이터 크기를 제거하는 방법은 없지만 시간이 있으면 대안을 찾을 수 있습니다.
<!-Data-PSWP-UID는 각 앨범에서 고유해야합니다. 데이터 크기는 확대 될 때 이미지의 너비와 높이를 지정합니다-> <div data pswp-uid = "1"> <fig> <a href = "img/m3.jpg"data-size = "670x712"> <img src = "img/th1.jpg"> </a> </div> </div>
4. JS 코드를 추가하십시오. 이 코드의 저자는 Photoswipe 프레임 워크에 통합되지 않았습니다. 그는 수동으로 웹 페이지에 추가해야합니다.
<script type = "text/javaScript"> var initphotoswipefromdom = function (mallowerSelector) {// dom 요소의 슬라이드 데이터 (url, title, size ...) // (gallerySelector의 어린이) var parsetHumbnailElement = function (el) {var tummelements = el.childnodes, numnodes = size = [], airet =, ittement, airts = [] for (var i = 0; i <numnodes; i ++) {Figel = 썸 요소 [i]; // <fide> 요소 // if (fighel.nodeType! == 1) {계속; } 25 Linkel = Figel.Children [0]; // <a> 요소 size = linkel.getAttribute ( 'data-size'). split ( 'x'); // 슬라이드 개체 생성 항목 = {src : linkel.getAttribute ( 'href'), w : parseint (size [0], 10), h : parseint (size [1], 10)}; if (figel.children.length> 1) {// <figcaption> content item.title = figel.children [1] .innerhtml; } if (linkel.children.length> 0) {// <Img> 썸네일 노드, 검색 썸네일 URL item.msrc = introwel.children [0] .getAttribute ( 'src'); } item.el = Figel; // getThumbBoundsfn items.push (항목)에 대한 링크 요소 저장; } 반환 항목; }; // 가장 가까운 상위 노드 var var var stosest = 가장 가까운 기능 (el, fn) {return el && (fn (el)? el : closest (el.parentNode, fn)); }; // 사용자가 축소판을 클릭하면 var onthumbnailsclick = function (e) {e = e || Window.event; E.PreventDefault? e.preventDefault () : e.returnValue = false; var etarget = e.target || e.srcelement; // 슬라이드의 루트 요소 찾기 var clickedListItem = 가장 가까운 곳 (etArget, function (el) {return (el.tagname && el.tagname.tagname.toupperCase () === '그림');}); if (! clickedListItem) {return; } // 모든 자식 노드를 통해 반복하여 클릭 된 항목의 색인 찾기 // 또는 데이터 속성 var var clickedGallery = clickedListim.parentNode, clickedListItem.parentNode.childNodes, numchildnodes = childnodes.length, nodeIndex = 0, index,; for (var i = 0; i <numchildnodes; i ++) {if (childnodes [i] .nodeType! == 1) {계속; } if (childnodes [i] === clickedListItem) {index = nodeIndex; 부서지다; } nodeIndex ++; } if (index> = 0) {// 유효한 인덱스가 OpenPhotOswipe를 찾은 경우 photoswipe를 엽니 다. } false를 반환합니다. }; // URL의 PARSE 그림 색인 및 갤러리 색인 (#& pid = 1 & gid = 2) var photoswipeparsehash = function () {var hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } var vars = hash.split ( '&'); for (var i = 0; i <vars.length; i ++) {if (! vars [i]) {계속; } var pair = vars [i] .split ( '='); if (pair.length <2) {계속; } params [쌍 [0]] = 쌍 [1]; } if (params.gid) {params.gid = parseint (params.gid, 10); } return params; }; var OpenPhotoSwipe = 함수 (색인, 갤러리 엘레멘트, 비활성화, Fromurl) {var pswpelement = docum 항목 = parsethumbnaillements (GalleryElement); // 매개 변수 옵션 = {barssize : {top : 100, bottom : 100}, fullscreenel : false, // 전체 화면 버튼 sharebuttons가 지원되는지 : [{id : 'wechat', label : 'share wechat', url : '#'}, {id : 'weibo', 'sina weibo', url : '#'} 그림 ', url :'{{raw_image_url}} ', download : true}], // gallery index (for url) galleryUid : GalleryElement.getAttribute ('data-pswp-uid '), getThumbBoundsfn : function (index) {// getThumbBoundsfn 섹션에 대한 getThumbBountsfn 섹션에 대한 getThumbBoundsfn : 항목 [index] .el.getElementsByTagName ( 'IMG') [0], // 썸네일 pageyscroll = window.pageyOffset || 찾기 document.documentElement.scrolltop, rect = thumbnail.getBoundingClientRect (); 반환 {x : rect.left, y : rect.top + pageyscroll, w : rect.width}; }}; // if (fromurl) {if (옵션.galleryPids) {// 사용자 정의 PID가 (var J = 0; 부서지다; }}} else {// URL 인덱스에서 1 옵션에서 시작합니다. index = parseint (index, 10) -1; }} else {Options.index = parseint (index, 10); } // 인덱스를 찾을 수없는 경우 종료 (isnan (옵션. index)) {return; } if (disableAnimation) {옵션 .showanimationDuration = 0; } // photoswipe에 데이터를 전달하고 gallery = new Photoswipe (pswpelement, photoswipeui_default, 항목, 옵션); gallery.init (); }; // 모든 갤러리 요소를 살펴보고 바인딩 이벤트 var 갤러리 = document.querySelectorAll (GallerySelector); for (var i = 0, l = GalleryElements.length; i <l; i ++) {GalleryElements [i] .setattribute ( 'data-pswp-uid', i+1); GalleryEments [i] .onclick = OnthumbnailsClick; } // #& pid = 3 & gid = 1 var hashdata = photoswipeparsehash (); if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, mallerylements [hashdata.gid -1], true, true); }}; // 위의 기능을 실행합니다. initPhotoswipefromdom ( '. my-gallery'); </script>이 기사는 "JavaScript WeChat Development Skills의 요약"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
우려되는 Wechat Mini 프로그램에 대한 자습서를 추천하고 싶습니다. "Wechat Mini 프로그램 개발 자습서"는 Everybody의 편집자가 신중하게 편집했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.