Biblioteca de JavaScript para la experiencia de zoom inteligente-zoom de imagen

Vista prévia

Descripción

Image zoom es una biblioteca de JavaScript pura que proporciona una experiencia de zoom inteligente en sus imágenes Web. Inspirado en < a href = "https://medium.design/image-zoom-on-medium-24d146fc0c20 #. mg7o6lxv9" target = "_ blank" rel = "noopener" > zoom de imagen .

Características

• Haga clic para acercar
• Descartar zoom de imagen en el desplazamiento y/o haga clic en

Funcionamiento

Descargue el archivo zip, descomprímalo e incluya los siguientes archivos en la Página Web.

<link rel="stylesheet" href="src/image-zoom.css">
<script src="src/image-zoom.js"></script>

Inicializar la biblioteca en todas las imágenes encontradas en el documento.

<img src="img/horizontal.jpg" class="zoomExample" />

new Zooming().listen('img');

Habilite una miniatura para abrir una imagen más grande.

<img src="thumbnail.jpg" data-original="img.jpg">
<!-- OR -->
<a href="img.jpg">

<img src="thumbnail.jpg">
</a>

Especifique la altura/anchura de la imagen.

<img



src="img.jpg"


 data-zooming-width="1920"



data-zooming-height="1080"
 />

Todas las configuraciones predeterminadas para personalizar la biblioteca de zoom de imagen.

new Zooming({


/**


 * To be able to grab and drag the image for extra zoom-in.


 * @type {boolean}


 */


enableGrab: true,



/**


 * Preload zoomable images.


 * @type {boolean}


 */


preloadImage: false,



/**


 * Close the zoomed image when browser window is resized.


 * @type {boolean}


 */


closeOnWindowResize: true,



/**


 * Transition duration in seconds.


 * @type {number}


 */


transitionDuration: 0.4,



/**


 * Transition timing function.


 * @type {string}


 */


transitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',



/**


 * Overlay background color.


 * @type {string}


 */


bgColor: 'rgb(255, 255, 255)',



/**


 * Overlay background opacity.


 * @type {number}


 */


bgOpacity: 1,



/**


 * The base scale factor for zooming. By default scale to fit the window.


 * @type {number}


 */


scaleBase: 1.0,



/**


 * The additional scale factor when grabbing the image.


 * @type {number}


 */


scaleExtra: 0.5,



/**


 * How much scrolling it takes before closing out.


 * @type {number}


 */


scrollThreshold: 40,



/**


 * The z-index that the overlay will be added with.


 * @type {number}


 */


zIndex: 998,



/**


 * Scale (zoom in) to given width and height. Ignore scaleBase if set.


 * Alternatively, provide a percentage value relative to the original image size.


 * @type {Object|String}


 * @example


 * customSize: { width: 800, height: 400 }


 * customSize: 100%


 */


customSize: null,
})

Funciones de devolución de llamada disponibles.

new Zooming({


/**


 * A callback function that will be called when a target is opened and


 * transition has ended. It will get the target element as the argument.


 * @type {Function}


 */


onOpen: noop,



/**


 * Same as above, except fired when closed.


 * @type {Function}


 */


onClose: noop,



/**


 * Same as above, except fired when grabbed.


 * @type {Function}


 */


onGrab: noop,



/**


 * Same as above, except fired when moved.


 * @type {Function}


 */


onMove: noop,



/**


 * Same as above, except fired when released.


 * @type {Function}


 */


onRelease: noop,



/**


 * A callback function that will be called before open.


 * @type {Function}


 */


onBeforeOpen: noop,



/**


 * A callback function that will be called before close.


 * @type {Function}


 */


onBeforeClose: noop,



/**


 * A callback function that will be called before grab.


 * @type {Function}


 */


onBeforeGrab: noop,



/**


 * A callback function that will be called before release.


 * @type {Function}


 */


onBeforeRelease: noop,



/**


 * A callback function that will be called when the hi-res image is loading.


 * @type {Function}


 */


onImageLoading: noop,



/**


 * A callback function that will be called when the hi-res image is loaded.


 * @type {Function}


 */


onImageLoaded: noop
})

API methods.

// apply options
instance.config({

// options here
});

// opens an image
instance.open(imgID, function onOpen(target) {

// do something
});

// grabs the element
instance.grab(x, y, scaleExtra, function onGrab(target) {

// do something
});

// moves the elemnt
instance.move(x, y, scaleExtra, function onMove(target) {

// do something
});

// releases the element
instance.release(function onRlease(target) {

// do something
});

// closes the elemnt
instance.close(function onClose(target) {

// do something
});

Registro de cambios

v2.1.0 (09/14/2018)

• Ya no escuche imágenes con Data-Action = "zoom" en la inicialización
• Quite la opción defaultZoomable