Efecto de zoom de desplazamiento de imagen suave con JavaScript puro-Drift

Vista prévia

Descripción

Drift es una biblioteca JavaScript independiente y altamente configurable que proporciona un efecto de zoom dinámico (o táctil) con capacidad de respuesta y fluidez en las imágenes.

Características

• Muestra la imagen grande al lado de la original.
• Muestra un efecto de lupa en la imagen en una pantalla pequeña.

¿Cómo funciona?

Incluya tanto Drift-Basic. CSS como Drift. js en su página web.

<link rel="stylesheet" href="dist/drift-basic.css">
<script src="dist/Drift.js"></script>

Inserte una imagen en miniatura en su página web y use el atributo Data-zoom para especificar la ruta de la versión grande de esta imagen.

<img class="drift-demo-trigger"



data-zoom="large.jpg"



src="thumb.jpg"
>

Cree un elemento DOM para anexar el ZoomPane no alineado a.

<div class="detail">
</div>

Activa el efecto de zoom de imagen flotante.

new Drift(document.querySelector('.demo'), {


paneContainer: document.querySelector('.detail'),


inlinePane: 900,


inlineOffsetY: -85,


containInline: true
});

Todas las opciones de configuración.

new Drift(document.querySelector('.demo'), {



// Prefix for generated element class names (e.g. `my-ns` will


// result in classes such as `my-ns-pane`. Default `drift-`


// prefixed classes will always be added as well.


namespace: null,



// Whether the ZoomPane should show whitespace when near the edges.


showWhitespaceAtEdges: false,



// Whether the inline ZoomPane should stay inside


// the bounds of its image.


containInline: false,



// How much to offset the ZoomPane from the


// interaction point when inline.


inlineOffsetX: 0,


inlineOffsetY: 0,



// A DOM element to append the inline ZoomPane to.


inlineContainer: document.body,



// Which trigger attribute to pull the ZoomPane image source from.


sourceAttribute: 'data-zoom',



// How much to magnify the trigger by in the ZoomPane.


// (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane image


// if the trigger is displayed at 300 px wide)


zoomFactor: 3,



// A DOM element to append the non-inline ZoomPane to.


// Required if `inlinePane !== true`.


paneContainer: document.body,



// When to switch to an inline ZoomPane. This can be a boolean or


// an integer. If `true`, the ZoomPane will always be inline,


// if `false`, it will switch to inline when `windowWidth <= inlinePane`


inlinePane: 375,



// If `true`, touch events will trigger the zoom, like mouse events.


handleTouch: true,



// If present (and a function), this will be called


// whenever the ZoomPane is shown.


onShow: null,



// If present (and a function), this will be called


// whenever the ZoomPane is hidden.


onHide: null,



// Add base styles to the page. See the "Theming"


// section of README.md for more information.


injectBaseStyles: true,



// An optional number that determines how long to wait before


// showing the ZoomPane because of a `mouseenter` event.


hoverDelay: 0,



// An optional number that determines how long to wait before


// showing the ZoomPane because of a `touchstart` event.


// It's unlikely that you would want to use this option, since


// "tap and hold" is much more intentional than a hover event.


touchDelay: 0,



// If true, a bounding box will show the area currently being previewed


// during mouse hover


hoverBoundingBox: false,



// If true, a bounding box will show the area currently being previewed


// during touch events


touchBoundingBox: false,



// A DOM element to append the bounding box to.


boundingBoxContainer = document.body

});

Registro de cambios

v1.3.0 (08/07/2018)

• Correcciones de errores: zoom-panel: establecer los valores min y Max correctamente cuando la imagen es más pequeña que el contenedor