jQuery响应式多功能Lightbox特效插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

Image

Inline Contents


				<a href="#inline_sample" class="framer" title="Inline Contents Sample" data-framer-description="inline content description">Inline Contents Sample</a>

Video (Video.js - HTML5 Video & Flash Video)

HTML5 Movie

必须要引入Video.js。


				<a href="http://video-js.zencoder.com/oceans-clip" 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='{"controls": true, "autoplay": false, "preload": "auto", "poster": "http://video-js.zencoder.com/oceans-clip.png"}'>
				Movie
				</a>

必须的属性 REQUIREATTRIBUTES

data-framer-type: "video"
data-framer-width: 视频的width
data-framer-height: 视频的height
data-framer-video-class: 指定Video JS
data-framer-video-setup: Video JS的设置

Media

YouTube Vimeo SoundCloud Twitch


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

必须的属性 REQUIREATTRIBUTES

data-framer-width: 视频的width
data-framer-height: 视频的height ※ SoundCloud的高度固定为166px。

可选属性 OPTIONATTRIBUTES

data-youtube-option: YouTube的选项。参数指定。 ex: vq=highres

iframe

eternity design BLOG


				<a href="http://blog.eternitydesign.net/" class="framer" data-framer-width="800" data-framer-height="600" data-framer-type="iframe">eternity design BLOG</a>

必须的属性 REQUIREATTRIBUTES

data-framer-type: "iframe"
data-framer-width: iframe的width
data-framer-height: iframe的height

Ajax

Ajax Contents Sample Ajax Contents Error Sample


				<a href="ajax.html" class="framer" data-framer-type="ajax">Ajax Contents</a>

必须的属性 REQUIREATTRIBUTES

data-framer-type: "ajax"

CSS Animation

fade_in_scale slide_in_right slide_in_bottom sign_3d


				<a href="ajax.html" class="framer" data-framer-type="ajax">Ajax Contents</a>

必须的属性 REQUIREATTRIBUTES

data-framer-type: "ajax"