juxtapose
1.0.9
[Juxtaposejs] [https://juxtapose.nightlab.com] - это простой инструмент с открытым исходным кодом для создания ползунков до/после изображения. Просто предоставьте два изображения URL и Juxtapose, сделайте для вас оставшуюся работу. Ниже приведены инструкции по реализации Juxtapose с HTML и JavaScript, но у нас также есть инструмент, который позволяет вам создавать слайдер без необходимости знать какой -либо код.
Если вы хотите внести свой вклад в JuxtApose, ознакомьтесь с файлом DEVELOPERS.md для инструкций по установке. Разбейте проект, создайте новый филиал с вашими функциями и отправьте запрос на тягу. Спасибо за вашу помощь!
Самый простой способ создания ползунка сопоставления - это перейти на [https://juxtapose.knightlab.com] [1] и использовать инструмент для создания встроенного фрагмента кода, который вы можете использовать на любом веб -сайте. На вашем сайте есть ряд других способов установить Juxtapose.
CDN - Juxtapose доступен на CDN Knight Lab. Просто добавьте этот код в <head> вашей 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 " >Менеджеры пакетов - Juxtapose доступен как в регистрациях NPM и Bower Package. Следующие команды, соответственно, сохранят JustapaPaze с вашим пакетом.
npm install --save juxtaposejs
bower install --save juxtaposeСуществует также метеорный пакет.
Самый простой способ создания ползунка сопоставления - это перейти на [https://juxtapose.knightlab.com] [1] и использовать инструмент для создания встроенного фрагмента кода, который вы можете использовать на любом веб -сайте. Инструмент прост в использовании и не требует никаких знаний по кодированию. Если вы хотите использовать JuxtaposeJS без использования генератора Embed, продолжайте читать, чтобы узнать о различных методах реализации.
Самый простой способ реализации слайдера изображения - добавить этот код в свою разметку:
< 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 " > Каждый img также может принимать дополнительные атрибуты, как SO:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Если каждое изображение имеет определенный атрибут data-label , слайдер отобразит метку на каждом изображении. Если каждое изображение имеет определенный атрибут data-credit , слайдер отобразит кредит для каждого изображения.
Обертка слайдера также может потребовать дополнительных атрибутов, чтобы указать несколько вариантов:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > Указание исходной позиции с помощью data-startingposition позволяет вам сосредоточить внимание пользователей со стороны изображения, где изменение наиболее заметно. Чтобы переключить видимость меток и кредитов соответственно, установите data-showlabels и data-showcredits в False. И чтобы отключить анимацию, установите data-animate в False.
Если вы используете JuxtApose в существующем отзывчивом решении iframe, таком как Pym.js, и не хотите использовать встроенное (но неудачное) реагирующее решение iframe, вы можете установить, чтобы установить data-makeresponsive для FALSE.
Класс JXSlider берет три аргумента. Во -первых, это строка идентификатора элемента, который вы хотите превратить в слайдер. Во -вторых, это массив двух объектов. Каждый объект должен определять src и может при желании определить label и credit . Третий аргумент позволяет установить дополнительные параметры для слайдера изображения.
< 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 >Вы можете настроить, как выглядит Juxtaposejs, изменяя его CSS. Для инструкций нажмите здесь.
Класс jxslider содержит несколько методов, которые вы можете использовать для изменения ваших ползунков.
Если вы создали создание своих ползунков с помощью метода HTML, но все же хотите получить доступ к одному из ваших ползунков программно, Juxtaposejs создает массив JXSLIDERS на вашей странице, к которым вы можете получить доступ с juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; Процент указывает на то, где вы хотите установить ручку относительно левой части слайдера. Если вы установите Animate true , ручка будет анимировать новое местоположение; Если Animate установлен на false , ручка не будет.
Как часть рендеринга экземпляра Juxtapose, эта библиотека делает «кредит» как HTML. JuxtApose проходит эту строку непосредственно через атрибут data-credit или из credit свойства объекта конфигурации для любого из изображений.
В самом строгом смысле это раскрывает уязвимость XSS; Тем не менее, мы считаем, что для того, чтобы Juxtaposejs существовал как инструмент в инструментарии, как ответственность, так и оптимально оставлять любые дезинфекции HTML как ответственность интеграторов, которые могут иметь свои собственные идеи о том, что уместно. Поэтому обратите внимание: если вы предоставляете услугу, которая помогает людям создавать Juxtapose Emestans, вы должны взять на себя соответствующую ответственность за предотвращение инъекции вредоносного кода.
