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

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图层？

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

此致 J

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

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

1 个答案: