I have try lightGallery dynamic mode with subHtml for caption, and its working fine as below :
HTML and JavaScript with subHtml
<!DOCTYPE html>
<html lang="en">
<head>
<title>lightGallery demo</title>
<link href="../dist/css/lightgallery-bundle.css" rel="stylesheet">
<style type="text/css">
body {
margin: 0;
padding: 40px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-success" id="dynamic123">Launch Gallery</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../dist/lightgallery.min.js"></script>
<script src="../dist/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="../dist/plugins/zoom/lg-zoom.min.js"></script>
<script src="../dist/plugins/rotate/lg-rotate.min.js"></script>
<script src="../dist/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script>
const $dynamicGallery = document.getElementById('dynamic123');
const dynamicGallery = lightGallery($dynamicGallery, {
download: false,
plugins: [lgZoom, lgRotate, lgFullscreen],
dynamic: true,
allowMediaOverlap: true,
dynamicEl: [
{
src: 'img/2-1600.jpg',
thumb: 'img/thumb-1.jpg',
subHtml: '<h3>test 1</h3>',
},
{
src: 'img/13-1600.jpg',
thumb: 'img/thumb-13.jpg',
subHtml: '<h3>test 2</h3>',
},
{
src: 'img/4-1600.jpg',
thumb: 'img/thumb-4.jpg',
subHtml: '<h3>test 3</h3>',
}
],
});
$dynamicGallery.addEventListener('click', function () {
// Starts with third item.(Optional).
// This is useful if you want use dynamic mode with
// custom thumbnails (thumbnails outside gallery),
dynamicGallery.openGallery(0);
});
</script>
</body>
</html>
Result : enter image description here
but why it's not working if I implement it with **subHtmlUrl **? With **subHtmlUrl **gallery was appeared but not showing any caption.
I have try below code :
HTML and JavaScript with subHtmlUrl
<!DOCTYPE html>
<html lang="en">
<head>
<title>lightGallery demo</title>
<link href="../dist/css/lightgallery-bundle.css" rel="stylesheet">
<style type="text/css">
body {
margin: 0;
padding: 40px;
}
</style>
</head>
<body>
<button type="button" class="btn btn-success" id="dynamic123">Launch Gallery</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../dist/lightgallery.min.js"></script>
<script src="../dist/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script src="../dist/plugins/zoom/lg-zoom.min.js"></script>
<script src="../dist/plugins/rotate/lg-rotate.min.js"></script>
<script src="../dist/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script>
const $dynamicGallery = document.getElementById('dynamic123');
const dynamicGallery = lightGallery($dynamicGallery, {
download: false,
plugins: [lgZoom, lgRotate, lgFullscreen],
dynamic: true,
allowMediaOverlap: true,
dynamicEl: [
{
src: 'img/2-1600.jpg',
thumb: 'img/thumb-1.jpg',
subHtmlUrl: 'dynamic_caption.php?id=1',
},
{
src: 'img/13-1600.jpg',
thumb: 'img/thumb-13.jpg',
subHtmlUrl: 'dynamic_caption.php?id=2',
},
{
src: 'img/4-1600.jpg',
thumb: 'img/thumb-4.jpg',
subHtmlUrl: 'dynamic_caption.php?id=3',
}
],
});
$dynamicGallery.addEventListener('click', function () {
// Starts with third item.(Optional).
// This is useful if you want use dynamic mode with
// custom thumbnails (thumbnails outside gallery),
dynamicGallery.openGallery(0);
});
</script>
</body>
</html>
PHP Script : dynamic_caption.php
<?php
$id = $_GET['id'];
switch($id){
case 1:
echo '<h3>test 1</h3>';
break;
case 2:
echo '<h3>test 2</h3>';
break;
case 3:
echo '<h3>test 3</h3>';
break;
default:
echo '<h3>test 0</h3>';
break;
}
?>
Result : Gallery successfully show up but not showing any caption, when push next button, XHR request success as below : enter image description here
I expecting the caption will showed up as using subHtml
Any help is greatly appreciated. Thankyou
