Blueberry (Image slider) and YouTube video working in harmony

Do what needs to be done

We recently launched a new home page and the designed used a responsive image slider called Blueberry. Well there were a few issues with navigation and I needed to be able to make sure to have the slider start to slide automatically and then stop while playing a YouTube video.

I need to fix the problem with navigation causing a speed up and unreliable timing while showing slides. I extended it to support being stopped and started. Since the project appears to be on hiatus (no changes in a year even though it has a few github issues), I forked it on github to fix the event issue and add the ability to stop/start slider.

Blueberry + YouTube sitting in a tree

I found it to be a bit of challenge to update the site to support pausing the image slider when the YouTube video that is linked in through iframe started and stop being played. I found to get the correct permissions and callback into the player I needed to use the YouTube iFrame Player API. (thank you Google)

To setup the Blueberry slider, there is some basic html
(and css see: https://github.com/lecar-red/Blueberry/blob/master/index.html).

Here is a blurb of html


Next is the Javascript code to setup the slider:

$(function() {
  $('.blueberry').blueberry({hoverpause: true});
});

Now the image slider will start up showing images (and YouTube video).

Next comes dropping in the YouTube API, plus adding in the callback controls. The following snippet of JS code contains all of the code needed to start and stop slider when video is played and stopped by user. I'll explain it in the following sections.


1. The first closure is to load the youtube js API script. 

2. onPlayerStateChange is a function that is called each time the player changes state, it is passed an event object with what type of change occurred see the details in the YouTube API Docs.  

2a. This code will pause the slider when the video is playing (when event type is PLAYING). 

2b. When data event is type is PAUSED or ENDED restart slider. The Blueberry slider's code will restart the timeout interval at start and stop so it won't necessarily change right away. I could see expanding this code to only start when the video was ended in our case it wasn't required.

3. Create new API object and save player to global object (this could be done a bit cleaner by storing in a global object or something else - exercise for the reader :)

Once I waded through the various APIs, browser cross domain restrictions and code patches. The end solution wasn't too bad. The above YouTube API code could be used with any slider or carousel.

__END__

Comments

  1. olathewaageNovember 8, 2022 at 10:07 PM

    Sometimes the gang closed the places of work and moved them to another location find a way to} escape the police and remain uncovered. The police expect to uncover different unlawful playing operations within the close to future. Fueling the income growth of foreigner-only casinos are Japanese vacationers, in accordance with the Korea Casino Association. The casinos section was the sector's most lucrative in 2019, with total gross gaming win of $2.5bn, equivalent to 30.9% of the sector's overall value. It is only a few casinos that exist in resorts in Jeju Island, Incheon, and Seoul. However, varieties of|these type of|most of these} casinos 메리트카지노 are only open to foreigners and not residents of South Korea in accordance with the Tourism Promotions Act.

    ReplyDelete

Post a Comment

Popular posts from this blog

Changing Dancer::Plugin::Ajax's content type

Dancer does lots of great things. It has a nice clean way to define routes to handle AJAX routes using the plugin Dancer::Plugin::Ajax . ajax routes are defined in a clear way: ajax '/stuff' => sub { # do work and return }; This plugin technique allows for clear way to separate between ajax and other types of actions for the same route. ajax '/stuff' => sub { # do ajax-y stuff here }; get '/stuff' => sub { # handle html response }; Unfortunately, the one negative with Dancer::Plugin::Ajax is that is assumes all responses will be XML. A quick fix is to manually set the content type in each ajax handler. ajax '/stuff' => sub { content_type('application/json'); # do work }; or add set it as a general option in your main before hook or in each prefix route handler like: package WebApp; hook before => sub { if ( request->is_ajax ) { content_type('application/json'); } }; ...
Read more

BootstrapX clickover

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse...
Read more

2 ways to get SQLite to put dates into columns

2 ways to get SQLite to put dates into a column. insert into mytable values( null, datetime('now') ); insert into mytable values( null, strftime('%s', 'now')); The first one inserts a row somewhat like this: 1|2009-03-10 18:47:46 The second inserts an unix timestamp: 2|1236711411 It might be best to use that unix timestamp with an integer column type for dates since SQLite doesn't support a datetime one. It makes comparisons and ordering much easier: select * from dt where lu > strftime('%s', '2009-03-10'); Output of: id|lu 6|1236643200 2|1236711411 3|1236711516 4|1236711518 5|1236711519 But the formatting is pretty ugly. :-/ Hey what about formatting it within the select with the SQLite datetime function: select id, datetime(lu, 'unixepoch') lu from dt order by lu; id|lu 6|2009-03-10 00:00:00 2|2009-03-10 18:56:51 3|2009-03-10 18:58:36 4|2009-03-10 18:58:38 5|2009-03-10 18:58:39 Better but having to add that to each select is kin...
Read more