Documentation

Last updated: November 27th, 2021

Library actually migrating

The full library is being improved. Because of the quantity of libraries this is being made by steps. The old version can be accesed from here, there you will be able to see libraries that are not in the new version. In our side we are mixing this 2 versions (old and new) to continue having all the features. So you dont need to change anything on your code.

Once we finished, all the documentation will be on this single page.

Use

Easy JS Library will help you use libraries easilier now, just with adding the js library you will able to use a lot of features just with HTML Tags!

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="https://weblabormx.github.io/Easy-JS-Library/library/script.js"></script>

The library load the javascripts and css automatically every time a library is called, so, dont worry about adding all the librarys every time, this plugin will do it for you!

Do you want some features to be intregrated on Easy Js Library? Please email us to carlosescobar@weblabor.mx or just collaborate on github.

See on GitHub

Forms

Examples of code used for forms.

Tags

Add tags clicking next the last item, write it and then press enter.

Library Name Jquery Tags Input Plugin
Library Version Unknown
Works on input
Required Attributes None
Returns The list of tags added divided with |. Example: one|two|three
Result
HTML Code
<input type="text" data-type="tagsinput" value="one|two|three" name="tags">

Multiple

Library to add dynamic fields easily.

Library Name Unknown
Library Version Unknown
Works on Everything
Required Attributes data-name
Optional Attributes data-load: if you want that everytime is loaded the script should load a js function.
data-remove: load a function when its removed an object, the item is sent.
data-values
data-not-change: set true to an input so the value will not change dinaymically
Returns An array with the data

Empty

Result
Add
  • Remove
HTML Code
<span id="costs-add">Add</span> <ul data-type="multiple" data-name="costs"> <li> <label>Name</label><input type="text" name="name" /> <label>Cost</label><input type="text" name="cost" value="100" /> <span class="costs-remove">Remove</span> </li> </ul>
Request sent
$POST['costs'] = [ [ 'name' => 'value', 'cost' => 'value' ], [ 'name' => 'value', 'cost' => 'value' ], .... ];

With selected data

Result
Add
  • Remove
PHP Code
<?php $array = array( 0 => array( 'name' => 'Ejemplo1', 'cost' => '100', ), 1 => array( 'name' => 'Ejemplo2', 'cost' => '200', ), 2 => array( 'name' => 'Ejemplo3', 'cost' => '300', ), ); $array = json_encode($array); ?>
HTML Code
<span id="costs-add">Add</span> <ul data-type="multiple" data-name="costs" data-values='<?php echo $array; ?>'> <li> <label>Name</label><input type="text" name="name" /> <label>Cost</label><input type="text" name="cost" value="100" /> <span class="costs-remove">Remove</span> </li> </ul>

Works with this library

Result
Add
  • Remove
HTML Code
<span id="multiple3-add">Add</span> <ul data-type="multiple" data-name="multiple3"> <li> <label>Name</label><input type="text" name="name" /> <label>Date</label><input type="text" data-type="date" name="name" /> <label>Color</label><input type="text" data-type="color" name="name" /> <span class="multiple3-remove">Remove</span> </li> </ul>

Bidimensional

Library to add bidimensional dynamic fields easily.

Library Name Unknown
Library Version Unknown
Works on ul
Required Attributes data-name
Optional Attributes data-values
Returns An array with the data

Empty

Result
Add row
    • Remove
    Add Remove
HTML Code
<span id="multiple4-add-row">Add row</span> <ul data-type="bimultiple" data-name="multiple4"> <li> <ul> <li> <label>Name</label><input type="text" data-type="color" name="color" /> <span class="multiple4-remove-column">Remove</span> </li> </ul> <span class="multiple4-add-column">Add</span> <span class="multiple4-remove-row">Remove</span> </li> </ul>
Request sent
$POST['multiple4'] = [ 0 => [ 'color' => [ '#fff', '#000', '#ddd', '#777', .... ] ], 1 => [ 'color' => [ '#f9f9f9', ... ] ], .... ];

