Home > javascript > blueimp Gallery - lightbox - customize for images and HTML5 video

blueimp Gallery - lightbox - customize for images and HTML5 video

January 12Hits:1
Advertisement

We're using blueimp for our gallery and have successfully implemented the slider to show both images and html5 videos with multiple sources using the approach below

Here is the div layer:

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

Here is a snippet of the for loop that populates the slider:

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

Next we wanted to implement the lightbox so we tried the following:

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

This works for images but fails to load the videos. We'd like to be able to use the lightbox but in the slider be able to play HTML5 HLS and MP4 videos.

I believe the onOpen and onSlide event callbacks could be used, we can access the data from a jascript array, but I'm not sure how to customize.

Is it possible to specify a div layer instead of the 'a' tag so the slider uses a custom div layer?

Any guidance you an provide is greatly appreciated.

Regards, J

Related Articles

  • blueimp Gallery - lightbox - customize for images and HTML5 videoJanuary 12

    We're using blueimp for our gallery and have successfully implemented the slider to show both images and html5 videos with multiple sources using the approach below Here is the div layer: <div id="blueimp-video-carousel-gallery" class="b

  • 5 HTML5 Video jQuery Plugins

    5 HTML5 Video jQuery PluginsDecember 3

    Embedding videos using HTML5 could never be easier with these HTML5 Video jQuery Plugins. They use the awesome jQuery and HTML5 video/audio players, lightweight, easy to use and they have lots of options for customization. Enjoy! 1. FitVid JS A light

  • HTML5 video update bar - clicking on the bar doesn't workJanuary 14

    I am following a YouTube tutorial for a HTML5 video player tutorial. The feature where you click on the progress bar and it plays from where you've clicked, doesn't seem to work. I have an error "TypeError: e is undefined". I'm not 100% sure why

  • H.264 Is Royalty-Free: Will it Become the HTML5 Video Standard?September 2

    MPEG LA, the group that licenses the H.264/AVC codec, has announced that web streaming of video files encoded using the format is free. The group had previously stated it would remain royalty-free until 2016, but that deadline has been lifted. MPEG L

  • HTML5 Video DimensionsNovember 8

    I'm trying to get the dimensions of a video of which I'm overlaying onto a page with javascript, however it is returning the dimensions of the poster image instead of the actual video as it seems it's being calculated before the video is loaded. Any

  • Encoding settings for HTML5 videoNovember 23

    What is the best, free way to encode video for the new HTML5 video in browsers. I want to encode video in WebM, H264 and Ogg. I have looked at FFMPeg and it seems to be able to do it all but the commands to do it with good quality can be fairly crypt

  • How to play wmv files in html5 video playerDecember 16

    Please tell me, is there any way to play .wmv files using html5 video player. --------------Solutions------------- There is no way. No browser (currently, if ever) supports playing wmv files. You will have to convert it into a format that browsers kn

  • HTML5 Video and JavaScript

    HTML5 Video and JavaScript February 17

    Does anyone know what event or property I need to query in order to get a percentage figure of the amount an HTML5 video has loaded? I want to draw a CSS styled "loaded" bar that's width represents this figure. Just like You Tube or any other vi

  • How to download html5 videos?

    How to download html5 videos?April 9

    how do i download html5 videos in ubuntu? --------------Solutions------------- Depends on the site. Firefox has context menus for saving html5 video, but they don't work if the site uses a customized player. For example, if you visit http://www.mozil

  • How to enable fullscreen on HTML5 video? June 18

    I am working on HTML5 video tags, but I am not getting any options for full screen. I know it can be done with jQuery or JavaScript, but I'm not too sure how.

  • Suppressing iPhone's native video player when playing HTML5 videoSeptember 2

    on iPhone, when you have an HTML5 video tag on a web site and you click play it will open the iPhone's native video player and play the video there (unlike on the iPad where it will play the video in the on-site HTML5 video player). Is there a way of

  • Using HTML5 Video and Audio in Modern Browsers

    Using HTML5 Video and Audio in Modern BrowsersOctober 25

    Previously I showed you some of the cool stuff you can do when you're working with canvas. One area I touched on briefly was the video and audio tag and how to manipulate them from the canvas. Aside from the canvas, the video and audio tags provide t

  • No sound in HTML5 videoNovember 2

    I'm embedding an ogg video in a webpage using the html5 video tag, but it plays without sound. The code I'm using is <video width="320" height="240" controls="controls"> <source src="avideo.ogg" type="

  • HTML5 Video vs. HTML VideoJanuary 14

    Nowadays, designers and developers have several options for integrating video into a web page. You can design your own video player, use free widgets, embed YouTube video code or buy a fancy flash pop-up player. There are many forms, shapes and layou

  • Protecting HTML5 video February 15

    I shall explain my situation as best I can so you can see where i'm coming from. I'm working on a wordpress site for a sports team, there are loads of teams. We want to put coaching sessions on our site. This is so that all the coaches can see how th

  • RTMP alternative for Streaming on HTML5 video player?March 7

    I have a CDN with Level3 via VPS.net. Anyway to use this CDN with html5 video players. The support people say it can only be used via RTMP, and RTMP seems to be flash only. I want to give the ability for the video to be viewed on mobile, and download

  • What do you need to know about HTML5 videoMay 12

    HTML5 keeps on stunning the Internet community with revolutionary web features. One of the key HTML5 enhancements is the advanced video support. With a new HTML5 standard, users don't need any special plugins to stream video in web browsers both on P

  • HTML5 Video RTSP Live Streams

    HTML5 Video RTSP Live StreamsJune 9

    I was doing some research on playing RTSP Live Video Streams using HTML5 and it seems RTSP/RTMP formats are currently not supported by HTML5. This is how you might use HTML5 to display a normal video. //HTML5 Video Tag $("#fms").html(''); So you

  • HTML5 Video Only Plays Back at fast speed on Ubuntu/LinuxJune 22

    Every html5 video I try to play online plays at double/1.5x speed (very useful when trying to fastforward through a video, not great otherwise). I can slow it down to half speed (e.g. on YouTube HTML5 player), but can't get it back to normal. The wei

  • Streaming protocoll for HTML5-videoJuly 2

    Is there a universal streaming protocoll that both, Android and iOS devices can play, within HTML5 video objects? It looks like even HTML5 could not "force" a universal solution to simplify publisher's work. --------------Solutions-------------

Copyright (C) 2018 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.813 s.