jQuery Magnify 플러그인 사용에 대한 자세한 설명

이번에는 jQuery Magnify 플러그인 사용에 대한 자세한 설명을 가져왔습니다. jQuery Magnify 플러그인 사용 시 주의사항은 무엇인가요?

일부 특별한 비즈니스 요구로 인해 한 달 이상의 휴면과 고민 끝에 Windows를 구현하는 jQuery 이미지 뷰어 플러그인 Magnify를 개발했습니다. 모달 창 끌기, 크기 조정, 최대화, 이미지 확대/축소, 회전, 패닝, 키보드 제어 등 사진 뷰어의 모든 기능 플러그인 스타일은 모두 기본입니다. CSS를 사용하면 사용자 정의하기가 매우 쉽고 원하는 스타일로 쉽게 수정할 수 있습니다. React와 Vue는 나중에 출시될 예정입니다. 관련 버전의 플러그인. 이번 글에서는 주로 플러그인의 특징과 사용법을 소개하고, 플러그인 개발에 대한 자세한 내용은 이후의 특정 글에서 설명하도록 하겠습니다.

최근 바쁜 업무 일정으로 인해 거의 매일 저녁 10시에 집에 돌아와서 플러그인을 작성하기 시작하는데, 잠자리에 들면 벌써 자정이 지나서 지금은 육체적으로나 육체적으로 모두 지쳐있습니다. 정신적으로. 관련 플러그인이 발견되지 않았기 때문에 마우스를 중심으로 사진 크기 조정, 팝업 창 크기 변경 시 그림 이동 제한, 이후 크기 조정 및 패닝 등 많은 문제에 대해 독립적으로 생각하려고 머리를 썼습니다. 사진 회전 등, 플러그인 개발 가장 귀찮은 것은 세부 사항이며, 대부분의 시간은 단일 기능을 수리하는 데 소비됩니다. 벌레.

또한, 플러그인 개발에 있어서 가장 큰 어려움은 기능 구현이 아니라, 플러그인을 어떻게 디자인하고, 플러그인을 어떻게 더 쉽고 편리하게 사용할 수 있는지에 관한 것입니다. 플러그인을 디자인하는 방법은 이 기사의 초점이 아닙니다. 나중에 플러그인 디자인 아이디어를 소개하는 특별 기사를 작성하겠습니다.

플러그인의 거의 모든 코드는 팝업창이나 이미지의 너비, 높이, 왼쪽, 상단을 조정하므로 호환성 문제는 크지 않습니다. 주로 IE 9 이하에서는 필요합니다. 이를 달성하려면 필터를 사용하세요. 스타일 조정을 용이하게 하기 위해 많은 상대 위치 계산이 있습니다.

Magnify는 파일 분리 방식으로 작성되었으며 npm 플러그인을 사용하여 패키징되었습니다. 새로운 구문이나 널리 사용되는 패키징 도구를 사용하지 않습니다. npm 도구를 사용하는 것은 프로젝트 개발 및 릴리스 패키징의 추세가 되었습니다.

데모

예제를 보기 위해 URL을 클릭하고 싶지 않다면 아래 CodePen을 통해 플러그인 효과를 볼 수 있습니다. 창 크기를 제외하면 두 가지 방법의 차이가 없습니다.

네트워크 속도나 기타 이유로 CodePen을 열 수 없는 경우 아래 이미지 데모를 볼 수 있습니다.

주요 기능

Magnify의 기능은 기본적으로 수행할 수 있는 모든 기능을 완료하는 Windows 사진 뷰어와 비교할 수 있습니다.

1. 모달 창 끌기

이미지 크기가 표시 영역보다 크지 않으면 이미지 표시 영역을 통해 팝업 창을 드래그할 수도 있습니다. 이는 QQ 사진 뷰어와 동일한 작동 방식입니다.

2. 모달 창 크기 조정

현재 리사이즈에 약간의 버그가 있으나 전체적인 사용에는 지장이 없습니다.

3. 모달 창 최대화

팝업창 최대화 외에 최소화 기능도 개발 초기에 설계됐으나 다소 맛없는 느낌이 들어 아직 추가되지 않았다.

4. 사진 확대

마우스 휠, 버튼, 키보드 등을 통해 조작할 수 있습니다.

5. 사진 회전

현재 이미지 회전 기능에는 IE9 이하 버전을 지원하는 코드가 추가되지 않았습니다.

6.키보드 제어

확대와 Windows 사진 뷰어의 버튼은 동일합니다

← 上一张 → 下一张 + 放大 - 缩小 ctrl + alt + 0 实际尺寸 ctrl + , 向左旋转 ctrl + . 오른쪽으로 회전 7. 전체 화면

Magnify의 전체 화면 표시는 기본 표시 기능만 구현하며 아직 자동 슬라이드 회전은 구현하지 않습니다. 키보드를 사용하여 전체 화면 환경에서 이미지를 제어합니다.

사용방법

Magnify의 사용법은 대부분의 다른 라이트박스 플러그인과 다르지 않습니다. 다른플러그인을 사용하는 데 익숙하다면 Magnify를 사용하는 데 장애가 없습니다.

1. 인용

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

이 필요한 서류 Magnify는 기본적으로 멋진 글꼴 아이콘을 사용하므로 글꼴 멋진 CSS를 참조해야 합니다. 문서. 다른 아이콘을 사용하려면 옵션의 아이콘 매개변수를 수정하면 됩니다. 이후 버전에서는 사용자 정의 글꼴 아이콘 파일을 추가하거나 svg를 사용할 수 있습니다. 상.

2.HTML 구조

Magnify는 기본적으로 다음 구조를 사용합니다. 이 구조는 호환성을 위해 처리될 수 있으며 대부분의 라이트박스에서 사용되는 구조이기도 합니다.

아래의 더 간단한 구조를 사용할 수도 있습니다

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

Magnify의 HTML 구조에는 다음 옵션이 포함되어 있습니다

더 큰 이미지에 연결하려면 src 속성을 ​​추가하세요. <a> 태그 내에서 사용되면 href 속성 값을 재정의합니다. 제목을 표시하려면 data-caption 속성을 ​​추가하세요. 이 속성을 사용하지 않으면 플러그인이 URL에 이미지 이름을 표시합니다. 그룹 이미지에 data-group 속성을 ​​추가하세요. 3.플러그인 초기화src 属性可以链接到大图。如果在 <a> 标签中使用，它会覆盖 href 属性的值。添加 data-caption 属性可以显示标题。如果你不使用这个属性，插件会显示 URL 中的图片名。添加 data-group 属性可以对图片分组。 3.初始化插件

如果在 HTML 中添加 data-magnify

HTML에 data-magnify 속성을 ​​추가하면 플러그인이 자동으로 초기화됩니다.

플러그인을 수동으로 초기화하는 방법은 모든 jQuery 플러그인과 동일합니다:

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img src="small-3.jpg">
</a>

매개변수 구성

<img data-magnify="gallery" src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" src="big-3.jpg" src="small-3.jpg">

플러그인 매개변수의 구체적인 의미에 대해서는 여기에 복사하여 붙여넣지 않겠습니다. 자세한 지침은 공식 문서를 참조하세요. 질문이 있으시면 여기에 메시지를 남겨주세요.

맞춤 스타일 플러그인 스타일은 상대적으로 단순하기 때문에 수정도 매우 쉽습니다. Windows 사진 뷰어 외에도 QQ의 사진 뷰어도 매우 발전했습니다. 간단한 수정만으로 QQ 사진 뷰어 효과를 얻을 수 있지만

과 같은 일부 기능은 아직 구현되지 않았습니다. 라이브 데모는 다음과 같습니다.

이런 사진 뷰어를 만나니 상쾌하네요~

요약

현재 플러그인 전체는 완성되었으나, 특히 모바일 단말기에 대한 지원 등 아직 수정 및 추가해야 할 부분이 많습니다. 프로젝트에 대한 업데이트를 계속 지켜봐 주시기 바랍니다. 플러그인 소개에 대해서는 자세히 설명하지 않겠습니다. 버그를 발견하면 더 나은 제안이 있으면 GitHub에 질문을 하거나 여기에 메시지를 남겨주세요. 여러분의 지원이 제가 앞으로 나아갈 수 있는 가장 큰 동기가 됩니다! 이 플러그인이 도움이 되었거나 프로젝트에서 이 플러그인을 사용하는 경우 메시지를 남겨 알려주세요!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:
JS를 사용하여 60초 후에 인증 코드를 다시 전송하세요

JS는 모바일 측에서 무제한 로딩 및 페이징 기능을 구현합니다

위 내용은 jQuery Magnify 플러그인 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!