Modx image carousel على صفحة المنتج. كبير ومخيف

مرحبا المجتمع!

في هذه الملاحظة ، ستتعرف على ماهية علامات التبويب المتعددة وكيفية إنشاء تكوين بمجموعة بيانات مختلفة. وبالطبع ، سننشئ معك شريط تمرير يحتوي على أنواع مختلفة من الشرائح ، وفي النهاية ستجد قصة مثيرة للاهتمامالتي لم أجرؤ على إخبار أي شخص بها لفترة طويلة (إلا إذا كنت مهتمًا بالطبع ، لكن القصة ممتعة - صدقني). وهكذا ، أمثلة على الشرائح:

• الصورة الخلفية
• خلفية الفيديو
• لون الخلفية الصلبة

انتباه! هذه المرة ، لا تحذفوا الأطفال والحوامل من الشاشات ، لأن هذا نوع من التمييز على أساس العمر والجنس!

هكذا سيكون الأمر

إعلان آخر! غالبًا ما أشير إلى الدرس الأول حتى لا أكرر نفسي ، لذلك أوصي بشدة أن تتعرف على نفسك

لاجل ماذا؟

دعنا نتخيل: تحصل على مشروع حيث يوجد ، على سبيل المثال ، في الصفحة الرئيسية شريط تمرير به عدة أنواع من الشرائح ، أحدها يحتوي على خلفية فيديو ، وآخر به صورة ، والثالث له لون صلب ، على سبيل المثال. لن تنشئ مجموعة واحدة من الحقول (تكوين واحد) وتضع كل هذه الحقول (آسف على المعجم) وتطلع المدير على كيفية التعايش معها والتعامل معها. ليس موقف جاد!؟ (أتمنى أن يفهم أحد)

للقضية

لقد فهمنا "لماذا" معك ، فلنكتشف الآن "كيف". إذا كنت قد قرأت الدرس الأول بالفعل ، فسنحتاج إلى الانتقال إلى صفحة مكونات MIGX وإنشاء 3 تكوينات. قم بالتثبيت المسبق ColorPicker بواسطة Jako (لكن هذا لا يهم):

كل ما لم أشر إليه ، تخطي!

التكوين الصلب (لون خالص)

• فاتورة غير مدفوعة إعدادات
  • اسم- صلب
  • إضافة فئة جديدة- المنزلق
• فاتورة غير مدفوعة Formtabs
  • مجالات مجالاتإنشاء 3 حقول
    1. لون الخلفية:
       • اسم الحقل-bgcolor
       • شرح- اختر لون الخلفية
       • إدخال نوع التلفزيون- ColorPicker (أو أنت
         استعمال)
    2. عنوان:
       • اسم الحقلرأس
       • شرح- عنوان الشريحة
    3. وصف:
       • اسم الحقل- وصف
       • شرح- وصف الشريحة
       • إدخال نوع التلفزيون- منطقة نصية
  • عدة حقول Formtabs-يكتب( القيمة المعطاةسيكون اسم المفتاح في
    مجموعة الإخراج. الافتراضي: MIGX_formname)
  • - بلون خالص على الخلفية (نص
    هذا التكوين في قائمة الاختيار)
  • - صلب (قيمة حقل النوع نفسه
    في مجموعة)

تكوين الفيديو

• فاتورة غير مدفوعة إعدادات
  • اسم- فيديو
  • فئة- المنزلق
• فاتورة غير مدفوعة Formtabs
  • مجالات- إنشاء علامة تبويب واحدة وفي الميدان مجالاتمرة أخرى ، قمنا بإنشاء 3 حقول ، واحد فقط من هذه الحقول هو من نوع مختلف.

    يجب أن أوضح هنا أن عدد الحقول وأنواعها في تكوينات مختلفة يمكن أن يكون مختلفًا بقدر ما يكون خيالك محدودًا ... هل أعلم أن كل شيء يتماشى مع تخيلاتك؟

    1. فيديو (أي ملف):
       • اسم الحقل- فيديو
       • شرح- رفع فيديو
       • إدخال نوع التلفزيون- ملف
    2. عنوان:
       • اسم الحقلرأس
       • شرح- عنوان الشريحة
    3. وصف:
       • اسم الحقل- وصف
       • شرح- وصف الشريحة
       • إدخال نوع التلفزيون- منطقة نصية
  • عدة حقول Formtabs- يكتب
  • نص خيارات متعددة للنماذج- مع الفيديو في الخلفية
  • خيارات Formtabs متعددةالقيمة- فيديو

التكوين المنزلق

بشكل افتراضي ، سيقبل صورة وسيكون نوعًا من التكوين الرئيسي.

• فاتورة غير مدفوعة إعدادات
  • اسم- المنزلق
  • فئة- المنزلق
  • استبدال "إضافة عنصر"- أضف شريحة
  • نموذج التسمية التوضيحية
  • عنوان النافذة- إضافة / تحرير الشريحة
