fancybox는 뛰어난 jquery 팝업 레이어 표시 플러그인입니다.

오늘은 훌륭한 jquery 팝업 레이어 표시 플러그인 fancybox를 여러분과 공유하겠습니다. 이미지를 표시하는 것 외에도 플래시, iframe 콘텐츠, html 텍스트 및 ajax 호출도 표시할 수 있으며 CSS를 통해 모양을 맞춤설정할 수 있습니다.

fancybox 기능:

1. 이미지, HTML 텍스트, 플래시 애니메이션, iframe 지원 가능 그리고 Ajax 지원;

2. 플레이어의 CSS 스타일을 사용자 정의할 수 있습니다.

3. 그룹으로 플레이 가능;

4. 마우스 휠 플러그인이 포함된 경우 fancybox는 마우스 휠 스크롤을 지원하여 사진을 넘길 수도 있습니다.

5. fancybox 플레이어는 프로젝션을 지원하여 더욱 입체적인 느낌을 줍니다.

fancybox 사용 방법:

먼저 jquery 코어 라이브러리를 소개해야 합니다. 및 fancybox 플러그인:

<script></script><script></script>

전환(일부 애니메이션 효과)을 사용해야 하는 경우 다음 js도 도입해야 합니다.

<script></script>

마우스를 지원해야 하는 경우 휠 스크롤 효과를 위해 다음 js도 도입해야 합니다.

<script></script>

그런 다음 스타일 시트를 도입합니다.

<link>

페이지에 추가하세요. a 태그:

<a><img  src="/static/imghwm/default1.png" data-src="image_small.jpg" class="lazy" alt="fancybox는 뛰어난 jquery 팝업 레이어 표시 플러그인입니다." ></a>

a 태그의 href에 있는 이미지는 다음과 같습니다. 큰 이미지를 표시하려면 팝업 레이어가 필요합니다.

마지막으로 fancybox 메소드 호출:

$("#single_image").fancybox();

물론 사진 한 장만 표시할 수 있으며 때로는 사진을 만들어야 할 수도 있습니다. album 수업에 대한 사진이 여러 장 있는 경우 rel 속성을 사용하여 사진 그룹(즉, fancybox 기능의 세 번째 지점)을 만들 수 있습니다. 다음 코드는

<a><img  src="/static/imghwm/default1.png" data-src="image_small_1.jpg" class="lazy" alt="fancybox는 뛰어난 jquery 팝업 레이어 표시 플러그인입니다." ></a><a><img  src="/static/imghwm/default1.png" data-src="image_small_2.jpg" class="lazy" alt="fancybox는 뛰어난 jquery 팝업 레이어 표시 플러그인입니다." ></a>

입니다. 호출 방법도 매우 간단합니다.

$(".grouped_elements").fancybox();

fancybox 매개변수:

fancybox는 매개변수 구성이 매우 우수하기 때문에 우수합니다. 강력하며 거의 모든 요구 사항을 충족할 수 있습니다.

공식 홈페이지 주소: http://fancybox.net/

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 동영상 튜토리얼을 방문하세요.