时间戳

首页 > 解决方案 > 带有lightgallery插件的javascript中图像的动态路径

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

问题描述

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

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

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

谢谢帮助

标签： javascripttwigcraftcms

解决方案

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

这是一篇关于将数据从 Twig 传递到 JavaScript 的好文章。

推荐阅读