juxtapose
1.0.9
[juxtaposejs] [https://juxtapose.knightlab.com]は、画像スライダーの前後に作成するためのシンプルでオープンソースツールです。 2つの画像URLを提供するだけで、並置すると残りの作業が行われます。以下は、HTMLとJavaScriptを使用してJuxtAposeを実装するための手順ですが、コードを知らずにスライダーを作成できるツールもあります。
並置に貢献したい場合は、インストール手順については、 DEVELOPERS.mdファイルをご覧ください。プロジェクトをフォークし、機能を備えた新しいブランチを作成し、プルリクエストを送信します。ご協力いただきありがとうございます！
Juxtaposeスライダーを作成する最も簡単な方法は、[https://juxtapose.knightlab.com] [1]に移動し、ツールを使用して、任意のWebサイトで使用できる埋め込み可能なコードスニペットを生成することです。 Webサイトに並置されたインストールをインストールする他の多くの方法があります。
CDN - 並置はKnight Lab CDNで入手できます。このコードをHTMLページの<head>に追加するだけです。
< 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パッケージレジストリの両方で利用できます。次のコマンドは、それぞれback.jsonとbower.json要件ファイルに並置されます。
npm install --save juxtaposejs
bower install --save juxtaposeまた、流星パッケージも用意されています。
Juxtaposeスライダーを作成する最も簡単な方法は、[https://juxtapose.knightlab.com] [1]に移動し、ツールを使用して、任意のWebサイトで使用できる埋め込み可能なコードスニペットを生成することです。このツールは使いやすく、コーディングの知識はまったく必要ありません。埋め込みジェネレーターを使用せずにjuxtaposejsを使用する場合は、読み続けて、さまざまな実装方法について学びます。
画像スライダーを実装する最も簡単な方法は、このコードをマークアップに追加することです。
< 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次のような追加の属性を取得することもできます。
< 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に設定します。
pym.jsのような既存のレスポンシブIFRAMEソリューションで並置を使用しており、Juxtaposeの組み込み（ただし障害のある）応答性のあるIFRAMEソリューションを使用したくない場合は、 data-makeresponsive falseに設定できます。
JXSliderクラスは3つの議論を取ります。まず、スライダーに変えたい要素のIDの文字列です。 2番目は2つのオブジェクトの配列です。各オブジェクトには、 srcが定義されている必要があり、オプションでlabelとcreditを定義できます。 3番目の引数では、画像スライダーに追加のオプションを設定できます。
< 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 >CSSを変更することで、JuxtAposeJSの外観をカスタマイズできます。手順については、ここをクリックしてください。
JXSLiderクラスには、スライダーを変更するために使用できるいくつかの方法が含まれています。
SlidersをHTMLメソッドでインスタンス化したが、スライダーのいずれかをプログラムでアクセスしたい場合、juxtaposejsは、 juxtapose.slidersでアクセスできるjxslidersの配列をページに作成します。
JXSlider . updateSlider ( percentage , animate ) ;パーセンテージは、スライダーの左側に相対的なハンドルを設定する場所を示します。アニメーションをtrueに設定すると、ハンドルは新しい場所にアニメーション化されます。アニメイトがfalseに設定されている場合、ハンドルはfalseに設定されません。
並置インスタンスのレンダリングの一環として、このライブラリは「クレジット」をHTMLとしてレンダリングします。 JuxtaPoseは、この文字列をdata-credit属性から、または画像のいずれかの構成オブジェクトのcreditプロパティから直接通過します。
最も厳しい意味で、これはXSSの脆弱性を公開します。ただし、JuxtAposeJSがツールキットにツールとして存在することは、HTMLが適切なことについて独自のアイデアを持っている可能性のあるインテグレーターの責任としてSanitizingを任せることが責任を負い、最適であると考えています。したがって、注意してください：人々が並置インスタンスを作成するのに役立つサービスを提供している場合は、悪意のあるコードの注入を防ぐために適切な責任を負う必要があります。
