Question

我正在尝试使用Blue Imp Gallery渲染图像轮播，但我希望图像按需加载。我的问题是在示例中，图像URL被用于检索图像。

在我的场景中，我有一个缩略图库，这些缩略图是从字节数组字符串呈现的：

ASP.NET MVC剃刀

<div id="links" class="lightboxGallery">
    @foreach (var image in Model)
    {
        var imgSrc = $"data:image/{image.Extension};base64,{image.Image}";
        <a data-gallery style="padding: 5px;">
            <img src="@imgSrc" />
        </a>
    }
</div>

<div id="blueimp-gallery" class="blueimp-gallery">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

JS

document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};

当用户单击图像以加载轮播时，理想情况下，我想去检索字节数组字符串并在轮播中呈现该图像，但是我不确定如何使用此库来实现。

我之所以选择这个库是因为据说它支持“按需内容加载”，因此我假设我也可以选择在轮播中请求图像的方式来检索图像，但是我看不到任何示例。该库的Github documentation。

我不想使用URL，因为图像只能锁定那些有权查看图像的用户。

我确实看到有可用的事件回调。这些可以用于通过AJAX检索每张图像吗？

事件回调

var gallery = blueimp.Gallery(
    linkList,
    {
        onopen: function () {
            // Callback function executed when the Gallery is initialized.
        },
        onopened: function () {
            // Callback function executed when the Gallery has been initialized
            // and the initialization transition has been completed.
        },
        onslide: function (index, slide) {
            // Callback function executed on slide change.
        },
        onslideend: function (index, slide) {
            // Callback function executed after the slide change transition.
        },
        onslidecomplete: function (index, slide) {
            // Callback function executed on slide content load.
        },
        onclose: function () {
            // Callback function executed when the Gallery is about to be closed.
        },
        onclosed: function () {
            // Callback function executed when the Gallery has been closed
            // and the closing transition has been completed.
        }
    }
);

感谢您阅读：D

灯箱图库-通过AJAX按需加载图像

0 个答案: