Visor de imágenes accesible para dispositivos móviles-SmartPhoto

Vista prévia

Descripción

SmartPhoto es una biblioteca independiente de JavaScript para crear un visor de imágenes accesible, adaptable y amigable para dispositivos móviles donde los usuarios pueden ver todas las imágenes en una ventana emergente modal de fácil navegación.

More features：

• Admite gestos táctiles.
• Admite imágenes individuales y/o agrupadas.
• Admite interacciones de teclado.
• Leyendas de imagen personalizadas.

Install the SmartPhoto:

# Yarn
yarn add smartphoto

# NPM
$ npm install smartphoto

Funcionamiento

Enlace a los archivos JavaScript y CSS de SmartPhoto.

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

Añada un grupo de imágenes a la página web utilizando las siguientes etiquetas y atributos HTML:

• IMG: ruta a la imagen pequeña
• a: ruta a la imagen grande
• Data-Caption: Caption de imagen
• Data-ID: Image ID
• Data-Group: se utiliza para agrupar las imágenes

<a href="large-1.jpg" class="js-smartPhoto" data-caption="Caption 1" data-id="id-1">

<img src="small-1.jpg" data-group="group">
</a>
<a href="large-2.jpg" class="js-smartPhoto" data-caption="Caption 2" data-id="id-2">

<img src="small-2.jpg" data-group="group">
</a>
<a href="large-3.jpg" class="js-smartPhoto" data-caption="Caption 3" data-id="id-3">

<img src="small-3.jpg" data-group="group">
</a>

Habilite el visor de imágenes con las opciones predeterminadas.

window.addEventListener('load',function(){

new smartPhoto(".js-smartPhoto");
});

Todas las opciones de configuración predeterminadas.

window.addEventListener('load',function(){

new smartPhoto(".js-smartPhoto",{



classNames: {




smartPhoto: 'smartphoto',




smartPhotoClose: 'smartphoto-close',




smartPhotoBody: 'smartphoto-body',




smartPhotoInner: 'smartphoto-inner',




smartPhotoContent: 'smartphoto-content',




smartPhotoImg: 'smartphoto-img',




smartPhotoImgOnMove: 'smartphoto-img-onmove',




smartPhotoImgElasticMove: 'smartphoto-img-elasticmove',




smartPhotoImgWrap: 'smartphoto-img-wrap',




smartPhotoArrows: 'smartphoto-arrows',




smartPhotoNav: 'smartphoto-nav',




smartPhotoArrowRight: 'smartphoto-arrow-right',




smartPhotoArrowLeft: 'smartphoto-arrow-left',




smartPhotoImgLeft: 'smartphoto-img-left',




smartPhotoImgRight: 'smartphoto-img-right',




smartPhotoList: 'smartphoto-list',




smartPhotoListOnMove: 'smartphoto-list-onmove',




smartPhotoHeader: 'smartphoto-header',




smartPhotoCount: 'smartphoto-count',




smartPhotoCaption: 'smartphoto-caption',




smartPhotoDismiss: 'smartphoto-dismiss',




smartPhotoLoader: 'smartphoto-loader',




smartPhotoLoaderWrap: 'smartphoto-loader-wrap',




smartPhotoImgClone: 'smartphoto-img-clone'



},



arrows: true,



nav: true,



animationSpeed: 300,



swipeOffset: 100,



maxWidth: 940,



headerHeight: 60,



footerHeight: 60,



forceInterval: 10,



registance: 0.5,



resizeStyle: 'fill',



verticalGravity: false,



useOrientationApi: true

});
});

Registro de cambios

v1.3.4 (09/26/2018)

• corregir advertencias en ningún entorno https