OS X Lookup Style iFrame Popup Plugin with jQuery - Quicklook
File Size: | 38.1 KB |
---|---|
Views Total: | 599 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Quicklook is a tiny jQuery plugin helps you display an animated iframe popup next to the toggle link similar to the Mac OS X lookup.
How to use it:
1. Download the quicklook plugin and include the quicklook.jquery.js after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="quicklook.jquery.js"></script>
2. Create a link to toggle an iframe popup.
<a href="EXTERNAL URL">Click me!</a>
3. Call the function on the a
tag to enable the plugin.
$('a').quicklook();
4. Style the iframe popup in the CSS.
#quicklook_container { -webkit-transition: height 0.6s ease-in-out, width 0.6s ease-in-out; -moz-transition: height 0.6s ease-in-out, width 0.6s ease-in-out; transition: height 0.6s ease-in-out, width 0.6s ease-in-out; z-index: 10; position: absolute; overflow: hidden; } #quicklook_container iframe { border: none; zoom: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; position: absolute; top: 0px; } #quicklook_container .close { display: none; position: absolute; top: 10px; right: 10px; font-weight: bold; z-index: 2; color:#fff; size:2em; cursor:pointer; }
5. Plugin options available.
// click or hover action: 'click', // auto resize the popup autofit: true, // height / width of the popup height: 500, width: 500, // background color bg_color: '#ccc'
This awesome jQuery plugin is developed by ryanshawty. For more Advanced Usages, please check the demo page or visit the official website.