juxtapose
1.0.9
[YuxtaposeJS] [https://juxtapone.knightlab.com] es una herramienta de código abierto simple para crear deslizadores de imágenes antes/después. Simplemente proporcione dos URL de imagen y yuxtapone hará el resto del trabajo por usted. A continuación se presentan instrucciones para implementar yuxtaponer con HTML y JavaScript, pero también tenemos una herramienta que le permite hacer un control deslizante sin necesidad de conocer ningún código.
Si desea contribuir a yuxtaponer, consulte el archivo DEVELOPERS.md para las instrucciones de instalación. Bifurca el proyecto, cree una nueva rama con sus características y envíe una solicitud de extracción. ¡Gracias por tu ayuda!
La forma más fácil de crear un control deslizante de yuxtapone es ir a [https://juxtapone.knightlab.com] [1] y usar la herramienta para generar un fragmento de código integrable que puede usar en cualquier sitio web. Hay varias otras formas de instalar yuxtaponer en su sitio web.
CDN - yuxtapone está disponible en el Knight Lab CDN. Simplemente agregue este código a la <head> de su página HTML:
< script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " >Gerentes de paquetes : yuxtapone está disponible en los registros de paquetes NPM y Bower. Los siguientes comandos, respectivamente, guardarán yuxtaponer en sus archivos de requisitos de paquete.json y bower.json.
npm install --save juxtaposejs
bower install --save juxtaposeTambién hay un paquete de meteoritos disponible.
La forma más fácil de crear un control deslizante de yuxtapone es ir a [https://juxtapone.knightlab.com] [1] y usar la herramienta para generar un fragmento de código integrable que puede usar en cualquier sitio web. La herramienta es fácil de usar y no requiere conocimientos de codificación en absoluto. Si desea usar yuxtaposejs sin usar el generador de incrustaciones, siga leyendo para aprender sobre diferentes métodos de implementación.
La forma más fácil de implementar el control deslizante de imágenes es agregar este código a su marcado:
< div class =" juxtapose " >
< img src =" https://example.com/firstimage.jpg " />
< img src =" https://example.com/secondimage.jpg " />
</ div >
< script src =" https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css " > Cada img también puede tomar atributos adicionales como así:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Si cada imagen tiene un atributo data-label definido, el control deslizante mostrará una etiqueta en cada imagen. Si cada imagen tiene un atributo data-credit definido, el control deslizante mostrará un crédito para cada imagen.
El Slider Wrapper también puede tomar algunos atributos adicionales para especificar algunas opciones:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > Especificar una posición inicial con data-startingposition le permite centrar la atención de los usuarios por parte de la imagen donde el cambio es más notable. Para alternar la visibilidad de las etiquetas y los créditos, respectivamente, establezca data-showlabels y data-showcredits en falso. Y para deshabilitar la animación, establezca data-animate en falso.
Si está utilizando yuxtaponer en una solución de iframe receptiva existente como Pym.js y no quiere usar la solución de iframe de yuxtapeed (pero fallida), puede establecer data-makeresponsive en falso.
La clase JXSlider toma tres argumentos. Primero, es la cadena del ID del elemento que desea convertir en un control deslizante. El segundo es una matriz de dos objetos. Cada objeto debe tener src definido y opcionalmente puede definir una label y un credit . El tercer argumento le permite establecer opciones adicionales para el control deslizante de imágenes.
< div id = "foo" > < / div >
< script >
slider = new juxtapose . JXSlider ( '#foo' ,
[
{
src : 'https://example.com/firstimage.jpg' ,
label : '2009' ,
credit : 'Image Credit'
} ,
{
src : 'https://example.com/secondimage.jpg' ,
label : '2014' ,
credit : "Image Credit"
}
] ,
{
animate : true ,
showLabels : true ,
showCredits : true ,
startingPosition : "50%" ,
makeResponsive : true
} ) ;
< / script >Puede personalizar cómo se ve yuxtaposejs al modificar su CSS. Para obtener instrucciones, haga clic aquí.
La clase JXSLider contiene algunos métodos que puede usar para modificar sus controles deslizantes.
Si instanció sus controles deslizantes con el método HTML pero aún desea acceder a uno de sus controles deslizantes mediante programación, yuxtaposejs crea una matriz de los JXSLiders en su página a las que puede acceder con juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; El porcentaje indica dónde desea configurar el mango en relación con el lado izquierdo del control deslizante. Si establece Animate en true , el identificador se animará a la nueva ubicación; Si Animate se establece en false , el mango no lo hará.
Como parte de la presentación de una instancia de yuxtapone, esta biblioteca representa un "crédito" como HTML. Yuxtapone pasa esta cadena directamente desde el atributo data-credit , o desde la propiedad credit del objeto de configuración para cualquiera de las imágenes.
En el sentido más estricto, esto expone una vulnerabilidad de XSS; Sin embargo, creemos que para que los yuxtaposejs existan como una herramienta en un kit de herramientas, es responsable y óptimo dejar cualquier HTML desinfectante como responsabilidad de los integradores, que pueden tener sus propias ideas sobre lo que es apropiado. Por lo tanto, tome nota: si proporciona un servicio que ayuda a las personas a crear instancias de yuxtaponer, debe asumir la responsabilidad adecuada para prevenir la inyección de código malicioso.
