如何将动态元素附加到在 lightgallery.js 中打开的图像

Question

我有一个显示很多照片的页面，可以用 lightgallery.js

打开

我已经制作了一些自定义的 HTML 标题，效果很好。但现在我想为图像本身添加标签。我该怎么做？

我将展示我的照片页面的示例：

当您打开图片时，它是这样的：

左侧部分是自定义 HTML 标题，我将其链接到此属性：data-sub-html.

我的循环代码示例代码：

$photomasonry .= '
<div class="tile scale-anm noselect">
  <a href="https://studio.website.nl/'.$getphotos['preview'].'" data-sub-html="#caption'.$imgcount.'" class="item masonrytile" data-src="https://studio.website.nl/'.$getphotos['preview'].'">
    <img src="https://studio.website.nl/'.$getphotos['preview'].'"/>
    <span class="idlabel">'.$getphotos['id'].'</span>
    <span class="sizelabel">'.$size.'</span>
  </a>
</div>';
$photomasonry .= '
<div id="caption'.$imgcount.'" style="display:none">
  <img src="https://studio.website.nl/images/logo.png">
  <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
  <div class="gallerypopupbtns">
    <a href="design-magazijn/stockfotos/'.$_GET['alias'].'/'.$getphotos['id'].'"><button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button></a>
  </div>
</div>';
$imgcount++;

但现在我想要这个紫色尺寸的图标（L、XL、XX）作为打开 lightgallery 时图像上的标签。我怎样才能做到这一点？ lightgallery的html仅在页面加载后生成。

我想在这部分添加一个元素：

<div class="lg-img-wrap">
    <img class="lg-object lg-image" src="https://studio.website.nl/images/photos/previews/preview-bb58317c8d05e29b32963e7a295a5b9f.jpg">
</div>

但不仅如此，内容是动态的，因此显示正确图像的正确尺寸。我已经为照片概览页面创建了这个，但不是在单击照片时创建的。

Answer 1

根据 lightgallery docs，您可以使用事件 lgAfterOpen 在图库打开后执行代码。但是，lightgallery 使这有点困难，因为您无法访问从此事件中单击的图像，但您可以从事件 lgBeforeOpen 中访问它。考虑到这一点，我将通过做两件事来实现这一目标。

首先，将大小添加为每个图像的数据属性：

<img src="https://studio.website.nl/'.$getphotos['preview'].'" data-size="'.$size.'"/>

其次，初始化lightgallery时添加如下函数：

// example gallery definition
const lg = document.getElementById('custom-events-demo');
// add the following functions
lg.addEventListener('lgBeforeOpen', (event) => {
  //add datasize property to target so it can be accessed in the afterOpen function
  event.target.dataset.size = event.explicitOriginalTarget.dataset.size;
});
lg.addEventListener('lgAfterOpen', (event) => {
  // get size from data attribute
  var size = event.target.dataset.size;
  // get the .lg-img-wrap div to append size to
  var imgWrap = document.querySelector(".lg-container.lg-show .lg-img-wrap");
  // create and append span
  var sizeSpan = document.createElement("span");
  sizeSpan.classList.add("sizelabel");
  sizeSpan.innerHTML = size;
  imgWrap.appendChild(sizeSpan);
});
//initialise lightgallery
lightGallery(lg);

您可能使用了不同版本的 lightgallery，但是当我测试这个时，.lg-img-wrap 元素是 picture 元素而不是 div，所以我替换了最后一行使用以下事件侦听器函数来获取要显示的大小：

imgWrap.parentElement.appendChild(sizeSpan);

您可能需要一些额外的 CSS 来根据您的意愿定位尺寸跨度，但要让它显示您需要的全部内容是：

.sizelabel {
  position: relative;
}

注意：如果您从 lightgallery 导航到不同的图像，我认为这不会起作用，因为它不会更新尺寸，事实上尺寸可能会被删除。要解决这个问题，您可能需要使用 lgAfterSlide 事件和图像索引来做一些事情，但是从您的屏幕截图来看，您似乎不希望用户无论如何都在 lightgallery 中滚动浏览图像，所以这可能不是问题。

如何将动态元素附加到在 lightgallery.js 中打开的图像

How to append a dynamic element to an image opened in lightgallery.js

html

javascript

css

jquery

lightgallery