• فاتورة غير مدفوعة Formtabs
  • مجالات- أنشئ علامة تبويب واحدة وفي حقل الحقول أنشئ 3 حقول مرة أخرى
    1. صورة:
       • اسم الحقل- صورة
       • شرح- تحميل صورة
       • إدخال نوع التلفزيون- صورة
       • حدد مصدر الملفات التي تحتاجها ، لقد وصفت هذه المهمة في الدرس الأول
    2. عنوان:
       • اسم الحقلرأس
       • شرح- عنوان الشريحة
    3. وصف:
       • اسم الحقل- وصف
       • شرح- وصف الشريحة
       • إدخال نوع التلفزيون- منطقة نصية
  • علامات تبويب متعددة- هنا السحر ، نحتاج إلى تحديد التكوينات التي تم إنشاؤها في الخطوات السابقة ، بما في ذلك التكوينات التي نقوم بإنشائها حاليًا ، أي حدد الفيديو والصلب وشريط التمرير

    التكوينات المنزلقلن يكون في القائمة ، لأنه في الحقيقة لم يتم إنشاؤه بعد ، لذلك ستحتاج إلى المرور عبر النقاط المتبقية ، وحفظ التكوين ، وفتح هذا التكوين مرة أخرى للتحرير ، وهذه المرة سيكون متاحًا في القائمة المنزلق

    
    

    توضيح آخر: سيتم فرز التكوينات بالترتيب الذي اخترته بالضبط ، أي بشكل افتراضي ، عند إضافة شريحة جديدة ، سيتم تحديد الشريحة التي ستكون الأولى في القائمة
    

  • تسمية متعددة Formtabs- حدد نوع الشريحة (يشار إلى النص هنا
    الذي سيراه المستخدم بجانب قائمة اختيار نوع الشريحة)
  • عدة حقول Formtabs- يكتب
  • نص خيارات متعددة للنماذج- مع صورة في الخلفية
  • خيارات Formtabs متعددةالقيمة- صورة
• فاتورة غير مدفوعة الأعمدة
  • مجال الأعمدة.إضافة عنصرين
    1. رأس
       • فاتورة غير مدفوعة عمودي
         • رأس- عنوان
         • مجالرأس
       • فاتورة غير مدفوعة محرر الخلية
         • محرر- this.textEditor
    2. وصف
       • فاتورة غير مدفوعة عمودي
         • رأس- وصف
         • مجال- وصف
       • فاتورة غير مدفوعة محرر الخلية
         • محرر- this.textEditor

كما لاحظت بالفعل ، في أول تكوينين ، لم نقم بإنشاء ما يسمى بالأعمدة للإخراج في لوحة التحكم ، أي عند تحرير معلمة التلفزيون نفسها. يجب إنشاء هذه الأعمدة في الأخير ، أي في التكوين الذي سيتم الإشارة إليه في التلفزيون وفي أي مجال علامات تبويب متعددةالتبويب Formtabsسيتم سرد جميع التكوينات التي نحتاجها ، بما في ذلك نفس التكوين نفسه

دعنا نذهب وننشئ تلفزيونًا بسرعة باستخدام نوع الإدخال migx ، في هذا المجال التكويناتاكتب اسم التكوين الخاص بنا ، أي شريط التمرير ، قم بتعيين القوالب اللازمة وافتح المورد للتحرير أو إنشائه. إذا فعلنا كل شيء بشكل صحيح ، فعلينا أن نرى الصورة التالية:

الصورة قابلة للنقر ، وإذا كنت قد شاهدت بالفعل صورة gif من الرابط في بداية الملاحظة ، فهذه هي الصورة

نملأ البيانات بسرعة وننتقل إلى إخراج الشرائح الخاصة بنا.

كيف تسحب؟

إدخال البيانات جيد ، لكن ماذا عن المخرجات؟ لا تقلقوا أيها الرفاق ، كل شيء سيكون على ما يرام. بالنسبة للإخراج ، لدينا مرة أخرى خياران جيدان ، وقد درسنا كلا الخيارين في ، هذا مقتطف MIGX أصلي getImageListوالقادر على كل شيء ظاهرة. دعونا نرى كيف تبدو بياناتنا:

getImageList

دعنا نستدعي المقتطف دون تحديد المعلمة tpl من أجل رؤية البيانات الأولية:

[] Array (=> 14 => image => files / avatar.png => هذه شريحة بها صورة => حسنًا ، وصف قصير) [_alt] => 0 [_first] => 1 [_last] => => 1 => شريط التمرير) Array (=> 15 => video => files / منزلي مخجل.MOV => وهذا فيديو => نعم ، بالفعل! [_alt] => 1 [_first] => [ _last] => => 2 => شريط التمرير) صفيف (=> 16 => صلب => ff0000 => والأحمر لون جميل هنا => يعجبني! [_alt] => 0 [_first] => [_last ] => 1 => 3 => شريط التمرير)

ظاهرة

($ _modx-> Resource.slider | fromJSON | print) Array (=> Array (=> 14 => image => files / avatar.png => هذه شريحة صورة => حسنًا ، وصف قصير)) => صفيف (=> 15 => video => files / منزلي مخزي. MOV => وهذا فيديو => نعم ، بالفعل!) => صفيف (=> 16 => صلب => ff0000 => وهنا الأحمر هو لون جميل => أنا أحب!))
كما نرى ، في مصفوفاتنا ، من بين أشياء أخرى ، المفتاح يكتببالقيم التي حددناها عند إنشاء التكوينات.

من أجل عرض شريط التمرير الخاص بنا مع getImageList، نحتاج إلى إنشاء 3 أجزاء بأسماء قيمنا الأساسية يكتب، على سبيل المثال: الصورة والفيديو والصلب. علاوة على ذلك سوف تفهم لماذا.

أمثلة متقطعة:

// صورة مجمعة

// مقطع فيديو // قطعة صلبة
ويجب أن تبدو المكالمة كما يلي:

هنا نأخذ قيمًا من مصفوفات كل شريحة ، وبالتالي أنشأنا ثلاثة أجزاء تتطابق أسماؤها مع قيم الحقول عدة حقول Formtabs

كذلك على ظاهرةكل شيء يبدو أبسط بكثير:

(var $ slider = $ _modx-> Resource.slider | fromJSON) (if $ slider)

(/إذا)

النتيجة والقصة الموعودة

