jQuery Plugin For Any Content Lightbox - Framer

Framer is a multi-purpose responsive jQuery lightbox plugin which supports images, inline html content, Html5 videos, iframes, Youtube / Vimeo videos and more.

Features:

• Auto resize for responsive design.
• Blurs the background content. Requires Vague.js.
• Content loading spinner based on spin.js.
• CSS3 powered animations.
• Fullscreen overlay.

Basic usage:

1. Load jQuery library and the jQuery Framer plugin's files in the document.

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

2. Load the video.js for Html5 video support.

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

3. Load the Vague.js for background blur effects.

<script src="js/Vague.js"></script>

4. Create a basic image lightbox.

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

5. Load lightbox content from an inline element.

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

6. Create an Html5 / flash video lightbox.

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

7. Create a lightbox for Youtube / Video / SoundCloud / Twitch.

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

8. Embed an iframe into the lightbox.

<a href="https://www.jqueryscript.net/" 
   class="framer" 
   data-framer-width="800" 
   data-framer-height="600" 
   data-framer-type="iframe">
   jQuery Script
</a>

9. Load an external data source via AJAX.

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

10. Initialize the lightbox plugin.

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

11. Available options.

$('.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

});

Change log:

2015-07-02

• fixed a loading bug.

---

This awesome jQuery plugin is developed by eternitydesign. For more Advanced Usages, please check the demo page or visit the official website.