浙江 杭州

jQuery响应式多功能Lightbox特效插件

系统分类: 网页特效 - jquery插件 - jQuery多媒体插件 2016-08-29

人气5992

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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.ui3g.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

});                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:446.00KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1925.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery响应式多功能Lightbox特效插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有2 评论)