Develop Reference

How to change the position of videojs Control bar elements order

I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......

I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin

For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.

How to play with two afterActions in OwlCarousel

I have a problem with afterAction functions on my owl carousel.
The problem is that afterAction:syncPosition doesn't work when the second after Action "function(current)" is in the code. If I delete it, syncPosition works.
Currently I can't make a fiddle but maybe some of you can see a misspelled or something below.
UPDATE// ENTIRE CODE
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
loop: false,
navigation: true,
pagination: true,
paginationSpeed: 1000,
singleItem: true,
transitionStyle: "mask",
autoHeight: true,
autoPlay: 10000, //Set AutoPlay to 3 seconds
navigationText : false,
afterAction: syncPosition,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function syncPosition(el) {
var current = this.currentItem;
// code for smooth transition
this.owl.owlItems.removeClass('turn-on');
var t = this;
$(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 80) {
$('.owl-pagination').addClass('hidden');
} else {
$('.owl-pagination').removeClass('hidden');
}
});

I've changed
afterAction: function(current) {
current.find('video').get(0).play();
}
to
afterInit: function(){
$("#sequence-1").find('video').get(0).play();
and both syncPosition and .find('video').get(0).play();
are working.

Conflict using Magnific Popup with 'autoScrolling: false,' option from fullPage.js

Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">

Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});

How to use custom navigation buttons for royalslider

I have a (royal)slider, I need to use the next/prev nav buttons to be out of the slider div.
Lets say I have the navigation nav buttons in my footer.
<div class="my-prev-button"></div>
<div class="my-next-button"></div>
Here is some documentation but I don't know how to use this!
http://dimsemenov.com/plugins/royal-slider/documentation/#api
How can I make these two buttons work with the slider (while it is outside)
<script id="addJS">
jQuery(document).ready(function($) {
$('#slider-with-blocks').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'none',
imageScaleMod: 'none',
autoScaleSlider: false,
imageScalePadding: 0,
slidesSpacing: 0,
autoHeight: false,
blockLoop: true,
loop: true,
numImagesToPreload: 4,
transitionType: 'fade',
autoPlay: {
enabled: true,
pauseOnHover: false,
},
block: {
delay: 400
}
});
});
</script>
<div class="slider">
<div id="slider-with-blocks" class="royalSlider rsMinW">
<div class="rsContent" data-rsDelay="5000">
some div and img here..
</div>
</div>
</div>

Style your Next and Previous div's as per your need and use below code after initializing royal-slider:
// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
slider.prev();
});
$('.my-next-button').on('click', function(){
slider.next();
});
You can find more API's here
http://dimsemenov.com/plugins/royal-slider/documentation/#api

here an example of the solution:
http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/

Magnific popup not loading via AJAX and giving 'XMLHttpRequest cannot load' error?

I'm trying to create a popup page using Magnific via AJAX but getting an 'XMLHttpRequest cannot load' error when the link button is clicked.
Below is the partial code for the portfolio section where clicking on the button should load project_1.html:
<div class="masonry_items removeImgGrayFilter portfolio_items catFilterEffect_1 ajaxPopup_gallery" data-animated-time="15" data-animated-in="animated fadeIn" data-animated-innerContent="yes" data-anchor-to="parent.parent.parent">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Category 1 - jQuery -->
<!-- Thumbnail -->
<div class="item width_1by4 hover_enable cat1 selPopup">
<div class="item_thumbnail">
<div class="porImgOver">
<!-- Thumbnail Image -->
<img class="preload" src="images/0.png" data-src="images/portfolio/thumb1.jpg" alt="image_alt_text" />
</div>
<div class="imageText textOnHover">
<div class="text_field lightColorText">
<h5>Bloc Jams - jQuery</h5>
<h6>A fully functional digital music player similar to Spotify</h6>
<a class="detail_btn ajaxPopup_galItem" href="project_1.html">
<span class="icon"><i class="fa fa-search-plus"></i></span>
</a>
</div>
</div>
....
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/custom.min.js"></script>
custom.min.js
// magnificPopup plugin Initialization
try {
//Initialize Image
$('.magnificPopup').each(function() {
var mc = $(this);
var tit = mc.attr("data-title") !== undefined ? "data-title" : "title";
var typ = mc.attr("data-type") !== undefined ? mc.attr("data-type") : "image";
mc.magnificPopup({
image: {
titleSrc: tit
},
type: typ,
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
closeBtnInside: true,
midClick: false // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
//Initialize Gallery
$('.magnificPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize portfolio item gallery
$('.magnificPopup_item_gallery').each(function() {
var mc = $(this);
var p_items = [];
mc.find(".i_gallery").children().each(function() {
var mc2 = $(this);
var tit = mc2.attr("data-title") !== undefined ? mc2.attr("data-title") : mc2.attr("title");
p_items.push({
src: mc2.attr("data-href"),
title: tit,
type: mc2.attr("data-type")
});
});
mc.magnificPopup({
items: p_items, // the selector for gallery item
type: 'image', // this is default type
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize inline content
$('.magnificPopup_inline').magnificPopup({
type: 'inline',
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
} catch (e) {}
try {
// Initialize popup detail text
$('.detail_text').each(function() {
var cont = $(this).find(".popup_text");
$(this).find(".link_btn").magnificPopup({
items: {
src: cont,
type: 'inline'
},
removalDelay: 500, //delay removal by X to allow out-animation
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
$('.ajaxPopup_link').magnificPopup({
type: 'ajax',
settings: null,
alignTop: false,
cursor: 'mfp-ajax-cur',
closeOnContentClick: false,
closeBtnInside: true
});
try {
//Initialize Gallery
$('.ajaxPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: '.selPopup a.ajaxPopup_galItem', // the selector for gallery item
type: 'ajax',
settings: null,
alignTop: true,
cursor: 'mfp-ajax-cur',
gallery: {
enabled: true
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}