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
});
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!