Photoswipe는 모바일 터치 장치 용으로 특별히 설계된 사진 앨범/게임입니다. 모든 iPhone, iPad, BlackBerry 6+ 및 데스크탑 브라우저와 호환됩니다. 기본 구현은 HTML/CSS/JavaScript를 기반으로하며 무료 및 오픈 소스 사진 앨범 제품입니다.
누구를 위해
모바일 사이트가 The Native 앱과 같은 앨범의 앨범을 경험하게하십시오.
우수한 기능
Photoswipe는 사용자에게 친숙하고 직관적 인 사진 앨범 대화식 인터페이스를 제공합니다.
공식 웹 사이트
http://www.photoswipe.com/
소스 코드 예제
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.zip
github
https://github.com/codecomputerlove/photoswipe
온라인 데모
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
호환 기능
Photoswipe는 많은 수의 모바일 장치 및 모든 인기있는 JavaScript 클래스 라이브러리/개발 프레임 워크와 호환됩니다. jQuery 기반 버전, jQuery-free 버전 및 jQuery 모바일 호환 버전이 모두 있습니다. 물론, 하나의 모두 소스 코드 샘플 패키지에 있습니다.
사용 방법
Photoswipe는 웹 사이트에 쉽게 통합 될 수있는 독립적 인 JavaScript 라이브러리입니다. 모바일 브라우저 (WebKits)에는 많은 최적화가 이루어졌습니다. 물론 데스크탑 브라우저 및 jQueryMobile의 경우 해당 버전도 소스 코드 패키지에도 제공됩니다.
클래스 라이브러리 참조
<!- Photoswipe는 이전에 klass를 참조했습니다. 로딩 속도를 높이려면 스크립트에 연기 태그/속성을 추가 할 수 있습니다->
<script type = "text/javaScript"src = "klass.min.js"> </script>
<!- 중요한 참고 사항, jQuery 버전을 사용하지 않으면 IE에서 오류가 발생합니다. 물론 jQuery 버전을 사용하는 경우 jQuery를 소개해야합니다.
<script type = "text/javaScript"src = "code.photoswipe-3.0.5.min.js"> </script>
통화 코드
/* JQuery의 준비 기능과 유사한 DomContentLoaded 이벤트 청취를 추가하십시오.
기본 메소드 예제/01-default.html
썸네일 모드가 없으시면 .examples/09-exclusive-mode-no-thumbnails.html을 확인하십시오.
*/
// photoswipe.attach 메소드는 3 개의 매개 변수를 수신합니다 (HTML 요소 수집, 선택적 구성 정보 및 여러 인스턴스의 경우 선택적 문자열 ID)
document.addeventListener ( 'domContentLoaded', function () {
// 컨테이너 아래의 모든 <a> 태그를 갤러리로 바인딩하도록 PhotosWipe를 설정하십시오. 활성화하려면 클릭하십시오
// 여기의 객체는 PhotosWipe 인스턴스이며 show (0), hide () 등과 같은 해당 메소드를 사용할 수 있습니다.
var myphotoswipe = code.photoswipe.attach (wind
}, 거짓);
jQuery를 사용하는 경우 통화 코드는 다음과 같습니다.
// jQuery 버전, 해당 JS 파일도 JS 파일에서 변경해야합니다.
// 예제에 대한 자세한 내용은 예제/02-jQuery.html을 참조하십시오
$ (document) .ready (function () {
// 여기의 객체는 PhotosWipe 인스턴스이며 show (0), hide () 등과 같은 해당 메소드를 사용할 수 있습니다.
var myphotoswipe = $ ( "#Gallery A"). PhotosWipe ({enableMouseWheel : False, enableKeyboard : False});
});
HTML 코드
<!- ul li 및 기타 물건은 썸네일을 표시하는 데 사용되며 필요에 따라 조정할 수도 있습니다. 아래의 <Img> 요소는 썸네일입니다. 필요하지 않은 경우 SRC는 비어 있도록 설정할 수 있습니다 ->
<ul id = "갤러리">
<li> <a href = "images/full/01.jpg"> <img src = "images/thumb/01.jpg"/> </a> </li>
<li> <a href = "images/full/02.jpg"> <img src = "images/thumb/02.jpg"/> </a> </li>
<li> <a href = "images/full/03.jpg"> <img src = "images/thumb/03.jpg"/> </a> </li>
<li> <a href = "images/full/04.jpg"> <img src = "images/thumb/04.jpg"/> </a> </li>
<li> <a href = "이미지/full/05.jpg"> <img src = "images/thumb/05.jpg"/> </a> </li>
<li> <a href = "이미지/full/06.jpg"> <img src = "images/thumb/06.jpg"/> </a> </li>
</ul>
매개 변수 설명
1. OxcerUserzoom : 사용자를 두 번 클릭하여 축소/이동하여 사진을 볼 수 있습니다. 기본값 = true
2. AUTOSTARTSLIDESHOW : PhotosWipe가 활성화되면 슬라이드 쇼가 자동으로 재생됩니다. 기본값 = false
3. 기본값 = false
4.BackButtonHideEnabled : 리턴 키를 눌러 앨범 슬라이드를 숨 깁니다. 주로 Android와 Blackberry에서 사용합니다. BB6, Android v2.1, iOS 4 및 최신 버전을 지원합니다. 기본값 = true
5.captionandandtoolbarautohidelay : 지연 시간은 제목 표시 줄과 도구 모음에 자동으로 숨겨져 있습니다. 기본값은 = 5000 (ms)입니다. 0으로 설정하면 자동으로 숨겨져 있지 않습니다 (가시 및 숨겨진 전환을 위해 탭/클릭).
6.captionandandtoolbarflipposition : 제목 표시 줄과 도구 모음을 전환합니다 (캡션을 하단에 표시하고 도구 모음이 상단에 표시됩니다). 기본값 = false
7. CaptionandToolbarhide : 제목 표시 줄과 도구 모음을 숨 깁니다. 기본값 = false
8.captionand andtoolbaropacity : 제목 표시 줄 및 도구 모음의 투명성 (0-1). 기본값 = 0.8
9.captionand 및 toolbarshowemptycaptions : 현재 이미지의 제목이 비어있는 경우에도 제목 표시 줄이 표시됩니다. 기본값 = true
10. CacheMode : 캐시 모드, code.photoswipe.cache.mode.normal (default, normal) 또는 code.photoswipe.cache.mode.aggreast (Radical, Active). Photoswipe가 이미지 캐시 캐시를 관리하는 방법을 결정합니다.
11. 공격적인 모드는 비어있는 비 "현재, 이전, 다음"이미지의 유형을 적극적으로 설정합니다. 이전 iOS 브라우저의 메모리 오버 플로우에 유용합니다. 대부분의 경우 일반 모드는 괜찮습니다.
12. DoubleTapspeed : 더블 클릭의 최대 간격. 기본값 = 300 (MS)
13. DoubleTapzoomlevel : 사용자가 두 번 클릭하면 배율이 기본 "확대 된"레벨입니다. 기본값 = 2.5
14.enabledrag : 이전/다음 이미지를 현재 인터페이스로 드래그 할 수 있습니다. 기본값 = true
15.enablekeyboard : 키보드 작업 허용 (왼쪽 및 오른쪽 화살표 스위칭, ESC 출구, 자동 재생, 스페이스 바 디스플레이/숨겨진 제목 표시 줄/출구를 입력하십시오). default = true
16. ENABLEMUSEWHEEL : 마우스 휠 작동을 허용합니다. default = true
17. FadeInspeed : 효과 요소의 속도 (지속 시간), 밀리 초. 기본값 = 250
18. 페이드 아웃 스피드 : 페이드 효과 요소의 속도 (지속 시간), 밀리 초. 기본값 = 250
19. ImagesCalemethod : 이미지 스케일링 방법 (모드). 선택적 값 : "Fit", "FitnouScale"및 "Zoom". 모드 "FIT"는 이미지가 화면에 적응하도록합니다. "FitnousCale"은 "Fit"과 비슷하지만 이미지를 확대하지 않습니다. "Zoom"은 이미지를 전체적으로 스크리닝하지만 이미지 스케일링이 똑같이 비례하지 않을 수 있습니다. 기본 = "적합"
20. verstmousewheel : 마우스 휠을 뒤집습니다. 기본적으로 마우스 아래로 스크롤하면 다음 그림과 이전 그림으로 전환됩니다. default = false
21.JQueryMobile : Photoswipe가 jQuery 모바일 프로젝트에 통합되어 있는지 여부를 나타냅니다. 기본적으로 Photoswipe는 이것을 시도하고 해결합니다.
22. jQueryMobiledialoghash : 창과 대화 페이지에 사용 된 JQuery Mobile의 해시 태그. 기본값 = "& ui-state = 대화 상자"
23. LOOP : 앨범이 자동으로 루프하는지 여부. default = true
24.margin : 두 그림 사이의 간격, 장치는 픽셀입니다. 기본 = 20
25. Maxuserzoom : 최대 배율. default = 5.0 (0으로 설정하면 무시됩니다)
26. Minuserzoom : 이미지의 가장 작은 축소 다중. default = 0.5 (0으로 설정하면 무시됩니다)
27. Mousewheelspeed : 마우스 휠에 대한 감도. 기본값 = 500 (MS)
28.nextPreviousSlidespeed : 이전 버튼과 다음 버튼을 클릭하면 몇 밀리 초가 지연 될 수 있습니다. Default = 0 (지금 전환)
29. Preventhide : 사용자가 Photoswipe를 닫지 않도록합니다. 또한 도구 모음의 "닫기"닫기 버튼을 숨 깁니다. 독점 페이지에서 사용하십시오 (예제는 소스 코드의 예제/08-excluction-mode.html)를 사용하십시오. default = false
30. PreventSlideshow : 자동 재생 모드를 차단합니다. 또한 도구 모음에서 재생 버튼을 숨 깁니다. default = false
31.SlideshowDelay : 자동 재생 모드에서 다음 사진을 재생하는 데 얼마나 걸립니까? 기본값 = 3000 (MS)
32.slidespeed : 이미지가보기에 미끄러질 때. 기본값 = 250 (MS)
33. wipethreshold : 스 와이프 제스처 이벤트를 트리거하기 위해 손가락을 슬라이드하는 픽셀 수 기본 = 50
34. WIPETIMETHRESHOLD : 스 와이프 제스처를 트리거하기 위해 최대 밀리 초를 정의합니다. 너무 느리면 슬라이드가 트리거되지 않으며 현재 사진의 위치 만 드래그합니다. 기본값 = 250
35. Slidetimingfunction : 슬라이딩시 기능 완화 기능. Default = "Ease-Out"
36.zindex : 초기 zindex 값. 기본값 = 1000
37.enableUiwebViewRepositionTimeout : 장치의 방향이 변경되었는지 확인하십시오. default = false
38.uiwebViewResetPositionDelay : 장치의 방향이 정기적으로 변하는 지 확인하는 시간은 500 (MS)
39. preventDefaultTouchevents : Page Scrolling과 같은 기본 터치 이벤트를 차단합니다. default = true
40.TARGET : 법적 DOM 요소 (예 : DIV) 여야합니다. 기본값은 창입니다 (전체 페이지). 낮은 수준의 DOM 인 경우 DOM에 표시되며 전체 화면이 아닐 수 있습니다.
사용자 정의 기능
getToolbar : function () { /*도구 모음* /}에 표시 할 html 문자열을 반환합니다. 기본적으로 Gallery는 <a> 태그를 사용하여 <ag> 썸네일을 랩핑한다고 가정하고 <a> 태그의 HREF 속성은 전체 이미지의 URL입니다. 이 시간 에이 방법을 사용하여 해당 요소의 그림의 경로를 반환 할 수 있습니다. 그것은 모든 종류 일 수 있습니다. 예를 들어 Rel 속성 또는 무언가. jQuery를 갖는 것이 더 쉬울 것입니다. */ return el.getAttribute ( 'rel'); }, getImageCaption : function (el) { /** getImageSource 메소드처럼,이 메소드는 이미지의 제목을 반환합니다. 기본적으로 Gallery는 이미지의 ALT 속성을 찾습니다. * /}, getimagemetadata : function (el) { / ** ondisplayimage를 듣는 경우이 기능을 통해 추가 메타 정보를 얻을 수 있습니다. ondisplayImage {longdescription : el.getAttribute (el, 'data-long-description')}}}}Android 전화의 경우 한 번의 클릭으로 인해 레이어를 클릭하는 문제가 발생하고 하단 레이어는 여전히 클릭 이벤트가 트리거됩니다. 우리의 해결책은 다음과 같습니다.
// Android 전화의 여러 레벨에서 클릭을 트리거합니다. 타이머를 사용하여 var event_timeout = 500; // 여러 이벤트 트리거 방지 // 단기간에 연속 이벤트를 블록 var multiclickprevent = false; function extencmulticlick () {if (multiclickprevent) {return false; } multiclickprevent = true; window.settimeout (function () {multiclickprevent = false;}, event_timeout); 진실을 반환하십시오. }; // 브라우저에 적응 var userAgent = navigator.useragent; var likeios = userAgent.match (/iPad | iPhone | iPod/i); var likeAndroid = userAgent.match (/android/i); var SpecialClick = "클릭"; if (likeios) {SpecialClick = "터치 스타트 클릭"; } else if (likeAndroid) {SpecialClick = "터치 스타트 클릭"; } /example $ ( ". t_right"). live (specialClick, function () {if (extenceMulticLick ()) {// 기타 작업 수행} else {// else는 작업을 거부 할 수 있습니다. false 또는 기타 반환 false;}}); // example $ ( "body"). live (specialClick, function () {if (expendmulticlick ()) {// 기타 작업을 수행}});위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.