blueimp Gallery - 灯箱 - 自定义图像和 HTML5 视频

Question

我们在画廊中使用 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>

这是填充滑块的 for 循环的片段：

if (_media_type == 'video') {
    item['title'] = "title";
    item['type'] = "video/*";
    item['poster'] = media_thumbnail;
    item['description'] = "description";
    item['sources'] = [{href: _media_url_hls, type: "application/x-mpegurl"}, {href: _media_url_web, type: "video/mp4"}];
} else {
    item['title'] = "title";
    item['type'] = "image/jpeg";
    item['poster'] = media_thumbnail;
    item['description'] = "description";
}
objArr.push(item); 

//// omitted for brevity

blueimp.Gallery(objArr, { container: '#blueimp-video-carousel-gallery', carousel: 'true', preloadRange: 2, transitionSpeed: 400});

接下来我们想要实现灯箱，因此我们尝试了以下操作：

<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>

javascript for 循环：

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);

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

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

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

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

问候，

Answer 1

我能够让灯箱与 onClick 一起使用，通过单个条目打开轮播并处理图像和视频；视频以 hls 格式播放，并带有 mp4 后备。

我在这些链接的帮助下找到了解决方案： https://blueimp.github.io/Gallery/（参见源代码） https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.js（注意：全局点击处理程序）

所以我最终得到了这个功能：

$(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"

并循环遍历前面提到的构建的数组，然后使用数组 [obj] 中包含的单个对象初始化 #blueimp-gallery。 缺少 [] 让我有点困惑。

现在灯箱中的 onclick 会打开模态框，其中包含一个带有 x 的条目以关闭，目前效果很好。 对于视频，它会以海报背景和播放图标打开，并在 Mac Safari 中播放 hls，在 Chrome 中播放 mp4。

视频控件不是很好（基本的播放器控件），并且还有改进的空间，但这已经是我想要实现的基础了。

希望这有帮助。

-J

Answer 2

我有一个滑块，当您单击照片时，照片会在灯箱中打开，对于视频，我通过在更改幻灯片时用

img

替换

video

标签解决了这个问题

 $(document).on('click', '[data-gallery]', function(event) {
    const list = $('a[data-gallery]');
    const index = $(this).data("index");
    let prevVideo = null;

    function onClickVideo(){
      const video = this;
      const isVideoPlaying = !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);      

      isVideoPlaying ? video?.pause() : video?.play();
    }

    Gallery(
      list,
      {
        videoContent: true,
        carousel: false,
        index,videoPlaysInline: true,
        onslide: function (indexSlide, slide) {
          prevVideo?.trigger?.('pause');
          prevVideo?.off?.('click',onClickVideo);
          const video = $('video', $(list[indexSlide])).clone();
          video.on('click',onClickVideo)
          $(slide).removeClass('slide-loading');
          $(slide).removeClass('slide-error');
          $(slide).html(video);
          prevVideo = video;
          $(video).attr('autoplay', true);
          $(video).attr('playsinline', true);
          $(video).attr('controls',true);
          $(video).attr('poster', "");
          $(video).css({
            width:"100%",
            height:"100%"
          });
          video[0].play();
        },
      }
    );
  })