Галерея blueimp – лайтбокс – настройка для изображений и видео HTML5 ⇐ Jquery

[Anonymous]

Мы используем blueimp для нашей галереи и успешно реализовали слайдер для отображения как изображений, так и видео в формате HTML5 из ​​нескольких источников, используя описанный ниже подход.

Вот 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});

Далее мы хотели реализовать лайтбокс, поэтому попробовали следующее:

Код: Выделить всё

‹
›
×

[list][/list]

Javascript для цикла:

Код: Выделить всё

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

//omitted for brevity
//video
linksContainerData +='';

//image
linksContainerData +='';

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

Это работает для изображений, но не загружает видео. Мы хотели бы иметь возможность использовать лайтбокс, но в слайдере можно будет воспроизводить видео HTML5 HLS и MP4.

Я считаю, что обратные вызовы событий onOpen и onSlide могут быть используется, мы можем получить доступ к данным из массива jascript, но я не уверен, как это настроить.

Можно ли указать слой div вместо 'a ', чтобы слайдер использовал собственный слой div?

Мы будем очень признательны за любые предоставленные вами рекомендации.

С уважением,
Дж

Подробнее здесь: https://stackoverflow.com/questions/355 ... tml5-video