jQuery Framer是一款非常好用的响应式多功能jQuery lightbox插件。该lightbox插件可以支持图片，Youtube视频，Vimeo视频，SoundCloud，Twitch，可以嵌入iframe，可以使用ajax调用内容，还可以播放HTML5视频文件。它的特点有：

  • 响应式设计，lightbox尺寸会自适应。
  • 使用Vague.js制作背景模糊效果。
  • 内容加载时带进度条指示。
  • 支持CSS3动画效果。
  • 带全屏遮罩效果。

使用方法

使用这个lightbox插件首先要引入jQuery、jquery.Framer.js和jquery.Framer.css文件。

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

如果需要支持HTML5视频，需要引入video.js和video-js.css文件。

<script src="js/videojs/video.js"></script>
<link rel="stylesheet" href="js/videojs/video-js.css">

如果需要Lightbox的背景模糊效果，需要引入 Vague.js 文件。

<script src="js/Vague.js"></script>
HTML结构

插件一个图片lightbox的基本HTML结构如下：

<a href="1.jpg" class="framer">
  <img src="1-small.jpg">
</a>

在lightbox中调用一个内部元素内容的HTML结构如下：

<a href="#inline_content" 
  class="framer" 
  title="Inline Content" 
  data-framer-description="inline content description">
  Inline Content
</a>

<div id="inline_content">Inline Content</div>

在lightbox中创建HTML5视频或flash的HTML结构如下：

<a href="PATH TO YOUR VIDEO" 
   class="framer" 
   data-framer-type="video" 
   data-framer-width="640" 
   data-framer-height="264" 
   data-framer-video-class="video-js vjs-default-skin" 
   data-framer-video-setup='{VIDEO OPTIONS}'> 
   Video 
</a>

在lightbox中创建Youtube / Video / SoundCloud / Twitch内容的HTML结构如下：

<a href="http://www.youtube.com/watch?v=6TtGqQtChxw" 
   class="framer" 
   data-framer-width="560" 
   data-framer-height="315">
   YouTube
</a>

在lightbox中嵌入iframe的HTML结构如下：

<a href="http://www.htmleaf.com/" 
   class="framer" 
   data-framer-width="800" 
   data-framer-height="600" 
   data-framer-type="iframe">
   jQuery Script
</a>
初始化插件

在页面加载完毕之后通过下面的方法来调用该lightbox插件。

$('.framer').Framer();

配置参数

$('.framer').Framer({

// animation type
animation: "fade",

// loading spinner color
loadingColor: '#fff',

// opacity level
opacity: 0.8,

// overlay fade spped
overlayTime: 500,

// click th overlay to close
isOverlayClose: true,

// auto resize for responsive design
isAutoResize: true,

// scrollable?
isScroll: true,

// resize ratio
resizeRatio: 0.9,

// animation speed
speed: 500,

// templates
title: '<div id="frmTitle"></div>',
description: '<div id="frm_description">{description}</div>',
closeBtn: '<div class="close_btn"></div>',

// addiontal html content appended to the lightbox
inner: {},

// width / height
width: 640,
height: 360,

// iframe template
iframe: '<iframe name="framer-iframe" frameborder="0" id="framer-iframe"></iframe>',

// ajax type
ajaxDataType: 'html',

// DOM element you wish to blur
blur: '',

isPushState: false,

// enable CSS animations
isCSSAnim: false

});