Lightgallery: حالات ديناميكية متعددة

مرحبًا dphermes ،

يبدو أنك تستخدم بناء جملة lightGallery 1.x. لا يحتاج lightGallery 2.x إلى jQuery.

عرض توضيحي - https://www.lightgalleryjs.com/demos/dynamic-mode/
محرر المستندات - https://www.lightgalleryjs.com/docs/dynamic-variables/

يجب أن يعمل مقتطف الشفرة أدناه بشكل جيد.

<div class="slides price">
     <div class="slide">
           <div class="bodytext">
                <button type="button" id="dynamic2002">2002</button>
                    <script>
                         var gallery2002 = [
                              {
                                   src: '*****/wp-content/uploads/2021/04/IMG_0116-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/04/IMG_0116-1024x768.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/04/IMG_0117-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/04/IMG_0117-1024x768.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/04/IMG_0326-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/04/IMG_0326-1024x768.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/04/IMG_0327-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/04/IMG_0327-1024x768.jpg',
                              }
                         ];
                          const dynamicGal1 = lightGallery( jQuery('#dynamic2002')[0], {
                                   hash: false,
                                   dynamic: true,
                                   dynamicEl: gallery2002,
                                   galleryId: 1
                              });
                         jQuery('#dynamic2002').on('click', function() {
                            dynamicGal1.openGallery();
                         });
                    </script>
               </div>
          </div>
          <div class="slide">
               <div class="bodytext">
                    <button type="button" id="dynamic1964">1964</button>
                    <script>
                         var gallery1964 = [
                              {
                                   src: '*****/wp-content/uploads/2021/03/IMG_0367.jpg',
                                   thumb: '*****/wp-content/uploads/2021/03/IMG_0367.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/03/IMG_0368-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/03/IMG_0368-1024x768.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/03/IMG_0369-1024x768.jpg',
                                   thumb: '*****/wp-content/uploads/2021/03/IMG_0369-1024x768.jpg',
                              },
                              {
                                   src: '*****/wp-content/uploads/2021/03/IMG_0370-768x1024.jpg',
                                   thumb: '*****/wp-content/uploads/2021/03/IMG_0370-768x1024.jpg',
                              }
                         ];
                         const dynamicGal2 = lightGallery( jQuery('#dynamic1964')[0], {
                                   hash: false,
                                   dynamic: true,
                                   dynamicEl: gallery1964,
                                   galleryId: 2
                              });
                         jQuery('#dynamic1964').on('click', function() {
                            dynamicGal2.openGallery();
                         });
                    </script>
               </div>
          </div>

اسمحوا لي أن أعرف إذا كنت تواجه أي مشاكل

موافق. لقد رأيت للتو التعديلات. كود يبدو جيدا بالنسبة لي.

لقد أنشأت عرضًا توضيحيًا لبرنامج codepen باستخدام 1.x - https://codepen.io/sachinchoolur/pen/qryByV

أوصي بشدة باستخدام 2.x. إذا كان بإمكانك إخباري بالخطأ الذي تواجهه في 2.x ، فسأحاول تقديم حل

Hum ... في الواقع ، قررت استخدام الإصدار 1.6.0 بقدر ما يتم إنشاء الكود في php ويتم دفع متغيرات معرف الهوية وعناوين url للصور باستخدام php في علامات البرنامج النصي لملف قالب Wordpress الخاص بي:

     <script>
          var gallery<?= get_the_ID(); ?> = [
               <?php
                    $media = get_attached_media('image');
                    foreach(array_slice($media, 0, 6) as $m) {
                         $mee = wp_get_attachment_image_src($m->ID, 'large');
                         echo '{
                              src: \''.$mee[0].'\',
                              thumb: \''.$mee[0].'\',
                         },';
                    }
               ?>
          ];
          const dynamicGal<?= $i ?> = lightGallery( jQuery('#dynamic<?= get_the_ID(); ?>')[0], {
               dynamic: true,
               dynamicEl: gallery<?= get_the_ID(); ?>,
               galleryId: <?= $i ?>
          });
          jQuery('#dynamic<?= get_the_ID(); ?>').on('click', function() {
               dynamicGal<?= $i ?>.openGallery();
               });
     </script>

الشيء هو أنني حصلت على خطأ ReferenceError: Can't find variable: lightGallery أثناء القيام بذلك مع 2.x

سوف أتحقق من عرض codepen الخاص بك الآن ؛) شكرًا

لقد جعلت أخطاء ReferenceErors تختفي مع الإصدار 2.x.
لا يزال يتم إطلاق نفس المعرض بالرغم من ...
المعرض موجود هنا إذا كنت تريد إلقاء نظرة ... أحاول تشغيله بالنقر فوق الزر الذي يحتوي على المعرف (مثل 2002) في المنطقة الرمادية من شريط التمرير (أسفل الصور أو مقاطع فيديو YT)

يحدث هذا لأنه لا يمكن النقر فوق أي من الأزرار الأخرى لأن الزر "2002" يكون دائمًا أعلى جميع الأزرار الأخرى.

إضافة ضربة CSS تحل المشكلة

.slides.price .slide.current {
    z-index: 9;
}

.slides.price .slide {
    background-color: #333;
}

هو ... كيف لا أستطيع أن أرى ذلك؟ من المفترض أن أكون جيدًا مع CSS. أشعر بالغباء ... ها ها!
شكرًا جزيلاً على مساعدتك وعلى استجابتك بسرعة ؛)

سعيد لأنه ساعد 😊