Lightgallery: Multiple dynamic instances
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>
dphermes
All 7 comments
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
on 9 Jul 2021
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
sachinchoolur
on 9 Jul 2021
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
on 9 Jul 2021
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)
dphermes
on 9 Jul 2021
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;
}
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 ;)
dphermes
on 10 Jul 2021
Glad it helped 馃槉
sachinchoolur
on 10 Jul 2021
Related issues
sourav54321
路
6Comments
Jeonghyun-Kim
路
3Comments
hokutonanto
路
7Comments
preliot
路
3Comments
andrew--r
路
3Comments