Jquery 플러그인 소스 코드를 사용한 Fancybox의 풍부한 팝업 레이어 효과 download_jquery

Fancybox는 풍부한 팝업 레이어 효과를 표시할 수 있는 탁월한 jquery 플러그인입니다. 이전 기사에서 fancybox 팝업 레이어 효과를 소개한 바 있습니다. fancybox에 비해 fancybox는 DIV, 그림, 그림 세트, Ajax 데이터를 로드하는 것 외에도 SWF 영화, iframe 페이지 등을 로드할 수 있습니다. .

효과 시연 소스코드 다운로드

fancybox 기능:

이미지, HTML 텍스트, 플래시 애니메이션, iframe 및 ajax 지원 가능
플레이어의 CSS 스타일을 맞춤설정할 수 있습니다.
그룹으로 플레이할 수 있습니다.
마우스 휠 플러그인이 포함된 경우 fancybox는 마우스 휠 스크롤을 지원하여 사진을 넘길 수도 있습니다.
fancybox 플레이어는 프로젝션을 지원하여 더욱 입체적인 느낌을 줍니다.

키보드 화살표 키와 ESC 키를 지원합니다.
풍부한 매개변수 설정 및 메소드 호출.
강력한 확장성.

사용방법은?

이 글에서는 Fancybox의 사용법을 설명하기 위해 DEMO의 Demo2를 예로 들어 설명합니다.

1. 자바스크립트 참조 및 CSS 파일 참조 추가

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script> 

2. HTML

<h4>图片集，支持键盘方向键</h4> 
<p> 
 <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
 <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
 <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p> 

3. 팬시박스에 전화하세요

$(function(){ 
 $("a[rel=group]").fancybox({ 
 'titlePosition' : 'over', 
 'cyclic' : true, 
 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
   return '<span id="fancybox-title-over">' + (currentIndex + 1) + 
 ' / ' + currentArray.length + (title.length &#63; ' ' + title : '') + '</span>'; 
  } 
 }); 
}); 

fancybox의 매개변수 설정 형식은 'key':'value'입니다. titlePosition: 사진에서 사진 제목 표시 위치를 으로 설정합니다. 순환: 이미지 검색 모드를 순환 검색으로 설정합니다. titleFormat: 총 사진 수와 현재 사진 순서를 표시할 수 있는 사진 제목의 형식을 설정합니다.

fancybox 플러그인의 주요 매개변수 및 메소드 목록

매개변수/방법	설명	기본값
기본
너비	콘텐츠가 swf, iframe 또는 단일 행 텍스트인 경우 팝업 직렬 포트의 너비를 설정합니다. 'autoDimensions'는 false로 설정되어야 합니다	560
키	콘텐츠가 swf, iframe 또는 단일 줄 텍스트인 경우 팝업 직렬 포트의 높이를 설정합니다. 'autoDimensions'는 false로 설정되어야 합니다	340
순환	콘텐츠가 사진 모음인 경우 반복해서 표시할지 여부입니다.	거짓
centerOnScroll	팝업은 항상 브라우저 중앙에 표시됩니다.	거짓
모달	모달창 사용 여부.true로 설정되면 'hideOnOverlayClick', 'hideOnContentClick', 도 포함되어야 합니다. 'enableEscapeButton', 'showCloseButton'이 false로 설정되고 'overlayShow'가 true로 설정됨	거짓
제목위치	제목 위치는 '외부', '내부', '위'로 설정할 수 있습니다	'바깥'
전환인, 전환아웃	창 표시 모드는 '탄성', '페이드' 또는 '없음'으로 설정할 수 있습니다	'페이드'
보내기	방법, 서버가 처리를 위한 매개변수를 수신할 수 있도록 크롭된 이미지의 데이터를 서버로 전송합니다. 예: Cropzoom.send('process.php','POST',{id=1},function(r){ 경고(r); });
방법
$.fancybox.showActivity	로딩 애니메이션 보기
$.fancybox.hideActivity	로딩 애니메이션 숨기기
$.fancybox.close	창 닫기
$.fancybox.resize	내용에 맞게 창 높이를 자동으로 조정
중앙	선택 항목을 중앙에 표시할지 여부, 즉 컨테이너 중앙에 표시합니다.

위 내용은 소스코드 다운로드가 포함된 Jquery 플러그인의 Fancybox의 풍부한 팝업 레이어 효과에 대한 전체 설명입니다.