jQuery Framer Plugin Examples

Image

Inline Contents

Inline Contents Sample <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

Requires 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>

Data-attributes

data-framer-type
"video"
data-framer-width
width
data-framer-height
height
data-framer-video-class
Video JS CSS class
data-framer-video-setup
Video JS settings

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>

Data-attributes

data-framer-width
width
data-framer-height
height * SoundCloud = 166px

Optional attributes

data-youtube-option
YouTube options. 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>

Data-attributes

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

Ajax

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

Data-attributes

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>

Data-attributes

data-framer-animation
fade_in_scale, sign_3d, slide_in_bottom, slide_in_right
Inline Contents Sample