https://github.com/hmarzban/jquery-plugin-previewer
JQUERY Plugin - Modal Previewer - Linke Previewer
https://github.com/hmarzban/jquery-plugin-previewer
amd-modules jquery jquery-plugin link-preview previewer requirejs
Last synced: about 1 month ago
JSON representation
JQUERY Plugin - Modal Previewer - Linke Previewer
- Host: GitHub
- URL: https://github.com/hmarzban/jquery-plugin-previewer
- Owner: HMarzban
- Created: 2018-04-09T17:31:35.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-02T12:38:06.000Z (about 6 years ago)
- Last Synced: 2025-01-29T12:28:17.787Z (over 1 year ago)
- Topics: amd-modules, jquery, jquery-plugin, link-preview, previewer, requirejs
- Language: JavaScript
- Size: 3.28 MB
- Stars: 1
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
previewer.js
=============
Simple Jquery Module Plugin for preview link in your page.
This Jquery plugin open hyperlink in your website page on pops up modal, the user can open multi hyperlinks on one modal and manage them by tabs order. Test plugin now on the DEMO page.
# How to use
Add these two files in Header or Footer of your html file, Be careful before import `previewer.js` import JQuery or requirejs base on you need.
``` html
```
### JQUERY
``` javascript
$('.contentWraper').previewer(..option..);
```
### AMD, REQUIREJS
``` javascript
requirejs.config({
paths: {
jquery: '../node_modules/jquery/dist/jquery.min',
previewer:'../js/previewer'
}
});
requirejs(['jquery','previewer'], function( $ ) {
$('.contentWraper').previewer(..option..);
});
```
# Features
``` javascript
$('.contentWraper').previewer({
direction:'rtl',
hold_time: 2000,
dragable: false,
sandbox: {
active: true,
types: "allow-same-origin allow-scripts"
}
});
```
### Options
Option | Default | Acceptable
--- | --- | ---
hold_time | 1000 | Milliseconds
show_tab | true | Boolean
direction | ltr | `LTR or RTL`
sandbox | `active: true,types: "allow-same-origin allow-scripts` | `active:boolean,types:`[Iframe Attribute](https://www.w3schools.com/tags/att_iframe_sandbox.asp)
tab_Navigate| true | Boolean
style | `width: "60%",height: "300px"` | [width: px / % / vw , height: px / % / vh ](https://www.w3schools.com/cssref/css_units.asp)
class | "" | CSS Class Name string
focus | true | Boolean
dragable | false | Boolean
# jquery-plugin-previewer
JQUERY Plugin - Modal Previewer - Linke Previewer