Photoswipe.js 공식 웹 사이트 : http://photoswipe.com/, photoswipe 파일 및 관련 예는이 웹 사이트에서 다운로드 할 수 있습니다.
이 구성 요소는 주로 사진과 앨범을 표시하는 데 사용되며 매우 실용적입니다.
1.이 구성 요소를 사용하려면 두 개의 JS 파일이 필요합니다
1 <script type = "text/javaScript"src = "simple-inheritance.min.js">
2 <script type = "text/javaScript"src = "Code-Photoswipe-1.0.11.min.js"> <!-현재 최신 버전은 1.0.11->이어야합니다.
2. 그러면 페이지 구조는 다음과 같을 수 있습니다
<div id = "gallery"> <div> <div> <a href = "images/full/01.jpg"> <img src = "images/thumb/01.jpg"/> </a> </a> </div> <div> <a href = "images/full/02.jpg"> <img src = "image/02.jpg"/> </a didg "/> </a didg"/> href = "images/full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> </div> <div> <image/full/05.jpg "> img" src = "이미지/썸/05.jpg"/> </a> </div> <div> <a href = "images/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </div> </div> </div>
실제로, 페이지 구조 외에도,이 HTML 코드에서 실제로 유용한 유일한 것은 id = "gallery"및 <a href = "image path"> </a>입니다 (나중에 설명 될 것입니다). 다른 클래스는 원래 페이지 구조를 아름답게하는 데만 역할을합니다 (실제로 효과를 갖기를 원하는 페이지와 다릅니다. 즉, 위의 페이지 구조에 따라 입력하면됩니다. 원하는 페이지 효과는 플러그인 JS 자체에 의해 완료되며 효과 레이아웃을 작성할 필요가 없습니다).
페이지에는 JS와 페이지 구조가 모두 필요하며 다음은 플러그인을 사용하는 것입니다.
3. 두 가지 방법을 사용하여 플러그인을 선언 할 수 있습니다
1. 기본 브라우저에 addingeventListener ()를 추가하여 수행됩니다.
document.adeventListener ( "domcontentloaded", function () {code.photoswipe ( 'a', '#gallery'); // 이것은 id = "gallery"및 <a href = "..."... "> </a> 위의 페이지 구조에서 Id ="갤러리 "가 포함되어 있습니다. }, false);2. jQuery 사용 방법 :
$ (document) .ready (function () {$ ( "#Gallery A"). PhotosWipe ();});4.이 설정을 사용하면 페이지가 다음과 같을 것입니다.
처음에 페이지의 효과 :
이미지를 클릭 한 후 페이지의 형태는 다음과 같습니다 (이 페이지는 실제로 내가 원하는 페이지입니다).
페이지 위의 <img />의 Alt의 내용을 명확하게 볼 수 있으며 아래에는 네 개의 버튼이 있습니다. 페이지를 닫고 원래 모양 (즉, 위의 그림), 자동 재생, 이전 페이지 사진 및 다음 페이지 사진으로 돌아갑니다.
그러한 앨범의 효과가 나타납니다. 물론, 마우스를 사용 하여이 페이지에서 왼쪽과 오른쪽을 스 와이프 할 수 있습니다. 핸드 헬드 장치에있는 경우 손가락에서 왼쪽과 오른쪽을 스 와이프 할 수도 있습니다.
이 플러그인에는 많은 속성이 있습니다.
AllowUserzoom : 사용자를 사용하면 복제/이동하여 사진을 볼 수 있습니다. 기본값 = true
AutostArtSlideshow : Photoswipe가 활성화되면 슬라이드 쇼가 자동으로 재생됩니다. 기본값 = false
allowrotationOnuserzoom : iOS에서만 지원하는 것 - Zoom/PAN 모드에서 사용자가 제스처로 이미지를 회전시킬 수 있습니다. default = false
BackButtonHideEnabled : 리턴 키를 눌러 앨범 슬라이드를 숨 깁니다. 주로 Android와 Blackberry에서 사용합니다. BB6, Android v2.1, iOS 4 및 최신 버전을 지원합니다. 기본값 = true
CaptionAndToolBaraUtoHidedLay : 제목 표시 줄과 도구 모음에 의해 자동으로 지연 시간이 숨겨져 있습니다. 기본값은 = 5000 (ms)입니다. 0으로 설정하면 자동으로 숨겨져 있지 않습니다 (가시 및 숨겨진 전환을 위해 탭/클릭).
CaptionAndToolBarflipposition : 제목 표시 줄과 도구 모음 사이의 토글 위치 (하단에 캡션을 표시하고 툴바가 상단에 표시됨). 기본값 = false
CaptionAndToolbarhide : 제목 표시 줄과 도구 모음을 숨 깁니다. 기본값 = false
CaptionandToolBaroPacity : 제목 표시 줄 및 도구 모음의 투명성 (0-1). 기본값 = 0.8
CaptionAndToolBarshowEmptyCaptions : 현재 이미지의 제목이 비어 있더라도 제목 표시 줄을 표시합니다. 기본값 = true
캐시 모드 : 캐시 모드, code.photoswipe.cache.mode.normal (default, normal) 또는 code.photoswipe.cache.mode.aggreast (Radical, Active). Photoswipe가 이미지 캐시 캐시를 관리하는 방법을 결정합니다.
공격적인 모드는 비어있는 비 "현재, 이전, 다음"이미지의 유형을 적극적으로 설정합니다. 이전 iOS 브라우저의 메모리 오버 플로우에 유용합니다. 대부분의 경우 일반 모드는 괜찮습니다.
DoubleTapspeed : 이중 클릭의 최대 간격. 기본값 = 300 (MS)
DoubleTapzoomLevel : 사용자가 두 번 클릭하면 배율 배수는 기본 "확대 된"레벨입니다. 기본값 = 2.5
enabledrag : 이전/다음 이미지를 현재 인터페이스로 드래그 할 수 있습니다. 기본값 = true
EnableKeyboard : 키보드 작업 허용 (왼쪽 및 왼쪽 화살표 스위칭, ESC 출구, 자동 재생, 우주선 디스플레이/숨겨진 제목 표시 줄/출구를 입력하십시오). default = true
enablemousewheel : 마우스 휠 작동을 허용합니다. default = true
Fadeinspeed : 효과 요소의 속도 (지속 시간), 밀리 초. 기본값 = 250
FadeOutSpeed : 효과 요소의 속도 (지속 시간), 밀리 초. 기본값 = 250
ImagesCalemethod : 이미지 스케일링 메소드 (모드). 선택적 값 : "Fit", "FitnouScale"및 "Zoom". 모드 "FIT"는 이미지가 화면에 적응하도록합니다. "FitnousCale"은 "Fit"과 비슷하지만 이미지를 확대하지 않습니다. "Zoom"은 이미지를 전체적으로 스크리닝하지만 이미지 스케일링이 똑같이 비례하지 않을 수 있습니다. 기본 = "적합"
인버 트 뮤즈 휠 : 마우스 휠을 뒤집습니다. 기본적으로 마우스 아래로 스크롤하면 다음 그림과 이전 그림으로 전환됩니다. default = false
JQueryMobile : Photoswipe가 jQuery 모바일 프로젝트에 통합되어 있는지 여부를 나타냅니다. 기본적으로 Photoswipe는 이것을 시도하고 해결합니다.
jQueryMobiledialoghash : Window 및 대화 페이지에 사용 된 JQuery Mobile의 해시 태그. 기본값 = "& ui-state = 대화 상자"
루프 : 앨범이 자동으로 루프하는지 여부. default = true
마진 : 두 그림 사이의 간격은 픽셀입니다. 기본 = 20
Maxuserzoom : 최대 배율. default = 5.0 (0으로 설정하면 무시됩니다)
Minuserzoom : 이미지의 가장 작은 감소 배수. default = 0.5 (0으로 설정하면 무시됩니다)
Mousewheelspeed : 마우스 휠에 대한 감도. 기본값 = 500 (MS)
NextpreviousSlidespeed : 이전 버튼과 다음 버튼을 클릭 한 후 몇 밀리 초가 지연 될 것입니다. Default = 0 (지금 전환)
Preventhide : 사용자가 Photoswipe를 닫지 못하게합니다. 또한 도구 모음의 "닫기"닫기 버튼을 숨 깁니다. 독점 페이지에서 사용하십시오 (예제는 소스 코드의 예제/08-excluction-mode.html)를 사용하십시오. default = false
방지 슬라이드 쇼 : 자동 재생 모드를 차단합니다. 또한 도구 모음에서 재생 버튼을 숨 깁니다. default = false
SlideshowDelay : 자동 플레이 모드에서 다음 사진을 재생하는 데 얼마나 걸립니까? 기본값 = 3000 (MS)
SLIDESPEED : 이미지가보기에 미끄러 져 시간이 내려갑니다. 기본값 = 250 (MS)
Swipethreshold : 손가락을 밀어서 스 와이프 제스처 이벤트를 트리거하는 데 얼마나 많은 픽셀이 사용되는지 기본 = 50
Swipetimethreshold : 스 와이프 제스처를 트리거하기 위해 최대 밀리 초를 정의합니다. 너무 느리면 슬라이드가 트리거되지 않으며 현재 사진의 위치 만 드래그합니다. 기본값 = 250
SlidEtimingfunction : 슬라이딩시 기능 완화 기능. Default = "Ease-Out"
Zindex : 초기 Zindex 값. 기본값 = 1000
enableUiwebViewRepositionTimeout : 장치의 방향이 변경되었는지 확인합니다. default = false
UIWebViewResetPositionDelay : 장치의 방향이 정기적으로 변하는 지 확인하는 시간은 500 (MS)
PreventDefaultTouchevents : Page Scrolling과 같은 기본 터치 이벤트를 차단합니다. default = true
대상 : 법적 dom 요소 (예 : div) 여야합니다. 기본값은 창입니다 (전체 페이지). 낮은 수준의 DOM 인 경우 DOM에 표시되며 전체 화면이 아닐 수 있습니다.
첫 번째 페이지를 표시 할 필요가없고 두 번째 페이지를 직접 표시하면 다음과 같이 설정할 수 있습니다.
$ (document). reque (function () {// photoswipe 설정, "preementhide : true"var thumbels = code.photoswipe ( 'a', '#gallery', {preementhide : true}); code.photoswipe.current.show (0);});물론이 플러그인에는 다른 많은 청취 기능이 있습니다.
document.adeventListener ( 'domcontentLoaded', function () {// 갤러리가 표시되기 전에이 메소드를 호출합니다 .code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforeshow, function (e) {vbeforeshow "); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow, function (e) {console.log ( "onbeforeshow";}); Console.log ( "Onshow");}; gallery는 숨겨진 code.photoswipe.current.addeventListener (e) {console.log ( 'onbeforehide'); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onhide, function (e) {console.log ( 'onhide');}); console.log ( 'onshownext');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.ondisplayImage, function (e) {갤러리의 크기와 위치가 변하는 방향 또는 창 크기가 변경 될 때); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onresetPosition, function, (e) {갤러리가 슬라이드하고 디스플레이하기 시작할 때 onslideshowstart (이 방법이 잘못되었을 때, 갤러리가 끝났을 때). slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart, function (e) {console.log ( 'onslideshowstart');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop, function (e) {console.log ( 'onslideshowstop');}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandToolbarshow, function (e) {console.log ( 'onbeforecaptionandToolbarshow';}); code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforecaptionandToolbarhide, function (e) {console.log ( 'onbeforecaptionandToolbarhide';}); onbeforecaptionandtoolbarhide는 일반적으로 onbeforecaptionandtoolbarhide 또는 onbeforecaptionandtoolbarhide method code.photoswipe.current.addeventlistener (code.photoswipe.eventtypes.onviewclick, function.log ( ');API 인터페이스의 호출 방법은 Photoswipe 공식 웹 사이트에서 찾을 수없고 현재 JS 수준이 좋지 않기 때문에 일부 API 인터페이스는 기본적으로 잘 이해되지 않습니다. 그러나 예제를 확인했을 때 변수가 종종 Code.Photoswipe 또는 Code.photoswipe.current가 나타나는 것을 발견했습니다. 그들 모두는 콘솔에서 진행되었습니다. code.photoswipe를 입력했을 때 다음 내용이 나타납니다.
그것이 무엇인지 완전히 이해할 수는 없지만 현재 요소가 포함되어 있음을 알 수 있습니다. 그런 다음 콘솔에 code.photoswipe.current를 입력하여 다음 내용을 얻으십시오.
예를 들어 다음과 같은 자세한 내용은 다음과 같습니다. currentIndex는 현재 이미지가 목록에 색인되어 있으며 전체 연결은 code.photoswipe.current.currentIndex입니다. 이 정보는 나에게 매우 중요합니다. 이 정보를 통해 다른 페이지에 다른 페이지 정보를 표시 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.