كما نرى ، تتكيف MIGX مع هذه المهمة ، إن لم نقل "ممتاز" ، ولكن على الأقل "جيد". أكرر مرة أخرى أن MIGX لا يقيدك في عدد التكوينات وعلامات التبويب في كل تكوين وفي عدد الحقول الموجودة فيها. والأمثلة ، كما تأمل أن تفهم بالفعل ، بسيطة جدًا بحيث يمكنك أيضًا التعرف على هذه الوظيفة. وشيء آخر مهم: عند إخراج الأجزاء ، أوصي بشدة بالتحقق من امتلاء الحقول وأخذ دائمًا في الاعتبار أن البيانات قد يتم ملؤها أو لا يتم ملؤها أو قد لا تأتي لسبب ما ، وبالتالي استخدم مرشحات phx لبناء جملة MODX أو الظروف في fenom.

أشكركم جميعًا على اهتمامكم ، وأتمنى للجميع التوفيق ، لكنني لن أفعل ، لأنهم كما يقولون: "أتمنى للخاسرين حظًا سعيدًا" ، لذلك أتمنى لكم السعادة والصحة أو شيء من هذا القبيل ، ولكن من يهتم ، ثم القصة .

بمجرد أن جاء أقاربي لزيارتنا ، ومن بينهم ابن أخي (ابن أختي) من بلد مجاوروابني أخي (نحن جميعًا تقريبًا في نفس العمر). منزل ريفي ، مشمس آسيا الوسطى ، جبل صغير ونهر قريب. في نفس الليلة ، قررنا نحن الأربعة السير على طول هذا النهر بالذات ، وفي البداية كان كل شيء هادئًا ، ولم تكن هناك أسباب للإثارة. لقد استمتعوا كثيرًا ، ورووا قصصًا (أحيانًا مخيفة ومخيفة) ، ومازحون ، وأشياء من هذا القبيل. لكن في مرحلة ما ، لاحظت أن أحد أبناء إخوتي قد أصبح شاحبًا وهذا ليس مجرد انعطاف لفظي أو تجميل ، لأنني لم أر مثل هذا الخوف والحيرة على وجه أي شخص قبل وبعد هذه الحادثة. دون أن يرفع عينيه نظر في الاتجاه الذي أدير فيه ظهري ، أي. بدا لي أنه كان ينظر إلى شيء ما أو شخص ما خلفي ، ولكن ليس خلفي وقريب مباشرة ، بدا لي أنه كان يبحث في مكان ما بعيدًا. كان الأمر مخيفًا وسألته: - ماذا حدث؟ وهو…

سيتعين على هذه الفقرة التظاهر بأن القصة في هذه الملاحظة لها استمرار ، لكن في الحقيقة خدعتك قليلاً ، على أمل أن أتمكن من تشجيعك قليلاً من النص التقني والممل والكبير وستكون في حالة جيدة مزاج. القصة نفسها حقيقية ومثيرة للاهتمام للغاية. الآن ، أشكركم جميعًا على اهتمامكم!

محدث:
لو ماذا انا بهاء !؟

إذا أراد شخص ما فجأة أن يشكر الروبل ، فليكن: بطاقة سبيربنك +79609354545

في هذا الدرس ، سنغطي أساسيات MIGX ونعمل على شريط تمرير جديد يمكنك استخدامه في مدونتك.

متطلبات:

• موقع ويب MODX Revolution.
• تم تثبيت نوع متغير قالب مخصص MIGX (عبر إدارة الحزم).
• شريط تمرير المعرض أو البرنامج النصي الذي نرغب في دمجه. لقد استخدمت FlexSlider من WooThemes لأنه يضبط نفسه ليناسب عرض الحاوية (مهم جدًا للتصميم سريع الاستجابة!). كما أنه قابل للتهيئة بدرجة كبيرة ، ويدعم التمرير على الهواتف الذكية ، ويبدو جيدًا خارج الصندوق.
• تم تثبيت مقتطف phpthumbof عبر مدير الحزم لقص الصور تلقائيًا.
• أي صور!

يبدأ

يستخدم العمل عدة أجزاء. نحتاج أولاً إلى تثبيت MIGX TV ونحتاج إلى أخذ هذه البيانات من الواجهة الأمامية وتشغيل شريط التمرير الخاص بنا. يفترض هذا البرنامج التعليمي استخدام FlexSlider ، وسوف نتأكد من أن الترميز هو ما يحتاج إليه ، ولكن يجب أيضًا أن يكون من السهل جدًا تكييفه مع أشرطة التمرير الأخرى.

الخطوة 1: قم بتثبيت MIGX TV لإدارة الصور

لنبدأ بإعداد التلفزيون. تكمن قوة MIGX في أنه يمكنك تحديد الحقول التي تحتاجها. سوف تراهم كجدول وتحتاج فقط إلى تسمية العناوين. في هذه الحالة ، سأحتاج إلى ثلاثة مجالات مختلفة:

• حقل الإدخال لاختيار صورة في نظام الملفات (أو 2.2 من مصادر الوسائط الخاصة بك).
• حقل إدخال النص لإدخال التسمية التوضيحية / العلامة / الوصف. يقوم FlexSlider بعمل رائع مع التسميات التوضيحية ، لذلك سنستخدمها.
• كما أضفت إدخال نص لـ "Set". كما سنرى لاحقًا ، سأستخدمه لعدد لا حصر له من أشرطة التمرير الفردية التي ستتم إضافتها من أي مكان في المورد ..

يمكنك استخدام الحقول الأخرى إذا أردت ، ولكن البرنامج التعليمي سيستخدم الحقول المذكورة أعلاه بالضبط.

