Preview All Links In A Chrome Like Modal - jQuery Previewer
File Size: | 3.39 MB |
---|---|
Views Total: | 1562 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Previewer is a jQuery link previewer plugin which enables you to open multiple links in a responsive, draggable, Google Chrome-like modal window with tabs support.
It Also has the ability to blur the main content when the modal previewer is opened. Supports both RTL and LTR directions.
How to use it:
1. Insert the Previewer plugin's files into the document which has jQuery library installed.
<link href="style.css" rel=stylesheet> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="previewer.js"></script>
2. Just call the function on any element which has links pointing to the external webpage and the plugin will do the rest.
<div class="contentWraper"> <div class="content"> <p>But what are some of your favorite weapons in Far Cry 5? Let us know in the comments below. If you're interested in our other Far Cry 5 guides, be sure to check out our feature highlighting <a href="https://www.gamespot.com/gallery/far-cry-5-guide-9-tips-we-wish-we-knew-before-star/2900-1906/">nine tips we wish we knew before starting</a>. In other news, Ubisoft announced <a href="https://www.gamespot.com/articles/far-cry-5s-dlc-trailer-shows-off-martian-fights-an/1100-6457231/">Far Cry 5's Season Pass</a>, which takes you to settings like Mars and the Vietnam War. We also recently learned more about how to access the game's <a href="https://www.gamespot.com/articles/far-cry-5-live-event-how-to-access-it-and-get-the-/1100-6457896/">live events and the special rewards </a>you earn by completing them. </p> </div> </div>
$(function () { $('.contentWraper').previewer({ direction:'ltr' // or 'rtl' }); });
3. All default plugin options to customize the modal previewer.
$(function () { $('.contentWraper').previewer({ // hold time in seconds hold_time: 1, // shows tabs show_tab: true, // or 'rtl' direction: "ltr", // enable sandbox sandbox: { active: true, types: "allow-same-origin allow-scripts" }, // shows scrollbar show_scroll: false, // is responsive? responsive: true, // custom styles style: { width: "60%", height: "300px", radius: " 0 0 0 6px" }, // additional CSS classes class: "", // enable blue focus: true }); });
Changelog:
2018-06-02
- Updated
This awesome jQuery plugin is developed by HMarzban. For more Advanced Usages, please check the demo page or visit the official website.