With default data

Result
Add row
    • Remove
    Add Remove
HTML Code
<span id="multiple5-add-row">Add row</span> <ul data-type="bimultiple" data-name="multiple5" data-values='[{"color":["#fff","#000","#ddd"]},{"color":["#333","#fff","#ddd","#888"]},{"color":["#ccc"]}]'> <li> <ul> <li> <label>Name</label><input type="text" data-type="color" name="color" /> <span class="multiple5-remove-column">Remove</span> </li> </ul> <span class="multiple5-add-column">Add</span> <span class="multiple5-remove-row">Remove</span> </li> </ul>

Empty but with extra fields

Used if you need to send some extra fields

Result
Add row
    • Remove
    Add Remove
HTML Code
<span id="multiple6-add-row">Add row</span> <ul data-type="bimultiple" data-name="multiple6"> <li> <ul> <li class="extra"> <label>Name</label><input type="text" name="name" /> </li> <li> <input type="text" data-type="color" name="color" /> <span class="multiple6-remove-column">Remove</span> </li> </ul> <span class="multiple6-add-column">Add</span> <span class="multiple6-remove-row">Remove</span> </li> </ul>
Request sent
$POST['multiple6'] = [ 0 => [ 'name' => 'Home', 'color' => [ '#fff', '#000', '#ddd', '#777', .... ] ], 1 => [ 'name' => 'Away', 'color' => [ '#f9f9f9', ... ] ], .... ];

Extra fields with data

Result
Add row
    • Remove
    Add Remove
HTML Code
<span id="multiple7-add-row">Add row</span> <ul data-type="bimultiple" data-name="multiple7" data-values='[{"name":"Home","color":["#fff","#000","#ddd"]},{"name":"Away","color":["#333","#fff","#ddd","#888"]},{"name":"Special","color":["#ccc"]}]'> <li> <ul> <li class="extra"> <label>Name</label><input type="text" name="name" /> </li> <li> <input type="text" data-type="color" name="color" /> <span class="multiple7-remove-column">Remove</span> </li> </ul> <span class="multiple7-add-column">Add</span> <span class="multiple7-remove-row">Remove</span> </li> </ul>

Hierarchical

Sends $_GET["id"] to file, you need to send a json with key and value (title). Add data-parent attribute to select who should be the default parent. With data-value-parent will select automatically the value, add "," to separate actions.

Library Name OptionTree
Library Version Unknown
Works on input
Required Attributes src, name
Additional Attributes data-value-select: Allow to preselect values
Returns Key of the last selected children.
Result
HTML Code
<input type="text" name="category" data-type="hselect" src="get-subtree.php" data-value-select="220,226" />
PHP Code
<?php header('Access-Control-Allow-Origin: *'); $id = (isset($_GET['id']) && is_numeric($_GET['id']) ? (int) $_GET['id'] : null); echo json_encode(getChildsOf($id)); // Call method for getting childs in base of an ID ?>
JSON Example
{ "0":"Animals", "18":"Arts & Entertainment", "220":"Baby & Toddler", "252":"Business & Industrial", "340":"Cameras & Optics", "412":"Clothing & Accessories", "602":"Electronics", "954":"Food, Beverages & Tobacco", "1048":"Furniture", "1123":"Hardware", "1528":"Health & Beauty", "1694":"Home & Garden", "2247":"Luggage", "2272":"Mature", "2296":"Media", "2635":"Office Supplies", "2744":"Software", "2790":"Sporting Goods", "3369":"Toys & Games", "3496":"Vehicles & Parts" }

Dates

Library Name Unknown
Library Version Unknown
Works on input
Required Attributes None
Optional Attributes lang: (Default en) for selecting the language (Example en, es, etc)
Returns The date value

Date

Result
HTML Code
<input type="text" name="date" data-type="date" lang="es" value="2015-12-01" />

