Touch-Enabled cualquier contenido Lightbox en Vanilla JavaScript-Tobi

Vista prévia

Descripción

Tobi es un plugin de lightbox JavaScript fácil de usar que soporta cualquier tipo de contenido: imágenes, iframes, vídeos, elementos HTML, etc.

Ligero, accesible y apto para dispositivos móviles. También se puede utilizar como un lightbox galería donde los usuarios son capaces de cambiar entre el contenido de lightbox con arrastrar, eventos táctiles o teclas de flecha.

Funcionamiento

Inserte el JavaScript y la hoja de estilo de Tobi en el documento.

<link href="css/tobi.min.css" rel="stylesheet">
<script src="js/tobi.min.js"></script>

Agregue la clase ' lightbox ' para desencadenar elementos como estos:

<a href="1.jpg" class="lightbox">

Image Lightbox
</a>

<a href="https://www.wikipedia.org/" data-type="iframe" class="lightbox">

Iframe Lightbox
</a>

<a href="#" data-type="html" data-target="#el" class="lightbox">

HTML Content Lightbox
</a>

<div id="el">

Lightbox content here
</div>

Inicialice el complemento de Tobi y listo.

var tobi = new Tobi();

Formatos de imagen soportados: PNG, JPG, TIFF, TIF, GIF, BMP, WebP, SVG, ICO. Puede Agregar un nuevo tipo para admitir algo nuevo.

image: {

checkSupport: function (element) {


return (element.href.match(/\.(png|jpg|tiff|tif|gif|bmp|webp|svg|ico)$/) != null)

},

...
}

Available configuration options with default values.

var tobi = new Tobi({



// default selector


selector: '.lightbox',



// shows captions


captions: true,


captionsSelector: 'img',


captionAttribute: 'alt',



// shows navigation


nav: 'auto',


navText: ['<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg>'],



// shows close icon


close: true,


closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>',



// shows counter


counter: true,



// keyboard interactions


keyboard: true,



// shows zoom icon


zoom: true,


zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>',



// click outside to close


docClose: true,



// swipe up to close


swipeClose: true,



// hides scrollbar when activated


scroll: false,



// is draggable?


draggable: true,



// Touch and mouse dragging threshold in pixels


threshold: 20



});

API methods.

// open the second element
tobi.open(1);

// goto next
tobi.next();

// back to previous
tobi.prev()

// close
tobi.close()

Agregue nuevos elementos a la galería.

var newItem = document.querySelector('.new-image')
tobi.add(newItem)

Registro de cambios

12/02/2018

• ' video ' eliminado de los elementos ignorados mientras arrastra/desliza

09/24/2018

• Mejora