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

Question

我正在 craft cms 中做一个项目，我想制作一个画廊块，将其添加为 craft 中的条目。在做了一些研究之后，我试图用 lightgallery 插件的动态模式来做到这一点。问题是在动态模式下，图库的来源和缩略图都在 javascript 中定义为 ex.

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

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

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

Link 到 codepen 为您获得想法的一些形象 https://codepen.io/Snopek/pen/zYwNxgL

有什么想法可以将这两者结合起来吗？

谢谢帮助

Answer 1

您需要将图像列表传递给 JavaScript 以便在灯箱初始化函数中访问它。有多种方法可以做到这一点。例如，您可以在 JavaScript 代码中使用 {% js %} tag to add some JavaScript code to your page that contains the encoded data. Or use the json_encode filter to add the data to your HTML element as a data attribute and use JSON.parse 来解析编码的 JSON-string。

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

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

Dynamic path for images in javascript with lightgallery plugin

javascript

twig

craftcms