Preview All Links In A Chrome Like Modal - jQuery Previewer

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.