jQuery Plugin For Any Content Lightbox - Framer
File Size: | 219 KB |
---|---|
Views Total: | 3468 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.