Datetime

Result
HTML Code
<input type="text" name="datetime" data-type="datetime" lang="es" value="2015-12-01 00:00" />

Time

Library Name Jquery.timepicker
Library Version v1.8.8
Works on input
Required Attributes None
Returns The time value
Result
HTML Code
<input type="text" name="time" data-type="time" value="15:06"/>

Date 2nd style

Result
HTML Code
<input type="text" data-type="date2" lang="es" />

WYSIWYG

Library Name Froala Editor
Library Version v2.4.0
Works on textarea
Required Attributes None
Optional Attributes data-lang (Default en), data-upload-url
Returns The text in HTML Format
Result
HTML Code
<textarea data-type="wysiwyg"></textarea>

Autocomplete

Autocompletes a text field. It is necessary the name attribute. The PHP Code recieves $_GET['term'] with the searched word. The php url should accept $_GET Responses.

It generates automatically a new input with name+'_text' with the text value. If you want to remove it use data-text-input=false

Library Name Jquery UI
Library Version v1.12.1
Works on input
Required Attributes name
Optional Attributes data-selected-value, data-selected-text, data-reload, data-action
Returns The Key of the selected value

Empty Field

Result
HTML Code
<input data-type="autocomplete" name="aut" src="autocomplete.php" />
PHP Code
<?php $res = array(); // id is what is passed to the field $res[] = array("label"=>$_GET["term"], "id" => 99, "value" => $_GET["term"]); $res[] = array("label"=>"dos", "id" => 2, "value" => "dos"); $res[] = array("label"=>"tres", "id" => 3, "value" => "tres"); print json_encode($res); ?>

With selected data

Result
HTML Code
<input data-type="autocomplete" data-selected-text="Hola" data-selected-value="valor" name="aut20" src="autocomplete.php" />

With reload and with action

It will be send a $_POST['result'] variable with the selected data. First the action will be called and then it will be reloaded.

This option is used for saving the selected data and then reload the website, ideally for saving languages, timezones, etc.

Result
HTML Code
<input data-type="autocomplete" name="aut2" src="autocomplete.php" data-reload="true" data-action="sautocomplete.php" />
Example of $_POST["result"]
object(stdClass)#1 (3) { ["label"]=> string(3) "aaa" ["id"]=> int(99) ["value"]=> string(3) "aaa" }

Buttons

Library Name Jquery UI
Library Version v1.12.1
Works on input
Required Attributes None
Returns The selected value(s)

Checkbox

Result
HTML Code
<div data-type='button'> <input type="checkbox" name="checkbutton[]" value="l" id="check1"><label for="check1">Lunes</label> <input type="checkbox" name="checkbutton[]" value="m" id="check2"><label for="check2">Martes</label> <input type="checkbox" name="checkbutton[]" value="w" id="check3"><label for="check3">Miércoles</label> </div>

Radiobutton

Result
HTML Code
<div data-type='button'> <input type="radio" name="radiobutton" value="l" id="scheck1"><label for="scheck1">Lunes</label> <input type="radio" name="radiobutton" value="m" id="scheck2"><label for="scheck2">Martes</label> <input type="radio" name="radiobutton" value="w" id="scheck3"><label for="scheck3">Miércoles</label> </div>

Sliders

Library Name Jquery UI
Library Version v1.12.1
Works on input
Required Attributes data-max, data-min, data-slider
Optional Attributes data-step
Returns The value of the slider

Range

To show the values dynamictly you should call name+'min' or name+'max'. For example if the name of the input is example to show the minimum value selected you shoud add <span id="example-min"></span>

Result

$100 - $200

HTML Code
<p>$<span id="slider-min">100</span> - $<span id="slider-max">200</span></p> <input data-type="slider" data-slider="range" data-max="200" data-min="100" name="slider" />

Increments

To show the values dynamictly you should call name+'val'. For example if the name of the input is example to show the minimum value selected you shoud add <span id="example-val"></span>

Result

$0

HTML Code
<p>$<span id="slider2-val">100</span></p> <input data-type="slider" data-slider="increments" data-max="20" data-min="0.5" data-step="0.5" name="slider2" />

Code Editor

Se color can be selected between: black, white, gray and blue with data-color property

Library Name Ace
Library Version Unknown
Works on textarea
Required Attributes data-lang
Returns The code written
Result
HTML Code
<textarea data-type="codeeditor" data-lang="javascript" data-color="black" name="code"> function foo(items) { var x = "All this is syntax highlighted"; return x; } </textarea>

Imgur Uploader

Librery used for uploading images easily to Imgur. You will get the final url on the input.

Library Name Imgur JS Uploader
Library Version Newest (Using CDN)
Works on input
Required Attributes None
Returns The image url
Result
HTML Code
<input data-type='imgur' type="text" />

Conditional

Library Name Conditionize2.js
Library Version 2.0.1
Works on div
Required Attributes None
Result
Hooray!
Don't get cocky!

That's a shame. Will you change your mind?

Great!

Works with selects!

Works with text input
HTML Code
<label><input type="radio" name="example1" value="yes"><span></span> Yes</label> <label><input type="radio" name="example1" value="no"><span></span> No</label> <div data-type="conditional2" data-condition="example1=='yes'"> <label><input type="checkbox" name="example2" id="ex2"><span></span> Are you sure?</label> <label><input type="checkbox" name="example3"><span></span> Really super sure?</label> <div data-type="conditional2" data-condition="#ex2"> Hooray! </div> <div data-type="conditional2" data-condition="example3"> Don't get cocky! </div> </div> <div data-type="conditional2" data-condition="example1=='no'"> <p>That's a shame. Will you change your mind?</p> <label><input type="radio" name="example4" value="yes"><span></span> Yes</label> <label><input type="radio" name="example4" value="no"><span></span> No</label> <div data-type="conditional2" data-condition="example4=='yes'"> Great! </div> </div> <p> <label>or choose:</label> <select class="select" name="example5"> <option>Pick one!</option> <option value="yes">Yes!</option> <option value="no">No!</option> </select> </p> <div data-type="conditional2" data-condition="example5=='yes'"> Works with selects! </div> <p> <label>or type:</label> <input type="text" name="example6" placeholder="yay"> </p> <div data-type="conditional2" data-condition="example6=='yay'"> Works with text input </div>

Validation

This features add patterns automatically for validating the data.

Library Name Unknown
Library Version Unknown
Works on input
Required Attributes data-validation
Returns Unknown

Alpha Numeric

Result
HTML Code
<input type="text" data-validation="alphanumeric" />

Numeric

Result
HTML Code
<input type="text" data-validation="numeric" />

URL

Result
HTML Code
<input type="text" data-validation="url" />

Day

Result
HTML Code
<input type="text" data-validation="day" />

Year

Result
HTML Code
<input type="text" data-validation="year" />

Email

Result
HTML Code
<input type="text" data-validation="email" />

Two fields check

Result
HTML Code
<input type="text" data-validation="same" for="field-two" /> <input type="text" id="field-two" />

Slug Generator

Library Name Unknown
Library Version Unknown
Works on input
Required Attributes None
Returns The slug
Result




HTML Code
<input type="text" data-type=&<input type="text" id="copyHere" placeholder="Title" /> <input data-type="slug" for="copyHere" type="text" />

Color Picker

Library Name jqColorPicker
Library Version v1.0.4
Works on input
Required Attributes None
Returns The color in hexadecimal
Result
HTML Code
<input type="text" data-type="color" />

On off

Library Name Iphone Style Switchers
Library Version ??
Works on input
Required Attributes None
Optional Attributes data-on, data-off
Returns Buttons on off
Result
HTML Code
<input type="text" data-type="onoff" value="0" data-on="Activar" data-off="Desactivar" />

Image Cropper

This tool allows you to get the x and y coordiates from 2 points from an image

Library Name Jcrop
Library Version v2.0.4
Works on input
Required Attributes data-image
Optional Attributes data-width, data-height, data-ratio, data-handler

Normal Use

Result
HTML Code
<img src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" id="image-to-crop" /> <input type="text" data-type="cropper" data-image="image-to-crop" data-width="100%" />

With Default Values

Result
HTML Code
<img src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" id="image-to-crop" /> <input type="text" data-type="cropper" data-image="image-to-crop" data-width="500" data-ratio="1" value='{"x":314.88,"y":220.16,"x2":596.48,"y2":501.76,"w":281.6,"h":281.6}' />

With Min and Max sizes

Result
HTML Code
<img src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" id="image-to-crop-with-min-and-max" /> <input type="text" data-type="cropper" data-image="image-to-crop-with-min-and-max" data-width="500" data-min-sizes="80,80" data-max-sizes="300,300" />

Call handler

To execute a javascript function every time the cropper is moved

Result
HTML Code
<img src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" id="image-to-crop2" /> <input type="text" data-type="cropper" data-image="image-to-crop2" data-width="500" data-handler="functionName" /> <script type="text/javascript"> function functionName(c) { console.log('Entra'); } </script>

Image Coordinate

This tool allows you to get the x and y coordiates from 1 point from an image

Library Name Created from scratch
Library Version ??
Works on input
Required Attributes data-image

Normal Use

Result
HTML Code
<img src="https://atayahmet.github.io/jquery.easypin/img/avengers.jpg" id="image-to-get-coordinates" width="100%" /> <input type="text" data-type="image-coordinate" data-image="image-to-get-coordinates" />

With Default Value

Result
HTML Code
<img src="https://atayahmet.github.io/jquery.easypin/img/avengers.jpg" id="image-to-get-coordinates" width="100%" /> <input type="text" data-type="image-coordinate" data-image="image-to-get-coordinates" value="1080,429" />

Messages

Examples of code used for messages.

Confirm

data-action will tell you what to load (in ajax and in post) after someone click yes, then it will reload.

You can use data-redirection to put a redirection url, and data-variables to put the variables to send via ajax. The data is sent via post.

Library Name Lobibox
Library Version v1.0.0
Works on a, button, etc
Required Attributes data-action, data-info, title
Optional Attributes data-button-yes, data-button-no (By default on English)
Actions Make a post request to the file added on data-action
Result
HTML Code
<button data-type="confirm" title="Are you sure?" data-info="This will delete all the data" data-button-yes="Yep" data-button-no="Noup" data-action="README.md"> Delete </button>

Prompt

Ask for data easily.

data-action will tell you what to load (in ajax and in post will send a variable called "value") after someone click Ok, then it will reload.

Library Name Lobibox
Library Version v1.0.0
Works on a, button, etc
Required Attributes data-action, title
Optional Attributes data-button-ok, data-button-cancel (By default on English)
Actions Make a post request to the file added on data-action
Result
HTML Code
<button data-type="prompt" title="Whats your name" data-button-ok="Chido one" data-button-cancel="Nopi" data-action="README.md"> Add a name </button>

Complements

Examples of code used for complements.

Sortable

This tool allows you to add a drag and drop actions in your website

Library Name Jquery UI
Library Version v1.12.1
Works on ul
Optional Attributes data-connect

One sortable

Result
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
HTML Code
<ul data-type="sort"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul>

Multiple sortable

This will allow you to move between lists. When adding data-connect it will connect to every sortable element with the class of the data-connect value

Result
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 1
  • Item 2
HTML Code
<ul class="connection" data-type="sort" data-connect="connection"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> <ul class="connection" data-type="sort" data-connect="connection"> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul> <ul class="connection" data-type="sort" data-connect="connection"> <li>Item 1</li> <li>Item 2</li> </ul>

Popups

Automatic popups easily

Library Name Magnific Popup
Library Version v1.0.0
Works on a, div
Required Attributes data-popup-type
Optional Attributes data-popup-link-class

Ajax

Load a website in a popup

If you want to load a popup inside the ajax content just add the class .js-link to the links.

Result
Click here
HTML Code
<a href="popupexample.html" data-type="popup" data-popup-type="ajax">Click here</a>

Image

Load an image in a popup

Result
Click here
HTML Code
<a href="logo.png" data-type="popup" data-popup-type="image" title="Mi Logo">Click here</a>

Image Group

Load a lot of images at the same time in a popup. Will add the popup to all links on the div.

Result
HTML Code
<div data-type="popup" data-popup-type="image"> <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="Example">Click here</a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Example2">Click here</a> </div>

If you want to select which classes to use

Result
HTML Code
<div data-type="popup" data-popup-type="image" data-popup-link-class="link"> <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="Example" class="link">Click here</a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Example2" class="link">Click here</a> <a href="http://google.com">This is a normal link</a> </div>

Image Gallery

Load a lot of images at the same time but with option to change between results. You can use data-popup-link-class attribute also

Result
HTML Code
<div data-type="popup-gallery" data-popup-type="image"> <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="Example">Click here</a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Example2">Click here</a> </div>

Iframe

Works with Vimeo, Youtube and Google Maps

Result
Click here
HTML Code
<a href="https://www.youtube.com/watch?v=MVvIlcXudK8" data-type="popup" data-popup-type="iframe">Click here</a>

Inline

To load the info on html inside the code

Result

Hola Mundo

This is a inline popup!

Click here
HTML Code
<div id="popup1" style="background:#fff; width:300px; margin: 0 auto;position:relative;padding:20px;"> <h1>Hola Mundo</h1> <p>This is a inline popup!</p> </div> <a href="#popup1" data-type="popup" data-popup-type="inline">Click here</a

Inline Automatic Every x days

To execute a popup automatically And wait to show again

If you want to execute automatically without waiting just dont put the data-days attribute.

Result

Hola Mundo automatico

This is a inline popup automatic!!

HTML Code
<div id="popup2" style="background:#fff; width:300px; margin: 0 auto;position:relative;padding:20px;"> <h1>Hola Mundo automatico</h1> <p>This is a inline popup automatic!!</p> </div> <a data-type="popup" data-popup-type="inline" data-automatic="true" data-days="15" href="#popup2">Click</a>

Fitty

Automatic fits a text to the container

Library Name Fitty
Library Version v2.3.3

Normal use

Result

Fit this

HTML Code
<h1 data-type="fitty">Fit this</h1>

Show code

Show code in a code tag

Library Name Ace
Library Version Unknown
Works on code
Required Attributes data-lang

Normal use

Result
function ejemplo() { console.log("Este es un ejemplo de un codigo javascript"); }
HTML Code
<code data-type="codeeditor" data-lang="javascript">function ejemplo() { console.log("Este es un ejemplo de un codigo javascript"); }</code>

Change on Click

Change the view of a div when we make a click

Works on div

Normal use

Result
México
HTML Code
<div id="country" data-type="changeOnClick"> <img src="http://www.ssn.unam.mx/imagenes/bandera-mexico.png" />México </div> <div for="country"> <input data-type="autocomplete" name="aut2" src="autocomplete.php" /> </div>

Click On Change

Automatically make a click on something once an input changes

Works on input

Normal use

Result
HTML Code
<form action="envia.php"> <input data-type="clickOnChange" type="file" id="coc" name="archivos[]" multiple="true"/> <input type="submit" for="coc" style="display:none;" /> </form>

Zoom Viewer

Automatically make a click on something once an input changes

Library Name Zoom
Library Version 1.7.14
Works on div

Normal use

Result
HTML Code
<div data-type="zoom" style="width: 500px;"> <img src="http://www.jacklmoore.com/img/daisy.jpg" style="width:100%" /> </div>

Tooltip

Add a tooltip to any element

Library Name Jquery UI
Library Version 1.12.1
Works on div, input, form

Normal use

Result
HTML Code
<input title="Selecciona una fecha" name="tooltip" data-type="tooltip" />

Image Tile Viewer

Display large images with Deep Zoom technology.

Library Name OpenSeadragon
Library Version 3.0.0
Works on div
Required Attributes data-dzi: The url of the DZI file
Optional Attributes data-markers: JSON data for the markers.
data-prefix: Prefix URL to prepend on the navigation images
data-icon: url of custom marker icon image
data-icon-size: size of the marker icon image
data-icon-offset: offset size % of the marker from its coordinates
data-disable-zoom: set true to disable zooming
data-disable-pan: set true to disable panning
data-disable-controls: set true to disable controls
data-zoom-default: default zoom level of the viewer
data-zoom-min: minimum zoom level of the viewer
data-zoom-max: maximum zoom level of the viewer
data-custom-controls: set true to show custom made controls

Normal Use

Feed to data-markers a JSON array with an object for each marker. The object needs to have X and Y pixel-based coordinates. Example: "x": "1000","y": "1000" will put the marker one thousand pixels from the left and from the top.

If you want to show a note when clicking the marker you can add a "note": "My message" property to the object with the content you want to show (supports HTML). If you want to go to a site instead you can add an "url": "https://weblabor.mx" property with the destination, this will override the "note": property if there's any.

To add more flavor to your markers you can add a tooltip with "tooltip": "My tooltip!", this will override the default tooltip from the markers with "url":.

Finally, you can replace individual markers icon using "icon": "https://mywebsite.com/myicon.jpg".

Result
HTML Code
<div data-type="image-tile-viewer" data-dzi="https://openseadragon.github.io/example-images/duomo/duomo.dzi" data-icon-size="[250,410]" data-markers='[{"x": "1000","y": "1000","url": "https://weblabor.mx", "tooltip": "URL with tooltip →"},{"x": "2000","y": "2000","note": "Easy JS is a cool library!"},{"x": "2000","y": "3000","note": "Check our repository on <a href=\"https://github.com/weblabormx/Easy-JS-Library\">Github</a>!", "tooltip": "Note with tooltip"}]' style="height: 500px;"></div>

Customizing

Using data-icon="https://yoururl.com/icon.jpg" will allow you to customize the icon. And with data-custom-controls="true" you can choose to use a different type of controls.

To change the size of the markers use data-icon-size passing the width and height as a tuple. Example: [1000,1640].

Result
HTML Code
<div data-type="image-tile-viewer" data-dzi="https://openseadragon.github.io/example-images/duomo/duomo.dzi" data-icon-size="[1000,1640]" data-custom-controls="true" data-icon="https://tiuswebs.s3-us-west-1.amazonaws.com/30/multimedia/V3UkyvIdH.png" data-markers='[{"x": "4000","y": "5000","note": "I am big!"}]' style="height: 500px;"></div>

Removing drag

You can choose to remove the dragging of the image with data-disable-pan="true", try moving the image around.

Result
HTML Code
<div data-type="image-tile-viewer" data-dzi="https://openseadragon.github.io/example-images/duomo/duomo.dzi" data-icon-size="[250,410]" data-disable-pan="true" style="height: 500px;"></div>

Removing zoom

You can remove the zoom ability with data-disable-zoom="true", and use data-disable-controls="true" to hide the controls.

Result
HTML Code
<div data-type="image-tile-viewer" data-dzi="https://openseadragon.github.io/example-images/duomo/duomo.dzi" data-icon-size="[250,410]" data-disable-zoom="true" data-disable-controls="true" data-markers='[{"x": 5000","y": "2000","note": "Enjoy the component!"}]' style="height: 500px;"></div>