{"action":"created","issue":{"url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/230","labels_url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/230/labels{/name}","comments_url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/230/comments","events_url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/230/events","html_url":"https://github.com/cuny-academic-commons/cbox-theme/pull/230","id":58906850,"number":230,"title":"Enable bxSlider API","user":{"login":"christianwach","id":726936,"avatar_url":"https://avatars.githubusercontent.com/u/726936?v=3","gravatar_id":"","url":"https://api.github.com/users/christianwach","html_url":"https://github.com/christianwach","followers_url":"https://api.github.com/users/christianwach/followers","following_url":"https://api.github.com/users/christianwach/following{/other_user}","gists_url":"https://api.github.com/users/christianwach/gists{/gist_id}","starred_url":"https://api.github.com/users/christianwach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/christianwach/subscriptions","organizations_url":"https://api.github.com/users/christianwach/orgs","repos_url":"https://api.github.com/users/christianwach/repos","events_url":"https://api.github.com/users/christianwach/events{/privacy}","received_events_url":"https://api.github.com/users/christianwach/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-02-25T14:12:11Z","updated_at":"2015-03-04T10:44:56Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/pulls/230","html_url":"https://github.com/cuny-academic-commons/cbox-theme/pull/230","diff_url":"https://github.com/cuny-academic-commons/cbox-theme/pull/230.diff","patch_url":"https://github.com/cuny-academic-commons/cbox-theme/pull/230.patch"},"body":"I've been making progress with #207 for a client project but can't get the bxSlider API to function without the changes to the way it's being initialised. When inited with `auto = true`, subsequent calls to `startAuto()` and `stopAuto()` fail silently, so this PR issues `startAuto()` directly after the slider init. This does not change how the slider behaves, but does enable starting and stopping the slideshow via code.\r\n\r\nThe PR also introduces a global scope variable `cbox_slider` which is the slider instance because there are no methods of retrieving the bxSlider instance in its API. This variable means that the slider can be addressed and controlled externally, which is necessary for making it play better with videos.\r\n\r\nAt present, I have only got the slider to work better with YouTube videos, but it looks like it's possible to do this with Vimeo too. Here's how to get things working...\r\n\r\nIn 'functions.php' or in a plugin, add the following filter which enables the YouTube API on the videos that are embedded in the slider:\r\n\r\n```php\r\n/**\r\n * Filter YouTube URL to enable API\r\n */\r\nfunction my_wp_embed_handler_youtube( $html, $url, $attr, $post_ID ) {\r\n\t// do we have an oembed?\r\n\tif ( false !== strpos( $html, 'feature=oembed' ) ) {\r\n\t\t// enable YouTube API on video\r\n\t\t$html = str_replace( 'feature=oembed', 'feature=oembed&enablejsapi=1', $html );\r\n\t}\r\n\treturn $html;\r\n}\r\nadd_filter( 'embed_oembed_html', 'my_wp_embed_handler_youtube', 10, 4 );\r\n```\r\n\r\nNext, enqueue the following Javascript on the homepage:\r\n\r\n```js\r\n// load YouTube Frame API\r\n(function() { // closure, so as not to leak scope\r\n\tvar s = document.createElement(\"script\");\r\n\ts.src = (location.protocol == 'https:' ? 'https' : 'http') + \"://www.youtube.com/player_api\";\r\n\tvar before = document.getElementsByTagName(\"script\")[0];\r\n\tbefore.parentNode.insertBefore(s, before);\r\n})();\r\n\r\n/**\r\n * Define what happens when the page is ready\r\n */\r\njQuery(document).ready( function($) {\r\n\r\n\t/**\r\n\t * Trap clicks on the pager\r\n\t */\r\n\t$('.bx-pager.bx-default-pager').click( function( event ) {\r\n\t\t// stop auto slider\r\n\t\tcbox_slider.stopAuto();\r\n\t\t// pause all videos\r\n\t\t$('.slide-video-embed iframe').each( function() {\r\n\t\t\t$(this).data('player').pauseVideo();\r\n\t\t});\r\n\t});\r\n\r\n    /**\r\n     * Callback for the YouTube API that fires when the API is ready\r\n     */\r\n\twindow.onYouTubeIframeAPIReady = function(){\r\n\t\t// iterate through videos\r\n\t\t$('.slide-video-embed iframe').each( function(){\r\n\t\t\t// create a new player pointer\r\n\t\t\tvar player = new YT.Player( document.getElementById( $(this).attr('id') ) );\r\n\t\t\t// watch for changes on the player\r\n\t\t\tplayer.addEventListener( 'onStateChange', function(state) {\r\n\t\t\t\tswitch( state.data ) {\r\n\t\t\t\t\t// if a video is playing, stop the slider\r\n\t\t\t\t\tcase YT.PlayerState.PLAYING:\r\n\t\t\t\t\t\tcbox_slider.stopAuto();\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t// if the video is paused, start the slider\r\n\t\t\t\t\tcase YT.PlayerState.PAUSED:\r\n\t\t\t\t\t\tcbox_slider.startAuto();\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\t// if the video has finished, go straight to next slide\r\n\t\t\t\t\tcase YT.PlayerState.ENDED:\r\n\t\t\t\t\t\tcbox_slider.goToNextSlide();\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t// store\r\n\t\t\t$(this).data('player', player);\r\n\t\t});\r\n\t}\r\n});\r\n```\r\n\r\nWhat you should see is that playing a YouTube video now pauses the slideshow, whilst pausing it restarts the slideshow. And when a video finishes, the next slide is immediately loaded.\r\n\r\nI'd like to add a number of filters (or one monolithic filter) that allows the bxSlider init in ['engine/includes/feature-slider/setup.php'](https://github.com/cuny-academic-commons/cbox-theme/blob/master/engine/includes/feature-slider/setup.php#L201) to be more adaptable. Thoughts?"},"comment":{"url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/comments/77135038","html_url":"https://github.com/cuny-academic-commons/cbox-theme/pull/230#issuecomment-77135038","issue_url":"https://api.github.com/repos/cuny-academic-commons/cbox-theme/issues/230","id":77135038,"user":{"login":"christianwach","id":726936,"avatar_url":"https://avatars.githubusercontent.com/u/726936?v=3","gravatar_id":"","url":"https://api.github.com/users/christianwach","html_url":"https://github.com/christianwach","followers_url":"https://api.github.com/users/christianwach/followers","following_url":"https://api.github.com/users/christianwach/following{/other_user}","gists_url":"https://api.github.com/users/christianwach/gists{/gist_id}","starred_url":"https://api.github.com/users/christianwach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/christianwach/subscriptions","organizations_url":"https://api.github.com/users/christianwach/orgs","repos_url":"https://api.github.com/users/christianwach/repos","events_url":"https://api.github.com/users/christianwach/events{/privacy}","received_events_url":"https://api.github.com/users/christianwach/received_events","type":"User","site_admin":false},"created_at":"2015-03-04T10:44:56Z","updated_at":"2015-03-04T10:44:56Z","body":"@r-a-y Done. Also removed the redundant and commented-out `auto` option."}}