如何让你的Lightbox支持滚轮缩放及Base64图片

下面是让Lightbox支持滚轮缩放及Base64图片的完整攻略。

1. 支持滚轮缩放

1.1 将Lightbox更新至最新版

首先，要确保你使用的Lightbox插件版本是最新的。因为较老的版本可能没有支持滚轮缩放的功能。

1.2 加载Mousewheel插件

在启用Lightbox之前，你需要先引入mousewheel插件。该插件可以让Lightbox支持滚轮缩放。

<link rel="stylesheet" type="text/css" href="path/to/lightbox.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/mousewheel.min.js"></script>
<script src="path/to/lightbox.min.js"></script>

1.3 启用Lightbox

在加载完必要的文件后，你需要启用Lightbox，并初始化mousewheel插件。需要注意的是，如果你使用的是CDN方式加载Lightbox，可能需要修改对应的路径。

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox({
        //其他参数
        onShown: function() {
            $(document).on('mousewheel DOMMouseScroll', '.ekko-lightbox-container .ekko-lightbox-img', function(e) {
                var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
                this.width += (delta < 0 ? -10 : 10);
                e.preventDefault();
            });
        }
    });
});

在此设置中，我们为onShown回调函数中的lightbox容器的img元素绑定了mousewheel和DOMMouseScroll事件。这里的回调函数中的this对象指的是当前的img元素。在该事件中，我们检测用户滚动的方向（delta变量），并对当前的img元素的宽度进行增减操作，以模拟出缩放效果。

1.4 示例

下面是一个基于Bootstrap的范例，展示如何在图片上启用Lightbox及缩放功能。

<div class="row">
  <div class="col-md-4">
    <a href="path/to/image/big-image-1" data-toggle="lightbox">
      <img src="path/to/image/small-image-1" alt="">
    </a>
  </div>
  <div class="col-md-4">
    <a href="path/to/image/big-image-2" data-toggle="lightbox">
      <img src="path/to/image/small-image-2" alt="">
    </a>
  </div>
  <div class="col-md-4">
    <a href="path/to/image/big-image-3" data-toggle="lightbox">
      <img src="path/to/image/small-image-3" alt="">
    </a>
  </div>
</div>

2. 支持Base64图片

如果你希望Lightbox能支持Base64格式的图片，你需要进行如下操作。

2.1 修改Lightbox源代码

首先，找到你的Lightbox插件源代码中下面这行代码：

imageSrc = $element.attr('href');

在该行代码之前插入如下代码：

if (!/^https?:\/\//.test(imageSrc) && !/^[a-z]+:\/\//i.test(imageSrc)) {
    imageSrc = 'data:image/png;base64,' + imageSrc;
}

在上方代码中，我们在检查imageSrc是否是http|https协议和以某种协议开始的情况下，添加了一个正则表达式，用于检查imageSrc是否是一个Base64格式的图片。

2.2 示例

下面是一个范例，以示说明如何在Base64格式的图片上启用Lightbox。

<a href="iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcCBBQP6tzgQQAAAgBJREFUWMPt2TEOComQx3/3feCSFlER3EUvIRC9URIbeCkXEfUqxZ/yDWfVeE7b7Y+wQHB+dpa73OvZt8ns9TwrJ/z7zvznd/DLzE5zMnX5O5/c+f60Fm7riY8BpP5azGt+5VSicYQgQYUKHBkGeeO+6jlDKBQjgJkW/sKdP+Gy+ouzzMBnw9k+slKWiD3CJcqSWyKG3PId0L1EroNXAl8GFolCx+KPxYMjqFO8V1DKjNRwLIIWrFjhnCdBDbOXWaMzUhvlCq7ZkewH6H4WPq5wVjLZQrTkeThVB5JXlzsOkbTCfTJ8TVcy+J1M3NTNdSoOkiL6lWXM3iF1oJWGAGOMCgLWMOLZZ3EZN1BMoF7fFTrBR+vWk7ddupYnHt6qjR0yelvKHTmcN0QaI/kE8Lu57/NTGsZqMczWdufCYsCB/UK8vyQeCJ32tOWg1hgPF6AbpXH1DmD5r/wfgGcKkx1P7QAAAABJRU5ErkJggg==" data-toggle="lightbox"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAADLlA34AAACEklEQVR4nGP8z8AaXRr2/3+/fvn0t/x+Fltb389QXQBeVDq2Kir5c+J9589d3h34/+/uz5nZ+rJbhU8Xv43cv8bHW/fPe5zc69h3r1tz9unvgcnKttjPz8+njcVuyum971Qh4HsAK0JBsYFfS7L+pUkudjDfAgF7dvzL4fyfzC8n46cBTsOkU9ow6gJn+iWsHGpZ9O+8Qc3hvaJEW5AWAGeBqGLiL/aP3wFk1QkjpZHu58kp9yNZXuB3mkfn0IlLmG+r5vLBMfnV2/uR47X4tbl3zprCFn8K9fUz6yHP9OVgaQZDO7+GpPC9t3YadBbNxLQEmzoz/4nq/gcMSMUs9DphDn9wPJLGhwmZdbBNzcJL1O33YGZIzALEM7LBOIZvSPFieAqAWtUdqKoG3HyH8mnwNBviOxX34B5TPZmoJgemss/c6am7S7AycWW2MnKpg8h1XB7/JKVbvpHTJlb/dPLwUd40wBxCX4hDvi8k3wfuBkH7Gl0Y7GJ4L/TABwRp7R4x9SmZy1IW2ZJm8C+udv2fL7tb71g7yEMTx4VMJbCD5MsB1sSf2wrZrAoDH3pg+IjD79lNztEZJDgG2yR8IMRqxvptbL5Ubf4HJPbswZA6Fcbh3vi0CXHATFBb4+FZS7CmbRgYq/UNXlZf1yfYYB9rOHmvBOwbZX8wAAAABJRU5ErkJggg=="></a>

在上面的例子中，我们在图片的href属性中使用了一个Base64编码的字符串。当用户点击缩略图时，就会自动在Lightbox中打开该Base64图片。