عرض الشرائح من عقدة واحدة

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

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

عرض الشرائح الميداني الوحدة النمطية هي بالضبط ما تحتاجه بعد ذلك. يتم تضمين جميع الصور داخل العقدة (لا تضخم العقدة) ويستخدم دورة jquery (مثلما يفعل عرض الشرائح) لإنتاج معرض ديناميكي وعرض الشرائح.

قد تفكر في استخدام الوحدة Galleria . يستخدم عقدة واحدة ويعرض الصور منه كعرض شرائح.

لقد قمت مؤخرًا ببناء موقع يحتوي على معارض بسيطة وانتهى بي الأمر بعدم استخدام وحدات عرض شرائح إضافية على الإطلاق. كل ما احتاجه هو jQuery Cycle وجافا سكريبت صغير ، تمت إضافته إلى موضوعي المخصص. يحتوي هذا الموقع على نوع محتوى "صورة" ومفردات "ألبوم" لتعيين الصور إلى ألبومات مختلفة. ينشئ العرض قائمة بالصور التي تمت تصفيتها حسب الألبوم. لدي في ملفي ملف js يبدو كالتالي:

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

لمسة من CSS تنهيها:

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

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

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

اكتشفت طريقة جيدة للحصول على صور متعددة وروابط متعددة لكل صورة في عقدة واحدة:

ما تريد فعله هو التأكد من تعيين حقلي الصورة والرابط على غير محدود في نوع المحتوى. عند إنشاء طريقة العرض ، تأكد أيضًا من عدم تحديد "عرض جميع القيم في نفس الصف". أضف حقل دلتا لصورتك ولرابطك. إضافة عامل عام: PHP عامل تصفية وتعيين رمز عامل التصفية إلى هذا: return (! $ row-> delta == $ row-> delta_1)؛

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

أوصي Colorbox الوحدة النمطية

ألقِ نظرة أيضًا على الفيديو التعليمي التالي: Colorbox for Drupal 7، part 1: Installation and image field تكامل

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

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

1. قم بإنشاء عرض لعرض الشرائح الخاص بك. استخدم تنسيق "قائمة غير منسقة".
2. قم بتعيين العرض لعرض عنصر واحد فقط ، بحيث تتعامل فقط مع عقدة واحدة (أو استخدم عامل تصفية المحتوى: NID)
3. أضف جميع الحقول التي تريد أن تظهر في عرض الشرائح. استبعاد جميع الحقول من العرض.
4. أضف حقلاً مخصصًا (تأكد من عرض هذا الحقل بعد جميع الحقول التي استبعدتها من العرض). هذا هو المكان الذي ستنشئ فيه الترميز الأساسي لعرض الشرائح. باستخدام أنماط الاستبدال المتاحة ، قم بتعيين كل حقل متاح داخل عنصر li مثل هذا:

   
   <ul id="slider">
   <li>[text_field_1]</li>
   <li>[image_field_1]</li>
   <li>[text_field_2]</li>
   <li>[image_field_2]</li>
   </ul>
   

5. ثم يمكنك تشغيل منزلق jQuery المفضل لديك. إذا كنت قد قمت بالفعل بالتثبيت في jQuery Cycle Plugin ، فيمكنك تشغيل ذلك على شريط التمرير بسهولة كبيرة. فقط تأكد من تحميل المكون الإضافي على الصفحة باستخدام شريط التمرير ، ثم قم بتشغيله على ul الذي تم إنشاؤه حديثًا _:

   
   (function ($, Drupal, window, document, undefined) {
   
       $(document).ready(function() {
           $('#slider').cycle({
           // choose your options
       });
       });
   
   })(jQuery, Drupal, this, this.document);
   

ويجب أن تكون على ما يرام.

هناك moduel https://www.drupal.org/project/field_slideshow وهو مصمم لإنشاء عرض شرائح من عقدة واحدة.

أنا شخصياً أعتقد أن هذا سيكون استخدامًا رائعًا لقالب من نوع العقدة ، ثم يتم تنسيق كل عقدة من هذا النوع كعرض شرائح بدرجة عالية من التحكم ، مثل مكان تقديم بقية الحقول لذلك العقدة...