javascript - 如何将动态元素附加到在 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 中滚动浏览图像所以这可能不是问题。