juxtapose
1.0.9
[JUXTAPOSEJS] [https://juxtapose.knightlab.com] é uma ferramenta de código aberto simples para criar os controles deslizantes antes/depois da imagem. Basta fornecer dois URLs de imagem e justapostos fará o restante do trabalho para você. Abaixo estão as instruções para implementar a justapa com HTML e JavaScript, mas também temos uma ferramenta que permite fazer um controle deslizante sem precisar conhecer nenhum código.
Se você deseja contribuir para a justaposição, consulte o arquivo DEVELOPERS.md para obter instruções de instalação. Fork o projeto, crie uma nova filial com seus recursos e envie uma solicitação de tração. Obrigado pela ajuda!
A maneira mais fácil de criar um controle deslizante de justapa é ir para [https://juxtapose.knightlab.com] [1] e usar a ferramenta para gerar um snippet de código incorporável que você pode usar em qualquer site. Existem várias outras maneiras de instalar a justapensa no seu site.
CDN - JUXTAPOSE está disponível no Knight Lab CDN. Basta adicionar este código ao <head> da sua 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 pacotes - A JUXTAPOSE está disponível nos registros de pacotes NPM e Bower. Os seguintes comandos salvarão, respectivamente, os arquivos de requisitos do seu package.json e bower.json.
npm install --save juxtaposejs
bower install --save juxtaposeHá também um pacote de meteoros disponível.
A maneira mais fácil de criar um controle deslizante de justapa é ir para [https://juxtapose.knightlab.com] [1] e usar a ferramenta para gerar um snippet de código incorporável que você pode usar em qualquer site. A ferramenta é fácil de usar e não requer conhecimento de codificação. Se você deseja usar o JUXTAPOSEJS sem usar o gerador incorporado, continue lendo para aprender sobre diferentes métodos de implementação.
A maneira mais fácil de implementar o controle deslizante de imagem é adicionar este código à sua marcação:
< 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 também pode levar atributos adicionais como assim:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Se cada imagem tiver um atributo data-label definida, o controle deslizante exibirá uma etiqueta em cada imagem. Se cada imagem tiver um atributo data-credit definido, o controle deslizante exibirá um crédito para cada imagem.
O invólucro deslizante também pode levar alguns atributos adicionais para especificar algumas opções:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > A especificação de uma posição inicial com data-startingposition permite que você concentre a atenção dos usuários por parte da imagem em que a alteração é mais perceptível. Para alternar a visibilidade dos rótulos e os créditos, respectivamente, defina data-showlabels e data-showcredits como falsos. E para desativar a animação, data-animate como falsos.
Se você estiver usando o JUXTAPOSE em uma solução de iframe responsiva existente como o Pym.js e não quiser usar a solução IFRAME construída (mas falhada) da JuxtaPose, poderá definir data-makeresponsive como false.
A classe JXSlider leva três argumentos. Primeiro, é a sequência do ID do elemento que você deseja se transformar em um controle deslizante. O segundo é uma matriz de dois objetos. Cada objeto deve ter src definido e pode opcionalmente definir um label e um credit . O terceiro argumento permite definir opções adicionais para o controle deslizante da imagem.
< 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 >Você pode personalizar como o JUXTAPOSEJS parece modificar seu CSS. Para instruções, clique aqui.
A classe JXSLider contém alguns métodos que você pode usar para modificar seus controles deslizantes.
Se você instanciou seus controles deslizantes com o método HTML, mas ainda deseja acessar um de seus controles deslizantes programaticamente, o JUXTAPOSEJS cria uma matriz dos JXSLiders na sua página que você pode acessar com juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; A porcentagem indica onde você deseja definir a alça em relação ao lado esquerdo do controle deslizante. Se você definir animado como true , o identificador animará o novo local; Se o Animate estiver definido como false , o identificador não.
Como parte da renderização de uma instância de justaposição, essa biblioteca torna um "crédito" como HTML. JUXTAPOSE passa essa string diretamente pelo atributo data-credit ou da propriedade credit do objeto de configuração para qualquer uma das imagens.
No sentido mais estrito, isso expõe uma vulnerabilidade XSS; No entanto, acreditamos que, para que os justapostos existam como uma ferramenta em um kit de ferramentas, é responsável e ideal deixar qualquer higienização do HTML como responsabilidade dos integradores, que podem ter suas próprias idéias sobre o que é apropriado. Portanto, observe: se você estiver fornecendo um serviço que ajude as pessoas a criar instâncias de justaposição, assuma a responsabilidade adequada por impedir a injeção de código malicioso.
