Multiple dynamic instances

[dphermes]

Description

Hi !
Well... I'm trying to instantiate several dynamic galleries depending on the pictures included in my Wordpress Posts.
I tried to look in the doc and on the net, but there's no mention at all of multiple instances using dynamic mode.
Thanks A LOT in advance for your help.

Edit : I'm using the version 1.6.0 as far as I couldn't make the v2 work with wordpress...

Expected result

I'm aiming dynamic instances because I just want to present a button that would be able to launch its related instance of lightgallery.

Actual result

The thing is that the code generated seems to be correct (ok, it might not be, but I don't see where I screwed up) but when I click whatever button it's always the same gallery popping up.

Additional context

The two first instances

<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',
                              }
                         ];
                         jQuery('#dynamic2002').on('click', function() {
                              jQuery(this).lightGallery({
                                   hash: false,
                                   dynamic: true,
                                   dynamicEl: gallery2002,
                                   galleryId: 1
                              });

                         });
                    </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',
                              }
                         ];
                         jQuery('#dynamic1964').on('click', function() {
                              jQuery(this).lightGallery({
                                   hash: false,
                                   dynamic: true,
                                   dynamicEl: gallery1964,
                                   galleryId: 2
                              });
                         });
                    </script>
               </div>
          </div>

[sachinchoolur]

Hey @dphermes ,

Looks like you are using lightGallery 1.x syntax. lightGallery 2.x doesn't need jQuery.

Demo - https://www.lightgalleryjs.com/demos/dynamic-mode/
Docs - https://www.lightgalleryjs.com/docs/dynamic-variables/

The below code snippet should work fine.

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

Let me know if you face any issues

[sachinchoolur]

Ok. I just saw the edits. Code looks good to me.

I've created a codepen demo with 1.x - https://codepen.io/sachinchoolur/pen/qryByV

I highly recommend you to use 2.x. If you can tell me what error you are getting with 2.x, I'll try to provide a solution

[dphermes]

Hum... Actually I decided to use the 1.6.0 version as far as the code is generated in php and my id variables and images urls are pushed with php in the script tags of my wordpress template php file :

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

The thing is that I get ReferenceError: Can't find variable: lightGallery error doing so with the 2.x

I'll check your codepen demo right now ;) Thanks

[dphermes]

I made ReferenceErrors disappear with v2.x
Still launching the same gallery though...
Gallery's here if you want to have a look... I try to launch it by clicking the button containing id (like 2002) in the grey area of my slider (under pictures or YT videos)

[sachinchoolur]

This is happening because none of the other buttons are clickable as the "2002" button is always on top of all other buttons.

Adding the blow CSS solves the issue

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

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

[dphermes]

Ho... How could I not see that? I'm supposed to be good with CSS. I feel dumb... Ha ha!
Thanks a lot for your help, and for having responded so fast ;)

[sachinchoolur]

Glad it helped 😊