juxtapose
1.0.9
[Juxtaposejs] [https://juxtapose.knightlab.com] adalah alat sumber terbuka yang sederhana untuk membuat slider gambar sebelum/sesudah. Cukup berikan dua URL gambar dan Luxtapose akan melakukan sisa pekerjaan untuk Anda. Di bawah ini adalah instruksi untuk menerapkan penjajaran dengan HTML dan JavaScript tetapi kami juga memiliki alat yang memungkinkan Anda membuat slider tanpa perlu mengetahui kode apa pun.
Jika Anda ingin berkontribusi untuk menyandingkan, lihat file DEVELOPERS.md untuk instruksi instalasi. Fork Project, buat cabang baru dengan fitur Anda, dan kirimkan permintaan tarik. Terima kasih atas bantuannya!
Cara termudah untuk membuat slider juxtapose adalah dengan pergi ke [https://juxtapose.knightlab.com] [1] dan menggunakan alat ini untuk menghasilkan cuplikan kode yang dapat disembunyikan yang dapat Anda gunakan di situs web apa pun. Ada sejumlah cara lain untuk menginstal Juxtapose di situs web Anda.
CDN - Juxtapose tersedia di Knight Lab CDN. Cukup tambahkan kode ini ke <head> halaman HTML Anda:
< 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 " >Manajer Paket - Suxtapose tersedia di registrasi NPM dan Bower Paket. Perintah -perintah berikut akan, masing -masing, menyimpan JUXTAPOSE ke file persyaratan paket.json dan bower.json Anda.
npm install --save juxtaposejs
bower install --save juxtaposeAda juga paket meteor yang tersedia.
Cara termudah untuk membuat slider juxtapose adalah dengan pergi ke [https://juxtapose.knightlab.com] [1] dan menggunakan alat ini untuk menghasilkan cuplikan kode yang dapat disembunyikan yang dapat Anda gunakan di situs web apa pun. Alat ini mudah digunakan dan tidak memerlukan pengetahuan pengkodean sama sekali. Jika Anda ingin menggunakan juxtaposejs tanpa menggunakan generator embed, teruslah membaca untuk mempelajari tentang metode implementasi yang berbeda.
Cara termudah untuk mengimplementasikan slider gambar adalah dengan menambahkan kode ini ke markup Anda:
< 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 " > Setiap img juga dapat mengambil atribut tambahan seperti itu:
< img src =" https://example.com/image.jpg " data-label =" 2009 " data-credit =" Alex Duner/Northwestern Knight Lab " /> Jika setiap gambar memiliki atribut data-label yang ditentukan, slider akan menampilkan label pada setiap gambar. Jika setiap gambar memiliki atribut data-credit yang ditentukan, slider akan menampilkan kredit untuk setiap gambar.
Pembungkus slider juga dapat mengambil beberapa atribut tambahan juga untuk menentukan beberapa opsi:
< div id =" juxtapose-wrapper " class =" juxtapose " data-startingposition =" 35% " data-showlabels =" false " data-showcredits =" false " data-animate =" false " > ... </ div > Menentukan posisi awal dengan data-startingposition memungkinkan Anda memfokuskan perhatian pengguna pada bagian gambar di mana perubahan paling terlihat. Untuk beralih visibilitas label dan kredit masing-masing, atur data-showlabels dan data-showcredits ke false. Dan untuk menonaktifkan animasi, atur data-animate menjadi false.
Jika Anda menggunakan Suxtapose dalam solusi iframe responsif yang ada seperti Pym.js dan tidak ingin menggunakan solusi iframe responsif yang dibangun (tetapi gagal) responsif, Anda dapat mengatur data-makeresponsive ke false.
Kelas JXSlider mengambil tiga argumen. Pertama, adalah string ID elemen yang ingin Anda ubah menjadi slider. Kedua adalah array dua objek. Setiap objek harus memiliki src yang ditentukan dan secara opsional dapat menentukan label dan credit . Argumen ketiga memungkinkan Anda mengatur opsi tambahan untuk slider gambar.
< 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 >Anda dapat menyesuaikan bagaimana juxtaposejs terlihat dengan memodifikasi CSS -nya. Untuk instruksi, klik di sini.
Kelas JXSlider berisi beberapa metode yang dapat Anda gunakan untuk memodifikasi slider Anda.
Jika Anda membuat slider Anda dengan metode HTML tetapi masih ingin mengakses salah satu slider Anda secara terprogram, Juxtaposejs membuat berbagai jxsliders di halaman Anda yang dapat Anda akses dengan juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; Persentase menunjukkan di mana Anda ingin mengatur pegangan relatif ke sisi kiri slider. Jika Anda mengatur Animate ke true , pegangan akan menghidupkan ke lokasi baru; Jika Animate diatur ke false , pegangan tidak akan.
Sebagai bagian dari memberikan instance penjajaran, perpustakaan ini membuat "kredit" sebagai HTML. Suxtapose melewati string ini langsung melalui dari atribut data-credit , atau dari properti credit objek konfigurasi untuk salah satu gambar.
Dalam arti yang paling ketat, ini memperlihatkan kerentanan XSS; Namun, kami percaya bahwa agar penjajaran ada sebagai alat dalam toolkit, adalah bertanggung jawab dan optimal untuk meninggalkan html yang membersih sebagai tanggung jawab integrator, yang mungkin memiliki ide sendiri tentang apa yang sesuai. Oleh karena itu, perhatikan: Jika Anda menyediakan layanan yang membantu orang membuat instance bersuara, Anda harus mengambil tanggung jawab yang tepat untuk mencegah injeksi kode jahat.
