带有lightgallery插件的javascript中图像的动态路径

如何解决带有lightgallery插件的javascript中图像的动态路径

我正在处理一个工艺 cms 项目，我想制作一个画廊块，作为工艺条目添加。在做了一些研究之后，我试图用 Lightgallery 插件的动态模式来做。问题在于，在动态模式下，图库的源和缩略图都在 javascript 中定义，例如。

$(document).ready(function () {
  $(".dynamic").on("click",function (e) {
    $(document).lightgallery({
      dynamic: true,dynamicEl: [
        {
          src: "",thumb: ""
        },{
          src: "",thumb: ""
        }
      ]

直到现在，当我用这个插件做画廊时，我一直在使用 html 结构和 for 循环，就像这样：

{% for image in entry.xxxx.all() %}
  <a href="{{image.url}}">
     <img src="{{image.url}}">
   </a>
{% endfor %}

链接到 codepen 以获取该想法的一些图像 https://codepen.io/Snopek/pen/zYwNxgL

任何想法如何将这两者结合在一起？

感谢帮助

解决方法

您需要将图像列表传递给 JavaScript，以便在灯箱初始化函数中访问它。有多种方法可以做到这一点。例如，您可以使用 {% js %} 标记向包含编码数据的页面添加一些 JavaScript 代码。或者使用 json_encode filter 将数据作为 data attribute 添加到 HTML 元素，并在 JavaScript 代码中使用 JSON.parse 来解析编码的 JSON 字符串。

这是一个很好的article on passing data from Twig to JavaScript。