SmartPhoto 다운로드 - SmartPhoto 소스 코드 다운로드

SmartPhoto

기타 소스코드

v1.6.5

다운로드

스마트포토

특히 모바일 장치를 위한 가장 사용하기 쉬운 반응형 이미지 뷰어

전체 문서 및 데모는 https://appleple.github.io/SmartPhoto/를 참조하세요.
일본인이라면 여기(https://www.apple.com/blog/javascript/smartphoto-js.html)를 대신 참조하세요.

특징

핀치 인/핀치 아웃/드래그/스와이프 등 직관적인 제스처
가속도계를 사용하여 이미지 이동
키보드 및 화면 판독기를 통해 액세스 가능
URL 해시를 통해 사진 표시
사진 그룹을 만들 수 있습니다

설치

npm
독립형

npm을 통해

 npm install smartphoto --저장

또는 실

 원사 스마트 포토 추가

용법

필요하다

 const SmartPhoto = require('smartphoto');

스마트포토.js

 document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto");});

jquery-smartphoto.js

 $(function(){$(".js-smartphoto").SmartPhoto();});

기본 독립형 사용법

옵션

변하기 쉬운	설명	기본
화살	이전/다음 화살표	진실
네비게이션	하단 내비게이션 이미지	진실
useOrientationApi	가속도계를 사용하여 이미지 이동	진실
크기 조정스타일	화면에 채우기/맞추기 위해 이미지 크기 조정	'채우다'
애니메이션속도	이미지 전환 시 애니메이션 속도	300
강제 간격	이미지에 힘을 가하는 주파수	10

부품 숨기기

 document.addEventListener('DOMContentLoaded',function(){new SmartPhoto(".js-smartphoto",{arrows: false,nav: false});});

맞춤/채우기 옵션

이미지 크기를 맞춤/채우기에 맞게 조정할 것인지 선택할 수 있습니다.

 document.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartphoto",{ resizeStyle: 'fit'
  });});

이벤트

 // 모달이 열렸을 때photo.on('open',function(){console.log('open');});// 모달이 열렸을 때photo.on('close',function(){console.log( 'close');});// 모든 이미지가 로드된 경우photo.on('loadall',function(){console.log('loadall');});// 사진이 로드된 경우 Changephoto.on('change',function(){console.log('change');});// 스와이프가 시작될 때photo.on('swipestart',function(){console.log('swipestart');} );// 스와이프 종료 시photo.on('swipeend',function(){console.log('swipeend');});// 확대 시 inphoto.on('zoomin',function(){console.log('zoomin');});// 축소된 경우photo.on('zoomout',function(){console.log('zoomout');} );

SCSS

변하기 쉬운	설명	기본
$ 애니메이션 속도	이미지 전환 시 애니메이션 속도	0.3초
$배경색	이미지를 볼 때 배경색	RGBA(0, 0, 0, 1)
$헤더 색상	헤더 색상	RGBA(0, 0, 0, .2)