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>

문제가 발생하면 알려주십시오.

확인. 수정본만 봤습니다. 코드가 좋아 보입니다.

1.x로 codepen 데모를 만들었습니다 - https://codepen.io/sachinchoolur/pen/qryByV

2.x를 사용하는 것이 좋습니다. 2.x에서 어떤 오류가 발생하는지 알려주시면 솔루션을 제공하도록 노력하겠습니다.

흠... 사실 저는 1.6.0 버전을 사용하기로 결정했습니다. 코드가 php에서 생성되고 id 변수와 이미지 URL이 워드프레스 템플릿 php 파일의 스크립트 태그에서 php로 푸시됩니다.

     <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>

문제는 2.x에서 ReferenceError: Can't find variable: lightGallery 오류가 발생한다는 것입니다.

지금 바로 codepen 데모를 확인하겠습니다 ;) 감사합니다

v2.x에서 ReferenceErrors가 사라지게 만들었습니다.
여전히 같은 갤러리를 시작하지만...
갤러리를 보고 싶다면 여기 를 클릭하세요... 슬라이더의 회색 영역(사진 또는 YT 비디오 아래)에 id(예: 2002)가 포함된 버튼을 클릭하여 갤러리를 실행하려고 합니다.

이것은 "2002" 버튼이 항상 다른 모든 버튼 위에 있기 때문에 다른 버튼을 클릭할 수 없기 때문에 발생합니다.

타격 CSS를 추가하면 문제가 해결됩니다.

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

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

호.. 그걸 어떻게 못 봤어? CSS를 잘해야 합니다. 멍한 느낌... 하하!
많은 도움을 주셔서 감사하고 너무 빨리 응답해 주셔서 감사합니다 ;)

도움이 되었다니 다행입니다 😊