Javascript blueimp Gallery-lightbox-为图像和HTML5视频定制

我们正在使用blueimp作为我们的图库，并且已经成功地实现了滑块，使用下面的方法显示具有多个源的图像和html5视频

下面是div层：

<div id="blueimp-video-carousel-gallery" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel " data-start-slideshow="false">
 <div class="slides"></div>
 <h3 class="title"></h3>
 <a class="prev">‹</a> 
 <a class="next">›</a>
 <p class="description"></p>
</div>

接下来，我们希望实现lightbox，因此尝试了以下方法：

<div id="links" class="links"></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>

';
//形象
linksContainerData+=''；
//后循环
$（linksContainer）.append（linksContainerData）；

这适用于图像，但无法加载视频。我们希望能够使用lightbox，但在滑块中可以播放HTML5 HLS和MP4视频

我相信可以使用onOpen和onSlide事件回调，我们可以从jascript数组访问数据，但我不确定如何定制

是否可以指定一个div层而不是“a”标记，以便滑块使用自定义div层

非常感谢您提供的任何指导

问候,，

---

J

我能够让灯箱与一个onClick一起工作，该onClick通过一个条目打开旋转木马，并与图像和视频一起工作；视频在hls中播放，mp4后退

我通过以下链接找到了解决方案： （见资料来源） （注意：全局单击处理程序）

所以我最终得到了这个函数：

$(document).on('click', '[data-gallery]', function(event) {
    var id = $(this).data('gallery');
    var widget = $(id);
    var selected_media_id;
    var media_id;
    var obj;
    selected_media_id = widget.selector;
    console.log("objArr.length-->"+objArr.length);
    for (i=0; i<objArr.length; i++) {
    obj = objArr[i];
    if (selected_media_id == obj['title']) {
        break;
    }
    }
    return blueimp.Gallery([obj], { container : '#blueimp-gallery', carousel : true});
});

循环遍历前面提到的构建的数组，然后使用数组中的单个对象初始化#blueimp gallery[obj]。没赶上火车使我有点难受

现在，灯框中的onclick通过一个带有x的条目打开模态，该条目现在可以正常工作了。对于视频，它以海报背景和播放图标打开，在Mac Safari中播放hls，在chrome中播放mp4

视频控件不是很好（基本的播放器控件），还有改进的余地，但这是我想要实现的基本功能

希望这有帮助

---

-J

我还没有找到解决方案，所以我可能会离开蓝精灵画廊，至少在lightbox。blueimp基于我在这里找到的swipejs，所以这可能也是一个选项。[link]（）我确信可以修改blueimp来处理这种情况，但我受到时间限制。希望大家在发布的代码中找到一些价值。谢谢，J

var linksContainer = $('#links');
var linksContainerData='';

//omitted for brevity
//video
linksContainerData +='<a href="'+_media_url+'" title="..." data-gallery="" class="blueimp-gallery-thumb-anchor"><img src="'+_media_thumbnail+'" ></a>';

//image
linksContainerData +='<a href="'+_media_url+'" title="..." data-gallery="" class="blueimp-gallery-thumb-anchor"><img src="'+_media_thumbnail+'" ></a>';

//after loop
$(linksContainer).append(linksContainerData);

$(document).on('click', '[data-gallery]', function(event) {
    var id = $(this).data('gallery');
    var widget = $(id);
    var selected_media_id;
    var media_id;
    var obj;
    selected_media_id = widget.selector;
    console.log("objArr.length-->"+objArr.length);
    for (i=0; i<objArr.length; i++) {
    obj = objArr[i];
    if (selected_media_id == obj['title']) {
        break;
    }
    }
    return blueimp.Gallery([obj], { container : '#blueimp-gallery', carousel : true});
});

data-gallery="identifier"