看起来你用的是类似Magnific Popup这类图片弹窗插件（从image-popup类名推测），要给弹窗标题旁加上下载/源链接其实很简单，分几步来实现：

1. 给HTML链接添加下载地址标记 #

首先，在你的<a>标签里添加一个自定义属性（比如data-download-url），用来指定图片的下载地址（如果和图片地址一致，也可以直接复用href的值）：

<div class="product-thumb">
  <a href="images/product-image7.jpg" class="image-popup" title="screenprinting" data-download-url="images/product-image7.jpg">
    <img src="images/product-image7.jpg" class="img-responsive" alt="">
    <div class="product-info">
      <div class="product-item">
        <h3>PRODUCT1</h3>
        <p>Size / Size / Size</p>
      </div>
      <div class="product-price">
        <span>P50</span>
      </div>
    </div>
  </a>
</div>

2. 修改弹窗插件的初始化代码，注入下载链接 #

以最常用的Magnific Popup为例，你需要在初始化插件时，利用它的回调函数来修改弹窗标题，把下载链接插入进去：

$('.image-popup').magnificPopup({
  type: 'image',
  callbacks: {
    // 在解析每个弹窗元素时触发
    elementParse: function(item) {
      // 获取下载地址，优先用自定义属性，没有就用图片本身的地址
      const downloadUrl = item.el.attr('data-download-url') || item.src;
      // 把下载链接拼接到标题后面
      item.title += ` <a href="${downloadUrl}" download class="popup-download-link">下载图片</a>`;
    }
  },
  // 保留你原来的其他配置，比如画廊模式
  gallery: {
    enabled: true
  }
});

3. 可选：美化下载链接样式 #

可以加一点CSS让下载链接看起来更显眼：

.popup-download-link {
  margin-left: 15px;
  color: #2196F3;
  text-decoration: underline;
}

如果用的是其他弹窗插件（比如Lightbox2） #

核心思路是一样的，找到插件提供的弹窗显示回调，修改标题区域的内容：

lightbox.option({
  'onShow': function() {
    const currentImgEl = lightbox.currentImage;
    const downloadUrl = currentImgEl.getAttribute('data-download-url') || currentImgEl.src;
    const captionEl = document.querySelector('.lb-caption');
    if (captionEl) {
      captionEl.innerHTML += ` <a href="${downloadUrl}" download class="popup-download-link">下载图片</a>`;
    }
  }
});

核心逻辑就是：在HTML里标记好每个图片的下载地址，然后利用弹窗插件的回调钩子，在弹窗打开时动态把下载链接插入到标题旁边。

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