如何在PhotoSwipe 5 UI-Elements中获取当前图片的数据源URL？

核心实现逻辑 #

PhotoSwipe 5内置了getCurrentItem()方法，可直接获取当前处于活跃状态的图片项，从中就能提取对应的数据源URL。

基础代码示例 #

假设你已完成PhotoSwipe实例的初始化，以下是获取当前图片URL的函数：

// 假设PhotoSwipe实例存储在变量ps中
function getCurrentImageUrl() {
  const currentItem = ps.getCurrentItem();
  if (currentItem) {
    // src对应初始化时传入的图片数据源中的URL字段
    // 若你的数据源用了其他字段名（如originalUrl），替换为对应字段即可
    return currentItem.src;
  }
  return null;
}

// 调用示例
const currentUrl = getCurrentImageUrl();
if (currentUrl) {
  console.log('当前图片URL:', currentUrl);
} else {
  console.log('无活跃图片项');
}

自定义UI元素场景下的使用示例 #

如果要在自定义UI组件（比如按钮）的事件中获取当前图片URL，可参考以下代码：

// 初始化PhotoSwipe实例
const ps = new PhotoSwipe({
  gallery: '#my-gallery',
  children: 'a',
  // 其他配置项...
});

// 给自定义按钮绑定点击事件
document.getElementById('get-url-btn').addEventListener('click', () => {
  const currentItem = ps.getCurrentItem();
  if (currentItem) {
    alert('当前图片URL: ' + currentItem.src);
  }
});

ps.init();

注意事项 #

• 必须在PhotoSwipe完成初始化（调用ps.init()）之后，再调用getCurrentItem()，否则可能返回null。
• 若你的图片数据源URL字段不是src，比如初始化时用的是data-original属性，需调整为currentItem.data.original或你自定义的字段名。

内容的提问来源于stack exchange，提问作者Monpelaud