juxtapose
1.0.9
[Juxtaposejs] [https://juxtapose.knightlab.com] ist ein einfaches Open -Source -Tool zum Erstellen vor/nach dem Bildschieber. Geben Sie einfach zwei Bild -URLs an, und das Nebeneinander bringen den Rest der Arbeit für Sie. Im Folgenden finden Sie Anweisungen zur Implementierung von Nebeneinander mit HTML und JavaScript, aber wir haben auch ein Tool, mit dem Sie einen Schieberegler erstellen können, ohne einen Code zu kennen.
Wenn Sie zum Nebeneinander beitragen möchten, lesen Sie die Datei DEVELOPERS.md für Installationsanweisungen. Geben Sie das Projekt auf, erstellen Sie eine neue Filiale mit Ihren Funktionen und senden Sie eine Pull -Anfrage. Vielen Dank für Ihre Hilfe!
Der einfachste Weg, um einen Nebeneinander zu erstellen, besteht darin, zu [https://juxtapose.knightlab.com] [1] zu gehen und mit dem Tool einen eingebettbaren Code -Snippet zu generieren, den Sie auf jeder Website verwenden können. Es gibt eine Reihe anderer Möglichkeiten, um Nebeneinander auf Ihrer Website zu installieren.
CDN - Nebeneinander ist auf dem Knight Lab CDN erhältlich. Fügen Sie diesen Code einfach dem <head> Ihrer HTML -Seite hinzu:
< 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 " >Packungsmanager - Nebeneinander ist sowohl im NPM- als auch in der Bower -Paket -Registrierung verfügbar. Die folgenden Befehle speichern das Nebeneinander in Ihrem Paket.json und Bower.json -Anforderungsdateien.
npm install --save juxtaposejs
bower install --save juxtaposeEs gibt auch ein Meteor -Paket.
Der einfachste Weg, um einen Nebeneinander zu erstellen, besteht darin, zu [https://juxtapose.knightlab.com] [1] zu gehen und mit dem Tool einen eingebettbaren Code -Snippet zu generieren, den Sie auf jeder Website verwenden können. Das Tool ist einfach zu bedienen und erfordert keinerlei Codierungswissen. Wenn Sie Juxtaposejs ohne den Einbettungsgenerator verwenden möchten, lesen Sie weiter, um sich über verschiedene Implementierungsmethoden zu informieren.
Der einfachste Weg, um den Image Slider zu implementieren, besteht darin, diesen Code zu Ihrem Markup hinzuzufügen:
< 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 " > Jeder img kann auch zusätzliche Attribute wie SO annehmen:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Wenn jedes Bild ein data-label definiert hat, zeigt der Schieberegler eine Etikett für jedes Bild an. Wenn jedes Bild über ein data-credit -Attribut definiert ist, zeigt der Schieberegler ein Guthaben für jedes Bild an.
Der Slider -Wrapper kann auch einige zusätzliche Attribute einnehmen, um einige Optionen anzugeben:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > Wenn Sie eine Ausgangsposition mit data-startingposition angeben, können Sie die Aufmerksamkeit der Benutzer auf das Bild konzentrieren, in dem die Änderung am auffälligsten ist. Um die Sichtbarkeit der Etiketten bzw. der Credits umzuschalten, setzen Sie data-showlabels und data-showcredits auf false. Und um die Animation zu deaktivieren, legen Sie data-animate auf false fest.
Wenn Sie Juxtapose in einer vorhandenen reaktionsschnellen Iframe-Lösung wie PYM.JS verwenden und nicht die integrierten (aber fehlgeschlagenen) reaktionsschnellen Iframe-Lösung verwenden möchten, können Sie data-makeresponsive auf false festlegen.
Die JXSlider -Klasse nimmt drei Argumente ein. Erstens ist die Zeichenfolge der ID des Elements, das Sie in einen Schieberegler verwandeln möchten. Zweitens ist eine Reihe von zwei Objekten. Jedes Objekt muss src definiert haben und kann optional ein label und eine credit definieren. Mit dem dritten Argument können Sie zusätzliche Optionen für den Image Slider festlegen.
< 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 >Sie können anpassen, wie das Nebeneinander aussieht, indem Sie seine CSS ändern. Für Anweisungen klicken Sie hier.
Die JXSLIDER -Klasse enthält einige Methoden, mit denen Sie Ihre Schieberegler ändern können.
Wenn Sie Ihre Schieberegler mit der HTML -Methode instanziiert haben, aber dennoch programmgesteuert auf einen Ihrer Schieberegler zugreifen möchten, erstellt Juxtaposejs ein Array der JXSliders auf Ihrer Seite, auf die Sie juxtapose.sliders zugreifen können.
JXSlider . updateSlider ( percentage , animate ) ; Der Prozentsatz gibt an, wo Sie den Griff relativ zur linken Seite des Schiebereglers einstellen möchten. Wenn Sie sich auf true halten, wird der Griff auf den neuen Standort animieren. Wenn Animate auf false eingestellt ist, wird der Griff nicht.
Diese Bibliothek ist im Rahmen der Rendern einer Nebeneinander Instanz ein "Kredit" als HTML. Nebeneinander übergeht diese Zeichenfolge direkt aus dem data-credit Attribut oder aus der credit des Konfigurationsobjekts für eines der Bilder.
Im strengsten Sinne enthüllt dies eine XSS -Verwundbarkeit; Wir glauben jedoch, dass es sowohl verantwortlich als auch optimal ist, dass es sowohl verantwortlich als auch optimal ist, eine HTML -Bereinigung als Verantwortung der Integratoren zu hinterlassen, die möglicherweise ihre eigenen Vorstellungen darüber haben, was angemessen ist, als Tool als Tool in einem Toolkit vorliegt. Beachten Sie daher: Wenn Sie einen Service anbieten, der Menschen dabei hilft, Nebeneinander Instanzen zu erstellen, sollten Sie eine angemessene Verantwortung für die Verhinderung der Injektion von böswilligem Code übernehmen.