دعنا ننتقل إلى إنشاء التلفزيون. يوجد هنا شريط تمرير يحتوي على أوصاف للصور (في حالة عدم ظهور أي شيء في الصورة المصغرة).

قم بإنشاء متغير قالب جديد في علامة تبويب العناصر وأعطه اسمًا مناسبًا. سأطلق عليه اسم ws.images ، إذا أعطيته اسمك الخاص ، فلا تنس استبدال [[* ws.images]] باسمك. في علامة التبويب "خيارات الإدخال" ، حدد نوع "migx" من القائمة المنسدلة. إذا كنت لا ترى هذا النوع ، فتحقق مما إذا كنت قد قمت بتثبيت حزمة MIGX عبر مدير الحزم. ستلاحظ أنه تمت إضافة العديد من الخيارات في الجزء السفلي من الشاشة ، بما في ذلك علامات تبويب النموذج وأعمدة الشبكة. ينطبق هذا على MODX> 2.0 ، بالنسبة للإصدارات السابقة ، أوصي بالترقية.

لاحظ أنه يجب ملء حقلي علامات تبويب النموذج وأعمدة الشبكة بسلاسل JSON الصالحة. JSON هي في الأساس طريقة لعرض الكائنات أو المصفوفات أو مجموعات القيم الرئيسية بطريقة تدعمها أي لغة برمجة تقريبًا. هنا المواصفات الفنية وبعض الأمثلة من موقع JSON الرسمي.

إعداد علامات تبويب النموذج

يتيح لك النموذج استخدام علامات تبويب مختلفة. تحتوي كل علامة تبويب على وصف والعديد من الحقول. يمكنك القيام بالكثير من الأشياء المتقدمة باستخدام هذا لأنك ستستخدم علامة تبويب واحدة معظم الوقت ، لذلك تذكر فقط الآن. هذا هو رمز JSON لعلامات تبويب النموذج التي أستخدمها:

[("التسمية التوضيحية": "الصورة" ، "الحقول": [("الحقل": "مجموعة" ، "التسمية التوضيحية": "المجموعة") ، ("الحقل": "الوصف" ، "التسمية التوضيحية": "الوصف") ، ("field": "image"، "caption": "Image"، "inputTVtype": "image")])]

لنستعرض كل سطر:

