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 플러그인의 주요 매개변수 및 메소드 목록

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