Develop Reference

Convert slider/carousel to pager while switching from Desktop to Mobile View

I have created a slider/carousel like the one below on left - Desktop view.
I would like it to be switching to Pager based slider on mobile screens - like the one on the right side.
I have used this script for desktop slider -
https://www.jqueryscript.net/rotator/Simplest-3D-Image-Carousel-Plugin-For-jQuery-Carousel-js.html
Any help will be great, Thanks!

You will have to use 2 plugins for this. As far as I can tell there is no "pager" option for the plugin you are using. And then, using JavaScript you should destroy current plugin and initialize new one. Which could also be a problem since I don't see any sort of destroy method for your plugin. So ok, it would look something like this.
function init3DSlider() {
$('.your-container').carousel({
your: 'options'
})
}
function initPagerSlider() {
$('.your-container').somePagerPlugin({
// ...your options
})
}
// Function for checking which slider should turn on.
function turnOnSliderDependingOnResolution () {
if(window.matchMedia('(min-width: 768px)').matches) {
init3DSlider()
// ...somehow destroy pager slider
} else {
initPagerSlider()
// ...somehow destroy 3d slider
}
}
// Run turnOnSliderDependingOnResolution function on window resize.
window.addEventListener('resize', turnOnSliderDependingOnResolution)
Since this 3d slider doesn't have destroy method, try using this: http://ub4.underblob.com/remove-jquery-plugin-instance/
Or you can use a more simple solution, and that is to duplicate your slider, initialize both sliders (3D and pager). And then using CSS media queries you would hide one or the other.
Not exactly optimal but it will work.

understanding Plugin destroy function

hey guys i am very new to js and jquery in genenral and i was just going throught the plugin code of a gallery plugin , i can across the function called _loadevents , that had the following content , see below :
this.$navPrev.on('click.gallery', function (event) {
});
this.$navNext.on('click.gallery', function (event) {
});
this.$wrapper.on('webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function (event) {
});
now $navPrev , $navNext , and $wrapper are obviously some HTML element , now my question is about another method i came across in the same plugin , look below :
destroy: function () {
// console.log('inside destroy');
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
}
now i see that if this function is called all the event handlers will be taken off. now , can somebody tell me what is the necessacity of such a function , does it improve a plugins efficiency ? how or when does such a function get used and is it a common practice to write e destroy function for events in plugins ?
Thank you.
Alex-z .

Destroy functions in plugins enable a developer to reset or remove a plugin from an element, restoring the element to before the plugin was initialised. This is useful if, for example, you have a gallery plugin that works and looks fantastic on desktop, but you don't want it on mobile. You can listen to resize event on window and if the window size is smaller than e.g. 710px then destroy the plugin. This will remove all the added events, undo any DOM manipulation, and restore the html elements back to how they were before the plugin was first initialised (turn-wise, if the window size is larger than 710px then initialise the plugin).
They are generally considered good practice.

TinyMCE 4 replicate clicking of a toolbar icon

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.

I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

How to hide the JWPlayer play button?

How can I hide the play button that's in the center of the video screen in JW Player?
I'm using version 5.4 of the player and I am embedding it using their own 'JW Embedder' technique.
I've tried the following with no luck:
jwplayer("myPlayer").setup({
file: 'myMediaFile.mp4',
image: 'myPosterFile.jpg',
controlbar: 'bottom',
icons: false
});
I've read somewhere that this may have been removed with version 5.0 and must now be done with a skin. But, I also read that it returned in version 5.1 ... ?

I came acros the same problem and the solution was to set:
'controlbar': "none"
Also, I'm using JW Player 5.5.
Ley me know if it worked out.

You are looking for the "display" plugin. Hide as needed.
jwplayer().getPlugin("display").hide();

Add this to your onPause and maybe to your onReady event if you are not using autoplay:
jwplayer().getPlugin("controlbar").hide();
so it looks like this:
jwplayer("container").setup({
events: {
onPause: function(event){
jwplayer().getPlugin("controlbar").hide();
}
}
})
Reference:
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
Check the Plugins section.

Your code should work with JWplayer 5.10 if you put everything between ' '
jwplayer("myPlayer").setup({
'file': 'myMediaFile.mp4',
'image': 'myPosterFile.jpg',
'controlbar': 'bottom',
icons: 'false'
});

For JW Player v6 - HTML5 player:
You can hide the play button in center of screen in the with CSS:
.jwplayer .jwdisplayIcon {
display: none !important;
}
Or to hide the play button in control bar:
.jwplay {
display: none;
}

