jQuery 탄력적 계층 플러그인 jquery.fancybox.js 사용법 example_jquery

이 기사의 예에서는 jQuery 탄력적 레이어 플러그인 jquery.fancybox.js의 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

Fancybox는 강력한 기능을 갖춘 jquery 플러그인입니다. 확대된 이미지에 그림자 효과를 추가하고 관련 이미지 그룹에 탐색 작업 버튼을 추가하는 것을 지원합니다. 레이어를 표시하는 것 외에도 CSS를 통해 iframe 콘텐츠를 표시하고 스타일을 사용자 지정할 수도 있습니다. 다른 플러그인과 결합하면 훨씬 더 많은 소용돌이 효과를 얻을 수 있습니다.

공식 다운로드 및 예시 주소는 여기에 있습니다: http://fancyapps.com/fancybox/

첨부된 파일은 이 사이트의 다운로드 주소입니다.

지금까지 fancybox 2.1.5 최신 버전에서는 호출 방식이 조금 바뀌었고 일부 매개변수가 추가되었습니다. 위 주소 하단에는 매우 상세한 매개변수 설명이 있습니다. 사용과정에 대해 간략히 말씀드리겠습니다.

1. fancybox를 사용하려면 최소 2개의 파일을 불러와야 합니다

<script type="text/javascript" src="jquery.fancybox.js?v=2.1.2"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.2" media="screen" />

여기서 저를 불행하게 만드는 한 가지는 CSS 파일을 로드해야 한다는 것입니다. CSS 파일을 로드해야 하는 jquery 플러그인이 많지 않습니다.

2. html이 fancybox를 호출하는 경우

<a id='fancybox' href="test1.html" >click here</a>
//<a>标签里面加上一个class="fancybox.ajax"，不然js里面要加参数type来说明

어떤 버전부터인지 모르겠습니다. ajax 호출시 클래스에 fancybox.ajax를 추가해야 합니다. iframe 호출시 fancybox.iframe을 추가해야 합니다. 그렇지 않으면 조정할 수 없습니다. 전제는 탄력적 레이어 유형 매개변수를 지정하지 않고 fancybox가 호출된다는 것입니다. 유형을 참조하려면 type 매개변수를 사용하십시오.

3.js가 fancybox를 호출합니다

$("#fancybox").fancybox({
  'width'        : '30%',
  'height'        : '20%',
  'autoScale'      : false,
  'transitionIn'     : 'none',
  'transitionOut'    : 'none',
  'onClosed' : function() {alert('test');}
});

fancybox Elastic Layer 플러그인에서 주의해야 할 점은 Ajax Elastic Layer를 사용하든 iframe을 사용하든 페이지를 로드하고 무언가를 팝업할 때 높이와 너비를 추가해야 한다는 것입니다. 기본적으로 적응형입니다. 이로 인해 CSS에서 특수 글꼴을 사용하는 경우 너비와 높이를 설정하더라도 브라우저에 따라 계산되는 팝업 레이어의 크기가 달라집니다.

jQuery 플러그인과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "일반적인 jQuery 플러그인 및 사용법 요약"

을 확인할 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.