juxtapose
1.0.9
[juxtaposejs] [https://juxtapose.knightlab.com] أداة بسيطة ومفتوحة المصدر لإنشاء قبل/بعد انزلاقات الصورة. ما عليك سوى توفير اثنين من عناوين URL للصور وسيقوم Aboxtapose بباقي العمل نيابة عنك. فيما يلي تعليمات لتنفيذ ABOXTAPOSE مع HTML و JavaScript ولكن لدينا أيضًا أداة تتيح لك إنشاء شريط تمرير دون الحاجة إلى معرفة أي رمز.
إذا كنت ترغب في المساهمة في juxtapose ، تحقق من ملف DEVELOPERS.md . شوك المشروع ، وإنشاء فرع جديد مع ميزاتك ، وتقديم طلب سحب. شكرا لمساعدتك!
أسهل طريقة لإنشاء شريط تمرير juxtapose هي الانتقال إلى [https://juxtapose.knightlab.com] [1] واستخدام الأداة لإنشاء مقتطف رمز قابل للتضمين يمكنك استخدامه على أي موقع ويب. هناك عدد من الطرق الأخرى لتثبيت juxtapose على موقع الويب الخاص بك.
CDN - Auxtapose متاح على Knight Lab CDN. فقط أضف هذا الرمز إلى <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 " >مديرو الحزم - يتوفر Aboxtapose في كل من سجلات حزمة NPM و Bower. ستؤدي الأوامر التالية ، على التوالي ، إلى توفير ملفات متطلبات Package.json و Bower.json.
npm install --save juxtaposejs
bower install --save juxtaposeهناك أيضا حزمة النيزك المتاحة.
أسهل طريقة لإنشاء شريط تمرير juxtapose هي الانتقال إلى [https://juxtapose.knightlab.com] [1] واستخدام الأداة لإنشاء مقتطف رمز قابل للتضمين يمكنك استخدامه على أي موقع ويب. الأداة سهلة الاستخدام ولا تتطلب أي معرفة ترميز على الإطلاق. إذا كنت ترغب في استخدام 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 إلى خطأ.
إذا كنت تستخدم juxtapose في حل IFRAME مستجيب حالي مثل PYM.JS ولا ترغب في استخدام حل IFRAME المدمج في juxtapose (ولكن الفشل) ، يمكنك تعيين 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 على بعض الطرق التي يمكنك استخدامها لتعديل منزلقاتك.
إذا قمت بتثبيت Sliders الخاص بك باستخدام طريقة HTML ولكن لا تزال ترغب في الوصول إلى أحد متزلجاتك برمجيًا ، فإن Juxtaposejs يقوم بإنشاء مجموعة من JXSliders على صفحتك يمكنك الوصول إليها باستخدام juxtapose.sliders .
JXSlider . updateSlider ( percentage , animate ) ; تشير النسبة المئوية إلى المكان الذي تريد تعيين المقبض بالنسبة إلى الجانب الأيسر من شريط التمرير. إذا قمت بتعيين تحريك إلى true ، فسيتم تحريك المقبض إلى الموقع الجديد ؛ إذا تم تعيين تحريك على false ، فلن يكون المقبض.
كجزء من تقديم مثيل juxtapose ، تجعل هذه المكتبة "رصيدًا" مثل HTML. يمرر Auxtapose هذه السلسلة مباشرة من سمة data-credit ، أو من خاصية credit لكائن التكوين لأي من الصور.
بالمعنى الدقيق للكلمة ، هذا يعرض ثغرة XSS ؛ ومع ذلك ، نعتقد أنه بالنسبة لوجود juxtaposejs كأداة في مجموعة الأدوات ، من المسؤول والمثل على حد سواء ترك أي تعقيم HTML كمسؤولية للتكامل ، الذين قد يكون لديهم أفكارهم الخاصة حول ما هو مناسب. لذلك ، لاحظ: إذا كنت تقدم خدمة تساعد الأشخاص على إنشاء مثيلات مجاورة ، فيجب عليك تحمل المسؤولية المناسبة لمنع حقن التعليمات البرمجية الضارة.
