Lightgallery: Múltiples instancias dinámicas

Hola @dphermes ,

Parece que está utilizando la sintaxis de lightGallery 1.x. lightGallery 2.x no necesita jQuery.

Demostración: https://www.lightgalleryjs.com/demos/dynamic-mode/
Documentos: https://www.lightgalleryjs.com/docs/dynamic-variables/

El siguiente fragmento de código debería funcionar bien.

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

Avísame si tienes algún problema.

Está bien. Acabo de ver las ediciones. El código me parece bien.

Creé una demostración de codepen con 1.x - https://codepen.io/sachinchoolur/pen/qryByV

Le recomiendo que utilice 2.x. Si puede decirme qué error está obteniendo con 2.x, intentaré brindarle una solución.

Hum... En realidad, decidí usar la versión 1.6.0 en la medida en que el código se genera en php y mis variables de identificación y las URL de las imágenes se envían con php en las etiquetas de script de mi archivo php de plantilla de 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>

El caso es que obtengo un error ReferenceError: Can't find variable: lightGallery al hacerlo con el 2.x

Revisaré tu demo de codepen ahora mismo ;) Gracias

Hice que ReferenceErrors desapareciera con v2.x
Sin embargo, todavía estoy lanzando la misma galería...
La galería está aquí si quieres echarle un vistazo... Intento iniciarla haciendo clic en el botón que contiene la identificación (como 2002) en el área gris de mi control deslizante (debajo de las imágenes o los videos de YT)

Esto sucede porque no se puede hacer clic en ninguno de los otros botones, ya que el botón "2002" siempre está encima de todos los demás botones.

Agregar el golpe CSS resuelve el problema

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

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

Ho... ¿Cómo no pude ver eso? Se supone que debo ser bueno con CSS. Me siento tonto... ¡Ja, ja!
Muchas gracias por tu ayuda, y por haber respondido tan rápido ;)

Me alegro de que haya ayudado 😊