juxtapose
1.0.9
[Juxtaposejs] [https://juxtapose.knightlab.com] est un outil simple et open source pour créer des curseurs avant / après l'image. Fournissez simplement deux URL d'image et Juxtapose fera le reste du travail pour vous. Vous trouverez ci-dessous des instructions pour implémenter Juxtapose avec HTML et JavaScript, mais nous avons également un outil qui vous permet de créer un curseur sans avoir besoin de connaître aucun code.
Si vous souhaitez contribuer à Juxtapose, consultez le fichier DEVELOPERS.md pour les instructions d'installation. Fourk le projet, créez une nouvelle branche avec vos fonctionnalités et soumettez une demande de traction. Merci pour votre aide!
La façon la plus simple de créer un curseur juxtaposé est d'aller à [https://juxtapose.knightlab.com] [1] et d'utiliser l'outil pour générer un extrait de code embérable que vous pouvez utiliser sur n'importe quel site Web. Il existe un certain nombre d'autres façons d'installer Juxtapose sur votre site Web.
CDN - Juxtapose est disponible sur le Knight Lab CDN. Ajoutez simplement ce code au <head> de votre page 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 " >Gestionnaires de packages - Juxtapose est disponible dans les registres NPM et Bower Package. Les commandes suivantes enregistreront respectivement Juxtaposez à votre package.json et bower.json requise les fichiers.
npm install --save juxtaposejs
bower install --save juxtaposeIl existe également un package de météores disponible.
La façon la plus simple de créer un curseur juxtaposé est d'aller à [https://juxtapose.knightlab.com] [1] et d'utiliser l'outil pour générer un extrait de code embérable que vous pouvez utiliser sur n'importe quel site Web. L'outil est facile à utiliser et ne nécessite aucune connaissance de codage. Si vous souhaitez utiliser JuxtaposeJS sans utiliser le générateur d'intégration, continuez à lire pour en savoir plus sur les différentes méthodes d'implémentation.
La façon la plus simple d'implémenter le curseur d'image est d'ajouter ce code à votre balisage:
< 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 " > Chaque img peut également prendre des attributs supplémentaires comme tel:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Si chaque image a un attribut data-label défini, le curseur affichera une étiquette sur chaque image. Si chaque image a un attribut data-credit défini, le curseur affichera un crédit pour chaque image.
Le wrapper de curseur peut également prendre des attributs supplémentaires pour spécifier quelques options:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > La spécification d'une position de départ avec data-startingposition vous permet de concentrer l'attention des utilisateurs sur la partie de l'image où le changement est le plus visible. Pour basculer la visibilité des étiquettes et des crédits respectivement, définissez False data-showlabels et data-showcredits . Et pour désactiver l'animation, définissez data-animate sur false.
Si vous utilisez Juxtapose dans une solution IFRAME réactive existante comme Pym.js et que vous ne souhaitez pas utiliser la solution IFRAME RESACIER intégrée de Juxtapose (mais si l'opinion), vous pouvez définir data-makeresponsive .
La classe JXSlider prend trois arguments. Tout d'abord, la chaîne de l'ID de l'élément que vous souhaitez transformer en curseur. Le deuxième est un tableau de deux objets. Chaque objet doit avoir src défini et peut éventuellement définir une label et un credit . Le troisième argument vous permet de définir des options supplémentaires pour le curseur d'image.
< 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 >Vous pouvez personnaliser l'apparence de JuxtaposeJS en modifiant son CSS. Pour les instructions, cliquez ici.
La classe JXSLider contient quelques méthodes que vous pouvez utiliser pour modifier vos curseurs.
Si vous avez instancié vos curseurs avec la méthode HTML mais que vous souhaitez toujours accéder à l'un de vos curseurs par programme, JuxtaposeJS crée un tableau des Jxsliders sur votre page à laquelle vous pouvez accéder avec juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; Le pourcentage indique où vous souhaitez régler la poignée par rapport au côté gauche du curseur. Si vous définissez Animate sur true , la poignée animera le nouvel emplacement; Si Animate est défini sur false , la poignée ne le fera pas.
Dans le cadre du rendu d'une instance juxtaposée, cette bibliothèque rend un "crédit" en tant que HTML. Juxtapose transmet cette chaîne directement à partir de l'attribut data-credit , ou à partir de la propriété credit de l'objet de configuration pour l'une des images.
Dans le sens le plus strict, cela expose une vulnérabilité XSS; Cependant, nous pensons que pour que les juxtaposisejs existent en tant qu'outil dans une boîte à outils, il est à la fois responsable et optimal de quitter toute désinfection HTML en tant que responsabilité des intégrateurs, qui peuvent avoir leurs propres idées sur ce qui est approprié. Par conséquent, prenez note: si vous fournissez un service qui aide les gens à créer des instances juxtaposées, vous devez assumer la responsabilité appropriée pour prévenir l'injection de code malveillant.