It seems to be that the 'icons: false' option does work, but not with the HTML 5 version of the player. Hopefully they'll get this taken care of with any versions later than JW 5.4.

You can write a flash plugin using the Flex SDK. I have written a base class that inherits from Sprite to handle this.
import flash.display.Sprite;
import flash.display.DisplayObject;
import com.longtailvideo.jwplayer.player.IPlayer;
import com.longtailvideo.jwplayer.view.components.ComponentButton;
import com.longtailvideo.jwplayer.view.interfaces.IControlbarComponent;
public class ExtendedPlugin extends Sprite
{
protected var _player:IPlayer;
public function ExtendedPlugin()
{
}
public function hideControlbarButton(buttonName:String):void {
var controlbar:IControlbarComponent = _player.controls.controlbar;
var button:DisplayObject = controlbar.getButton(buttonName);
button.height = 0;
button.width = 0;
}
}
Then you can write your plugin by inheriting from this class.
public class MyPlugin extends ExtendedPlugin implements IPlugin
{
public function initPlugin(player:IPlayer, config:PluginConfig):void
{
_player = player;
}
}
If you wanted to hide the play and pause buttons for example you would do the following:
hideControlbarButton("play");
hideControlbarButton("pause");
You will need the correct library imports for this as well. You will then also need to reference the SWF in the jwplayer parameters.

I achieved this by adding 'icons: false' to config. However, JWplayer API reference suggests adding 'controls: false', so try this as well. Here is a working example: http://www.longtailvideo.com/support/jw-player/29241/a-chromeless-player/

It's probably quite easy to do with a skin. You can modify an existing skin downloaded from longtail. They're just zip files
Here's the documentation : http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins
Basically you'd just delete the 'playIcon.png' from the skin zip file in the 'display' directory. It will just not show the icon then - because it doesn't exist!
You'll probably have to delete 'background.png' also - or you'll just get a blank square.

Here is the situation I came up with:
The idea is to disable the controls completely then re-enable them when on user click.
var jwHandle = jwplayer(videoID).setup(videoConfig);//Set b/c of internal reasons
//Then when configuring
autoplay : "false",
controls : "false", //disable the controls(including play icon)
events : {
onDisplayClick : function(event){
//re-enable controls
jwHandle.setControls(true);
//play the video
jwHandle.play();
}
}
});
Using version 6.10. Other answers above did not work for me, probably because of version changes. The only other way I found is to change a skin.xml play icon to a transparent image however more involved process and falls more towards side of "hacking".

Efficiently Composing a Dialog using BlockUI and jQuery

I am creating a small wrapper for the fantastic BlockUI plugin used in my application to easily create dialogs that meet my needs.
Sometimes I am a bit jQuery retarded and would like to know from any of the aficionados out there how they would do this particular task.
This function creates a header, middle and footer custom to my application. Uses some passed in options to fill out the HTML further. Composes the dialog and then inserts it into the BlockUI plugin.
function blockApp(element, options){
var header = jQuery('<div class="modal-header clearfix"><h2></h2><span></span></div>'),
center = jQuery('<div class="modal-content"></div>'),
footer = jQuery('<div class="modal-footer"></div>');
//Compose dialog
var opts = jQuery.extend({}, dialogDefaults, options);
header.find('h2').html(opts.title);
center.html(jQuery(element).html());
var comp = jQuery('<div></div>').append(header).append(center).append(footer);
jQuery('#notificationUI').block(jQuery.extend({}, standardBlock, {
message: comp,
}));
jQuery('.blockOverlay').click(function(){
jQuery('#notificationUI').unblock();
});
}
I tried using wrap() and wrapInner() at first with no success also.
My question is How would John Resig do this?

Not sure if this is what you're looking for but I've recently used BlockUI w/ another jQuery plug-in called jConfirm which you can download from here. With the jConfirm (or jAlert or jPrompt) you can fully customize your alert box via CSS. My scenario is probably way different than yours but in my app, user's can make changes to a document. If they choose to click my "cancel" button to erase all of their changes I have a jConfirm alert pop up while using BlockUI to dim out the interface from them. It looks pretty slick. Using jQuery I can catch the click event of my "cancel" button and do something like:
$('.cancel').click(function () {
$.alerts.dialogClass = 'my_css';
$.blockUI({ message: null });
jConfirm('Are you sure you want to cancel?', 'Cancel Changes?',
function (r) {
if (r.toString() == 'false') {
$.unblockUI();
} else {
//close window
}
});
return false;
});
Hope this helps!