• يُظهر الأول فتح صفيف علامات الجدولة بقوس مربع ([) ، ويتم فتح كائن علامة التبويب بقوس متعرج ((). بعد ذلك ، نحدد التسمية التوضيحية لحقل الصورة. لاحظ أنك بحاجة إلى استخدام علامات الاقتباس المزدوجة (" ") بالنسبة للخصائص وقيمها ، يمكن أن تؤدي القيم الفردية إلى نتائج غير متوقعة. إذا كان لديك هذه الأقواس في أي خصائص أو قيم ، فاحذفها بشرطة مائلة (\). بعد تحديد الوصف (التسمية التوضيحية) ، دعنا نستمر ونبدأ في تحديد مجموعة من "الحقول" ، وفتحها بأقواس مربعة ([).
• سنحدد حقلنا الأول على أنه مجموعة. "الحقل": تعني "المجموعة" أننا نريد إدخال نص عادي في هذا الحقل. "Caption": "Set" - نقدم وصفًا للاسم "set" - سيكون هذا الاسم هو اسم إدخال نص عادي. بعد ذلك ، أعطه التسمية التوضيحية "Set" ، والتي ستظهر في النموذج كتسمية حقل.
• بعد ذلك ، حدد حقل الوصف بنفس الطريقة
• يحدد السطر 4 الصورة. ما يميزنا هنا هو أننا نستخدم تلفزيونًا آخر (يُسمى "صورة") كنوع الإدخال. هذه ميزة قوية جدًا لـ MIGX تتيح لك استخدام أجهزة تلفزيون أخرى لبناء النموذج الخاص بك. في هذه الحالة ، يكون تلفزيون "الصورة" بسيطًا جدًا: نوع الإدخال هو صورة ، وفي 2.2 يمكنك تخصيصه لمصدر الوسائط الصحيح. لا تحتاج إلى ربطه بالقوالب كما تفعل مع التلفزيون العادي. هناك طريقة أخرى للقيام بذلك (والتي أستخدمها في أجهزة تلفزيون MIGX الأخرى) وهي إنشاء مربعات راديو أو مربعات اختيار.
• يغلق السطر الخامس صفيف الحقول. لاحظ أيضًا أن السطر الأخير الذي يحدد الحقل (الصورة) لا ينتهي بفاصلة - وهذا مهم! إذا وضعت فاصلة في مصفوفة ، فلن يتم تحليل JSON ولن يعمل النموذج الخاص بك.
• يغلق السطر السادس كائن الجدولة ومجموعة علامات الجدولة بأكملها.

لذلك ، بهذه الطريقة أنشأنا تلفزيون "صورة"! يجب أن يكون لديك بالفعل نموذج لملء البيانات ، لكنك تحتاج إلى ترميز لإظهاره ...

تعيين توصيف العمود

تخطيط العمود هو جدول على لوحة تلفزيون المورد. تحتاج إلى تحديد رؤوس هذا الجدول عبر خيارات إدخال "توصيف العمود". إليك تعريف (JSON مرة أخرى) لما أستخدمه: [("header": "Sortable": "true" ، "dataIndex": "set") ، ("header": "Description" ، "sortable": "true"، "dataIndex": "description")، ("header": "Image"، "Sortable": "false"، "dataIndex": "image"، "renderer": "this. تصيير ")]

لنستعرض كل سطر:

• افتح صفيف العنوان بأقواس مربعة ([) وعنوان العمود الخامس بأقواس متعرجة (().
• نقوم بتسمية العنوان "Set" ، ونشير إلى أنه يمكن الفرز (قابل للفرز) ونحدد معلمة "set" ، والتي تتوافق مع تعريف Set Form Tabs ، والتي تحتوي على "field": "set".
• نهاية المجموعة / بداية الوصف
• نقوم بتسمية العنوان "الوصف" ، قابل للفرز ومطابقته مع فهرس بيانات وصف الحقل.
• وصف النهاية / صورة البداية
• قم بتسمية العنوان "صورة" ، غير قابل للترتيب ، وقم بتعيينه إلى حقل فهرس البيانات - صورة. سنقوم أيضًا بتعريف العارض الذي سيسمح لك في ExtJS بتغيير مظهر بيانات الإخراج. في هذه الحالة "this.renderImage" سيأخذ العارض عنوان url للصورة المحددة تلقائيًا ويعرض صورة مصغرة بدلاً من ذلك.
• نهاية كائن صورة ومجموعة من الرؤوس.

بعد ذلك يمكنك تخصيص تلفزيون MIGX هذا للقالب الخاص بك والتحقق من النتيجة. الترميز لا يظهر؟ ارجع إلى علامات التبويب وتأكد من أن جميع القيم محاطة بعلامات اقتباس مزدوجة وليست علامات اقتباس مفردة وتحقق من وجود فواصل إضافية.

معلومة

للتحقق من صحة JSON ، استخدم JSONLint.

• املأ التفاصيل
• إحضار البيانات إلى الموقع

املأ متغير قالب ws.image الخاص بنا ببيانات عشوائية

إذا حاولت عرض هذه البيانات كجهاز تلفزيون عادي ، فسترى شيئًا مثل هذا:

[("MIGX_id": "1"، "set": "set1"، "description": "ضع علامة على القط الذي يسرق النقانق ويأكل عندما يكون مستيقظًا" ، "image": "demo / uroki / 15/1 .jpg ")، (" MIGX_id ":" 2 "،" set ":" set1 "،" description ":" drum "،" image ":" demo / uroki / 15 / 2.jpg ")، (" MIGX_id ":" 3 "،" set ":" set1 "،" description ":" como esta nuevo "،" image ":" demo / uroki / 15 / 3.jpg ")، (" MIGX_id ":" 4 "، "set": "set1"، "description": "يمكنك قتل رجل بهذا الكتاب"، "image": "demo / uroki / 15 / 4.jpg")]

هذه مصفوفة JSON تحتوي على حقول وقيم تم إدخالها!

نظرًا لأن MIGX يأتي مع مقتطف getImageList ، يمكنك محاولة عرض البيانات باستخدامه. يمكن العثور على وثائق لهذا المقتطف هنا. أو قم بإنشاء المقتطف الخاص بك (parseMIGXToGallery) ، والذي أستخدمه لإنشاء ترميز من & tpl chunk بناءً على بيانات التلفزيون:

fromJSON ($ input) ؛ الناتج $ = مجموعة () ؛ if (! $ input || blank ($ tpl)) ترجع "no stuff" ؛ foreach ($ input as $ row) (if (isset ($ set) &&! blank ($ set) && ($ set! = $ row ["set"])) تابع ؛ $ output = $ modx-> getChunk ($ tpl، $ row)؛) عودة تنفجر ("\ n"، $ output)؛

لنستعرض كل سطر:

• نأخذ متغير الإدخال $ (الذي يأخذ البيانات الموجودة في معلمة الإدخال & في استدعاء المقتطف ، والمزيد حول ذلك لاحقًا) ويوزع JSON في مصفوفة php.
• سنقوم بتعيين مصفوفة فارغة للاحتفاظ بمخرجاتنا.
• دعونا نتأكد من أن متغير $ input ليس NULL أو False ، مما يعني أن JSON لم يتم تمريره أو أنه غير صالح ، وكذلك تحقق مما إذا كان المتغير $ tpl (الذي تم تمريره بواسطة المعلمة & tpl في استدعاء المقتطف) غير فارغ. إذا كان أي من الشرطين صحيحًا ، فسنطبع رسالة خطأ "فارغة" ، والتي ستكون بمثابة تلميح إلى مدير المحتوى بأن هناك خطأ ما.
• بعد ذلك ، كرر خلال كل عنصر من عناصر مصفوفة الإدخال $ كصف $.
• نتحقق مما إذا كان متغير $ set قد تم تعيينه (والذي تم تعيينه في استدعاء المقتطف في المعلمة & set) وإذا لم يكن فارغًا ، فإننا نتحقق من قيمته مقابل قيمة "set" للصف الحالي. إذا لم يكن هذا ما تريده ، فانتقل إلى العنصر التالي في المصفوفة.
• نحصل على جزء باسم $ tpl وأدخل قيم الصف الحالي فيه كعناصر نائبة.
• نغلق حلقة foreach.
• أخيرًا ، نلصق مصفوفة المخرجات $ معًا ، ونفصل كل عنصر بفاصل أسطر ، ثم نخرجه إلى الصفحة.
• لتلخيص ما سبق ، نأخذ المدخلات ، ونكررها على كل صف ونتحقق مما إذا كانت تنتمي إلى المجموعة التي حددناها ، ثم تحصل على جزء ويضيف كل شيء إلى المخرجات.
• تشغيل المقتطف

كل ما نحتاجه هو مكالمة مقتطف حيث نحتاج إلى صورنا وقطعة ستخرج كل شيء بالطريقة الصحيحة لـ FlexSlider. إليك كيفية استدعاء المقتطف:

[] `& set =` set1`]]

و images.gallery.tpl مقطع:

[[+ وصف]]

تحتاج أيضًا إلى التفاف إخراج المقتطف بالكامل في div وقائمة غير مرتبة ، وفقًا لوثائق FlexSlider. لتسهيل الأمر كله ، دعنا نضع كل ذلك في جزء واحد. يُطلق على الجزء الخاص بي اسم شريط التمرير ويحتوي على ما يلي:

باستخدام هذا الجزء ، يمكنني ببساطة ربط شيء ما في المحتوى ، والذي يسهل تذكره أو وضعه في ورقة الغش.

[[$ slider؟ set = `اسم المجموعة`]]

الآن يمكنك البدء في وضع FlexSlider.

الخطوة الثالثة: استخدام FlexSlider

FlexSlider سهل الاستخدام نسبيًا (تنزيل ملفاته) وهناك الكثير من الأمثلة على موقعه على الويب. تحتاج أيضًا إلى تضمين استدعاء jQuery على الصفحة وملف CSS (معبأ في ملف مضغوط) والمكوِّن الإضافي FlexSlider (أيضًا في أرشيف zip). بعد ذلك ، تحتاج إلى تشغيل العنصر الصحيح باستخدام الكود التالي:

ينصح الموقع بوضع كل شيء في رأس الملف ، لكنني شخصياً أضع كل شيء في الجزء السفلي. إذا تم عرض شريط التمرير أعلى الصفحة ، فمن الأفضل وضعه فيه حتى يتم تحميلها قبل ظهور الصفحة ، لذا ضعها في أي مكان تريده.

هذا كل شئ! آمل أن تساعد هذه المقالة الطويلة شخصًا ما على البدء في استخدام MIGX والمنزلقات مثل FlexSlider!

اليوم مقال صغير عن كيفية إنشاء شريط التمرير في modxباستخدام حزمة BanerY. يمكن تنزيل هذه الحزمة وتثبيتها من المستودع.

إنشاء شريط تمرير باستخدام BanerY

وهكذا يوجد شريط تمرير ثابت ، فليكن شريط تمرير تمهيد عادي ، مع هذا الترميز:

الهدف هو إنشاء شريط تمرير مُدار من هذا الترميز. هيا بنا نبدأ.

لنبدأ بإنشاء شرائح في BannerY ، لذلك نذهب إلى Applications - BannerY - Positions وننشئ موقعًا (على سبيل المثال ، شريط تمرير الصفحة الرئيسية).

بعد ذلك ، انتقل إلى علامة التبويب لافتات وانقر على زر لافتة جديدة. سيتم فتح نافذة لإنشاء لافتة جديدة.

نملأ كل شيء:

• الاسم ، يمكن عرضها باستخدام [[+ الاسم]].
• حدد الصورة - [[+ صورة]].
• حدد عنوان URL للمكان الذي تريد الذهاب إليه - [[+ url]].
• املأ الوصف - [[+ الوصف]] - هنا ، بالمناسبة ، لا يمكنك شحن النص فحسب ، بل يمكنك أيضًا شحن html العادي ، وهذا رائع.
• حسنًا ، حدد الوظيفة (التي تم إنشاؤها مسبقًا).

وهكذا نقوم بإنشاء العدد المطلوب من الشرائح.

أنت الآن بحاجة إلى تقسيم العلامات أعلاه إلى أجزاء وتناسب الكود الموجود في الأجزاء مع بنية BanerY

قم بإنشاء قطعة لشريط تمرير منفصل مع الفصل نشيط، فليكن الانزلاقوحقن بناء الجملة فيه:

الآن انسخ هذه القطعة وأعطها اسمًا شريحة 2وإزالة الفصل نشيط

حسنًا ، يبقى ، في الواقع ، فقط لعرض الشرائح.

[]

نتيجة لذلك ، نحصل على ما يلي:

هذا كل شيء) من السهل جدًا إنشاء شريط تمرير على modx باستخدام BanerY.

نعم بالمناسبة توثيقه هنا: docs.modx.pro/components/bannery/snippet

يعد Slider Revolution أحد أكثر أشرطة التمرير شيوعًا نظرًا لمجموعته الكبيرة من الميزات وسهولة الاستخدام.
من ThemePunch. تم شراء شريط التمرير هذا أكثر من 273441 مرة ويستخدمه أكثر من 2500000 موقع حول العالم.

المدرجة أدناه هي بعض المزايا الرئيسية لشريط التمرير هذا ، والذي يميزه عن الملفات المجانية و
معظم نظائرها المتميزة:

• محرر مرئي قوي - قم بتخصيص عرض شريط التمرير ليناسب احتياجات مشروعك من خلال قائمة ملائمة فيها
  كل وظيفة في مكانها. لن يسمح لك التدرج الصارم بالارتباك. الصعوبة الوحيدة في
  ستكون المرة الأولى هي الرغبة في تجربتهم جميعًا.
• التحكم في تنوع كل شريحة - العرض المخطط للكتل على شاشة الكمبيوتر الشخصي والجهاز اللوحي والهاتف
  يظهر في المحرر المرئي. يمكنك تغيير حجم الشرائح بشكل فردي لكل جهاز.
  لن يسمح القالب المتجاوب بتشويه الصور ومقاطع الفيديو أو شغل مساحة أكبر مما هو مطلوب
  مشاهدة مريحة.
• العمل مع الشبكات الاجتماعية واستضافة الفيديو - الجيل الخامس من Slider Revolution يسمح لك بالتضمين في شريط التمرير
  البيانات من Instagramm و Facebook و Flickr و Twitter و Vimeo و Youtube. إذا كنت تخطط لنشر الفيديو بنفسك
  الخادم ، يمكنك استخدام لغة HTML5. ستتم كتابة أجزاء من الكود تلقائيًا.
• أداء عالٍ وتحسين الشريحة - يعمل البرنامج المساعد بسرعة في وضع التحرير ويقلل
  وزن شريط التمرير دون فقدان جودة المحتوى. لا داعي للقلق بشأن أوقات تحميل الصفحات الطويلة. ما هو على وجه الخصوص
  ذات الصلة فيما يتعلق بالأجهزة المحمولة البعيدة عن متناول اتصالات WiFi.
• عدد كبير من المؤثرات الخاصة عند نقل الشرائح
• العديد من تأثيرات الرسوم المتحركة عند عرض النص والفيديو والصور
• بدء تشغيل الفيديو تلقائيًا عند فتح الموقع أو يدويًا للاختيار من بينها إيقاف شريط التمرير عند مشاهدة الفيديو ،
  الترجيع ، إلخ.
• مجموعة كبيرة من إعدادات التنقل
• أدخل إعلانات المنشور مع الروابط مباشرة في شريط التمرير ، بينما تم تكوينه لتحسين محركات البحث
• دعم وتركيب خطوط جوجل
• باستخدام العديد من الطبقات (الصور ومقاطع الفيديو والتعليقات التوضيحية والروابط) في شريحة واحدة ، يوجد عدد لا يحصى منهم
  تراكب بعضها البعض ، وبالتالي إنشاء فيديو واقعي أو أي عرض تقديمي.

انتباه!لكي تتمكن من تنزيل قوالب شريط التمرير المتميزة عبر الإنترنت وكائنات المكتبة ، تحتاج إلى شراء ترخيص منفصل من ThemePunch ، والذي يكلف في وقت كتابة هذا النص 19 دولارًا ، ثم تنشيطه عن طريق إدخال رمز الشراء في الحقل المشار إليه في الشكل أدناه.

تعديل مراجعة الفيديو

سننظر اليوم في كيفية إنشاء منزلق Bootstrap باستخدام MIGX. قبل البدء في الدراسة ، أوصي بزيارة هذا أولاً.

إنشاء تكوين MIGX

انا ذاهب الى الادارة MIGXوإضافة عنصر جديد اسمه المنزلق، في حقل الاستبدال اكتب " أضف الشرائح"وانتقل إلى علامة التبويب" Formtabs».

• اسم الحقل - العنوان ، التسمية التوضيحية - العنوان.
• اسم الحقل - الشريحة ، التسمية التوضيحية - الشرائح ، نوع الإدخال التلفزيوني - الصورة.
• اسم الحقل - الوصف ، التسمية التوضيحية - الوصف.
• Fieldname - idstranici، Caption - حدد معرف المستند للارتباط به.

• الرأس - العنوان ، الحقل - العنوان.
• رأس - شريحة ، حقل - شريحة ، عارض - this.renderImage.
• العنوان - الوصف ، الحقل - الوصف.
• رأس - معرف المستند ، الحقل - idpage.

ملحوظة:في الأساس ، نحن ننقل العناصر من Formtabs. نعم ، يمكنك أيضًا ملء الحقول عرض العمود - عرض الأعمدة.

حفظ (تنفيذ).

بالنسبة لأولئك الذين لا يريدون الاستحمام على الإطلاق ، نقوم بإنشاء تكوين فارغ وتصدير الكود التالي إليه:

("formtabs": [("MIGX_id": 1، "caption": "\ u0414 \ u043e \ u0431 \ u0430 \ u0432 \ u0438 \ u0442 \ u044c \ u0441 \ u043b \ u0430 \ u0439 \ u04_t34"، u044b "،" print_before_tabs "": "0"، "الحقول": [("MIGX_id": 1، "field": "title"، "caption": "\ u0417 \ u0430 \ u0433 \ u043e \ u043b \ u043e \ u0432 \ u043e \ u043a "،" description ":" \ u0417 \ u0430 \ u0433 \ u043e \ u043b \ u043e \ u0432 \ u043e \ u043a \ u0441 \ u043b \ u0430 \ u0439 \ u0434 \ u0430 "": "description ، "inputTV": ""، "inputTVtype": ""، "validation": ""، "configs": ""، "strictive_condition": ""، "display": ""، "sourceFrom": "config" ، "sources": ""، "inputOptionValues": ""، "default": ""، "useDefaultIfEmpty": "0"، "pos": 1)، ("MIGX_id": 2، "field": "slide "،" caption ":" \ u0421 \ u043b \ u0430 \ u0439 \ u0434 "،" description ":" "،" description_is_code ":" 0 "،" inputTV ":" "،" inputTVtype ":" image "،" التحقق من الصحة ":" "،" التهيئة ":" "،" المقيدة_الحالة ":" "،" العرض ":" "،" المصدر من ":" التكوين "،" المصادر ":" "،" inputOptionValues ​​":" "،" الافتراضي ":" "،" useDefaultIfEmpty ":" 0 "،" pos " : 2) ، ("MIGX_id": 3 ، "الحقل": "الوصف" ، "التسمية التوضيحية": "\ u041e \ u043f \ u0438 \ u0441 \ u0430 \ u043d \ u0438 \ u0435" ، "الوصف": "" ، " description_is_code ":" 0 "،" inputTV ":" "،" inputTVtype ":" "،" validation ":" "،" configs ":" "،" limitsive_condition ":" "،" display ":" "،" source From ":" config "،" sources ":" "،" inputOptionValues ​​":" "،" default ":" "،" useDefaultIfEmpty ":" 0 "،" pos ": 3)، (" MIGX_id ": 4، "field": "idstranici"، "caption": "\ u0423 \ u043a \ u0430 \ u0436 \ u0438 \ u0442 \ u0435 id \ u0434 \ u043e \ u043a \ u0443 \ u043c \ u0435 \ u043d \ u30442 \ u043 \ u043a \ u043e \ u0442 \ u043e \ u0440 \ u044b \ u0439 \ u0441 \ u0441 \ u044b \ u043b \ u0430 \ u0442 \ u044c \ u0441 \ u044f "،" description ":" "،" description_is_ " inputTV ":" "،" inputTVtype ":" "،" validation ":" "،" configs ":" "،" strictive_condition ":" "،" display ":" "،" sourceFrom ":" config "،" المصادر ":" "،" inputOptionValues ​​":" "،" default ":" "،" useDefaultIfEmpty ":" 0 "،" pos ": 4)]،" pos ": 1)]،" Contextmenus ":" " ، "actionbuttons": ""، "columnbutton s ":" "،" الفلاتر ":" "،" الموسعة ":(" migx_add ":" \ u0414 \ u043e \ u0431 \ u0430 \ u0432 \ u0438 \ u0442 \ u044c \ u0441 \ u043b \ u0430 \ u0439 \ u0434 \ u044b "،" disable_add_item ":" "،" add_items_directly ":" "،" formcaption ":" "،" update_win_title ":" "،" win_id ":" "،" maxRecords ":" "،" addNewItemAt ":" أسفل "،" media_source_id ":" "،" multiple_formtabs ":" "،" multiple_formtabs_label ":" "،" multiple_formtabs_field ":" "،" multiple_formtabs_optionstext ":" "،" multiple_formtabs_optionsvalue ":" "،" 4 أزرار ، "winbuttonslist": ""، "extrahandlers": ""، "Filtersperrow": 4، "packageName": ""، "classname": ""، "task": ""، "getlistsort": ""، " getlistsortdir ":" "،" sortconfig ":" "،" gridpagesize ":" "،" use_custom_prefix ":" 0 "،" بادئة ":" "،" الشبكة ":" "،" gridload_mode ": 1 ،" check_resid ": 1،" check_resid_TV ":" "،" Join_alias ":" "،" has_jointable ":" yes "،" getlistwhere ":" "،" joins ":" "،" hooksnippets ":" "،" cmpmaincaption " : ""، "cmptabcaption": ""، "cmptabdescription": ""، "cmptabcontroller": ""، "winbuttons ":" "،" onsubmitsuccess ":" "،" submitparams ":" ")،" أعمدة ": [(" MIGX_id ": 1،" header ":" \ u0417 \ u0430 \ u0433 \ u043e \ u043b \ u043e \ u0432 \ u043e \ u043a "،" dataIndex ":" header "،" width ": 100،" Sortable ":" false "،" show_in_grid ": 1،" customrenderer ":" "،" العرض ":" "،" clickaction ":" "،" selectorconfig ":" "،" renderchunktpl ":" "،" renderoptions ":" "،" محرر ":" ") ، (" MIGX_id ": 2 ،" رأس ":" \ u0421 \ u043b \ u0430 \ u0439 \ u0434 "،" dataIndex ":" slide "،" width ": 100،" Sortable ":" false "،" show_in_grid ": 1،" customrenderer ":" "،" العرض ":" this .renderImage "،" clickaction ":" "،" selectorconfig ":" "،" renderchunktpl ":" "،" renderoptions ":" "،" editor ":" ")، (" MIGX_id ": 3،" header " : "\ u041e \ u043f \ u0438 \ u0441 \ u0430 \ u043d \ u0438 \ u0435"، "dataIndex": "description"، "width": 200، "Sortable": "false"، "show_in_grid": 1، "Customrenderer ":" "،" عارض ":" "،" clickaction ":" "،" selectorconfig ":" "،" renderchunktpl ":" "،" خيارات العرض ":" "،" محرر ":" ") ، (" MIGX_id ": 4 ،" header ":" id \ u0434 \ u043 e \ u043a \ u0443 \ u043c \ u0435 \ u043d \ u0442 \ u0430 "،" dataIndex ":" idstranici "،" width ": 50،" sortable ":" false "،" show_in_grid ": 1،" customrenderer ":" "،" Renderer ":" "،" clickaction ":" "،" selectorconfig ":" "،" renderchunktpl ":" "،" renderoptions ":" "،" محرر ":" ")] ،" فئة ": "")

إنشاء تلفزيون بتكوين MIGX

في شجرة MODX ، على " عناصر"، صحافة + مقابل النقطة حقول إضافية"وأدخل ما يلي:

• "الاسم" - شريط التمرير ؛ "التوقيع" - شريط التمرير.
• في علامة التبويب "خيارات الإدخال" في "نوع الإدخال" حدد migx وفي حقل "التكوينات" أدخل المنزلق.
• في علامة التبويب "متوفر للقوالب" ، حدد تلك القوالب التي ستتوفر لها مدخلات في هذا الحقل.

إدخال بيانات

لنفتح مستندًا تم تخصيص حقل شريط التمرير له باستخدام MIGX مع التكوين وإدخال بعض البيانات فيه.

إخراج العربة من Bootstrap 3 إلى الصفحة

لدينا ترميز Html قياسي getbootstrap.com/docs/3.3/javascript/#carousel-examples ، أعد صياغته لـ MIGX واكتب الكود التالي في المكان المطلوب في النموذج:

وإنشاء قطع:

مؤشر:

وجزء العنصربالمحتوى التالي:

إخراج حلقة Bootstrap 4 لكل صفحة

كما في الحالة السابقة ، نأخذ الترميز القياسي getbootstrap.com/docs/4.1/components/carousel/ونعيدها ، ونتيجة لذلك نحصل عليها

أين القطعة مؤشرلديه الكود التالي:

وجزء العنصربالرمز التالي: