Complements

Load on hover

Mostrar

<div style="width:200px;background:#ccc;height:200px;" data-type="loadOnHover" id="square"> <p for="square">Mostrar</p> </div>

Progress Bar

Demo can be seen in this form, while loading a progress bar appears. It needs to be added in the body.

<body data-type="progressbar"> // All the content goes here </body>

Fake click

Click in some place and automatically clicks in something else. Ideally to put a fake button for a select file input for example.

<button data-type="fakeButton" id="mifake">Agregar foto de perfil</button> <input for="mifake" type="file" id="file" name="archivos[]" multiple="true" required style="display:none"/>

Ajax loader

Load Load Image Load Image with zoom

<span data-type="ajaxload" src="README.md" for="carga">Load</span> <span data-type="ajaxload" src="http://i.imgur.com/VJ7Fj3z.png" for="carga">Load Image</span> <span data-type="ajaxload" src="http://i.imgur.com/VJ7Fj3z.png" data-zoom="true" for="carga">Load Image with zoom</span> <br /><br /> <div id="carga" style="display:block; width:500px; height:300px; padding:20px; border:1px solid #000;"></div>

Mobile Menu

Toggle menu <a data-type="mobmenu" for="menuizq" data-submenu-pos="left" href="#sidr">Toggle menu</a> <div id="menuizq"> <!-- Your content --> <ul> <li><a href="#">List 1</a></li> <li class="active"><a href="#">List 2</a></li> <li><a href="#">List 3</a></li> </ul> </div>

360 Viewer

ID is needed

<div data-type="viewer-360" data-title="Ejemplo" src="https://i.imgur.com/YV7SYrO.jpg" id="tresientossesenta"></div>