We Keep Coding

cube portfolio with bootstrap template plugin not working

I am using cubeportfolio.js as part of a bootstrap template. It seems to be working but the custom .js part of the template is causing an error in the console.
The template I am using can be seen here, which is working without errors.
The error is 'Uncaught Error: cubeportfolio is already initialized. Destroy it before initialize again!'
For confidentiality reasons I can't post all the code but I have called the jquery.cubeportfolio.min.js at the bottom of the with the custom .js underneath.
Here is the custom .js
(function($, window, document, undefined) {
'use strict';
var gridContainer = $('#grid-container'),
filtersContainer = $('#filters-container'),
wrap, filtersCallback;
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
/*********************************
add listener for filters
*********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
wrap.on({
'mouseover.cbp': function() {
wrap.addClass('cbp-l-filters-dropdownWrap-open');
},
'mouseleave.cbp': function() {
wrap.removeClass('cbp-l-filters-dropdownWrap-open');
}
});
filtersCallback = function(me) {
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
me.addClass('cbp-filter-item-active');
wrap.trigger('mouseleave.cbp');
};
} else {
filtersCallback = function(me) {
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
};
}
filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
var me = $(this);
if (me.hasClass('cbp-filter-item-active')) {
return;
}
// get cubeportfolio data and check if is still animating (reposition) the items.
if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
filtersCallback.call(null, me);
}
// filter the items
gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
});
/*********************************
activate counter for filters
*********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
// read from url and change filter active
var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
item;
if (match !== null) {
item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
if (item.length) {
filtersCallback.call(null, item);
}
}
});
})(jQuery, window, document);

You have to destroy it before init:
gridContainer.cubeportfolio('destroy');
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
It is initialized somewhere else and therefore it throws an error because it doesn't know with which cubeportfolio() instance has to deal.

From the error output I’m pretty sure that you instantiate Cube Portfolio twice for the same element.
If you want to instantiate again the plugin call on that element the method destroy
jQuery('#my-grid').cubeportfolio('destroy');
and then the init method to instantiate again
jQuery('#my-grid').cubeportfolio(options);
If you need further help please send me a link to your website to check your code.

Fancyapps overlay not showing

We are loading fancybox css file dynamically after page load and try to open fancybox with overlay active and custom html content.
Sometimes overlay doesn't appear. If we try to open fancybox with a delay, probability of getting no overlay is decreasing, but it is not totally gone away.
I have already created an issue for this problem: https://github.com/fancyapps/fancyBox/issues/1126
That's how we initialize fancybox:
var fancyboxParams = {
minHeight: 10,
width: params.width || 'auto',
height: params.height || 'auto',
autoSize: false,
autoWidth: params.width ? false : true,
autoHeight: params.height ? false : true,
autoHide: params.autoHide,
topRatio: params.topRatio || topRatio,
leftRatio: params.leftRatio || leftRatio,
title: title,
helpers: {
title: (title && params.windowStyle !== 'seamless') ? {
type: 'inside',
position: 'top'
} : null,
overlay: (params.overlay != "false") ? {} : null
},
content: notificationBody,
fixed: false, // HADDITION - scroll with the page 16.10.2015
wrapCSS: (params.cssClass || "") + " " + "fancybox-" + (params.windowStyle || "seamless"),
beforeShow: function () {
cssCode && $('<style />').html(params.cssCode).prependTo(this.outer);
try {
javascriptCode && eval(javascriptCode);
beforeShow.call(this); // change context
}
catch (err) {
$.fancybox.close(true);
}
},
afterClose: function () {
$(".fancybox-segmentify").remove();
}
};
if (params.isModal == 'true') {
fancyboxParams.closeBtn = false;
fancyboxParams.closeClick = false;
fancyboxParams.keys = null;
if (fancyboxParams.helpers.overlay) {
fancyboxParams.helpers.overlay.closeClick = false;
}
}
$.fancybox(fancyboxParams);

JWPlayer and IE11 -- Could not add internal listener

The player works fine on all other browsers, but isn't working in IE11. I'm getting the error message "Could not add internal listener" 8 times (one time for each playlist item, I assume).
The script gets to the onReady event, but never gets to onPlay. I'm running version 6.8. I have confirmed that the playList is being generated as it should, and as I mentioned, it works in all browsers except for IE11.
//get our playlist
var playListItems = [];
$(courseXML).find("audiofile").each(function() {
var newItem = {
file: "assets/audio/"+ $(this).text(),
type: "mp3"
};
playListItems.push(newItem);
});
//redoing this as a playlist
jwplayer("mediaplayer").setup({
flashplayer: "js/jwplayer.flash.swf",
html5player: "js/jwplayer.html5.js",
controls: false,
width: 1,
height: 1,
autostart: false,
playlist: playListItems,
allowscriptaccess: 'always',
events: {
onComplete: function() {
alert("I'm completed");
},
onReady: function() {
alert("I'm ready");
},
onPlay: function() {
alert("I'm playing!");
}
}
});

Adding you tube player (iFrame) in jQuery modal dialog

I have some images in my HTML and _I need to play embedded you tube video videos on click of each image which should load/play in a jQuery UI dialog. Basically like a pop up video player.
So here is what i have done to play/attach video with each image. I have three images and i have added the unique video id in my custom data-attribute which i taken from you tube.
HTML
<div id="ImageBox">
<img src="img1.png" class="playVideo" alt="" id="image1" data-videoId="v6jg8g"/>
<img src="img2.png" class="playVideo" alt="" id="image2" data-videoId="re84hj"/>
<img src="img3.png" class="playVideo" alt="" id="image3" data-videoId="dhj3fk"/>
</div>
<!-- HTML for jQuery modal dialog -->
<div id="MyVideoPlayer">
<div>
<strong id="videoTitle">title for video</strong>
<img src="closeButton.png" id="Close" alt="Close" />
</div>
<iframe src="https://www.youtube.com/embed/MyVideoId?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="Player" width="100%" height="100%"></iframe>
</div>
Note: I am using iframe embed method from you tube player
API
to embed videos.
For JavaScript/jQuery section, I came up with two choices here.
1. Because i am working in a ASP.NET MVC 3 app, i can set the unique video id to #ViewBag in script and assign to iFrame like this...
$('#ImagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
'#ViewBag.VideoId' = myId;
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
2. Assign the updated iFrame src with new video id each time dialog
opens.
$('#imagesBlock .playVideo').click(function(){
var myId = $(this).attr('data-videoId');
var src = 'https://www.youtube.com/embed/'+ myId +'?wmode=opaque&autoplay=1&autohide=1
&showinfo=0&controls=2&rel=0&enablejsapi=1';
$('#MyVideoPlayeriframe').attr('src', src);
$('#MyVideoPlayer').dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} }
});
});
Which one should I go with. I found some references though,
Embedded jwplayer into jQuery Dialog
https://stackoverflow.com/questions/15887106/how-to-get-embedded-video-into-modal-dialog
jQuery mb.YTPlayer
Is there any way i can make it little more simplified and re-usable in future. Please advise with your wise opinion.

I am little late updating this thread but I managed to create a method or more of a plugin by extending jQuery's prototype object. This is a nice link to start learning.
// following is the method by extending the jQuery's prototype object
// to convert and embed an element into a video pop-up
(function ($) {
$.fn.videoPlayer = function (options) {
var defaults = $.extend({
title: "",
videoId: "",
autoplay: 1
}, options);
var videoBox = this.find('#VideoBox');
var videoElement = document.createElement('iframe');
var src = 'https://www.youtube.com/embed/' + defaults.videoId + '?wmode=opaque&autoplay=' + defaults.autoplay + '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';
this.find('#VideoTitle').text(defaults.title);
$(videoElement).attr({
'src': src,
'frameborder': 0,
'width': '100%',
'height': '90%'
});
videoBox.html(videoElement);
this.dialog(
{ width: 'auto' },
{ height: 'auto' },
{ draggable: false },
{ resizable: false },
{ closeOnEscape: false },
{ modal: true },
{ show: { effect: "fade", duration: 200} },
{ hide: { effect: "fade", duration: 250} },
{ close: function (event, ui) {
$(videoElement).remove();
$(this).dialog('destroy');
}
});
//making the method chainable!
return this;
};
})(jQuery);
$(function(){
$('#VideoPlayerPopUp #Close').click(function () {
$("#VideoCatcher").dialog("close");
});
$('#Entertainment .launch-video').click(function () {
var element = $(this);
$('#VideoCatcher').videoPlayer({
title: element.attr('data-videoTitle'),
videoId: element.attr('data-videoId')
});
});
});
I have used custom HTML data-attributes for video title and video id. This will keep HTML clean and semantic. You can of course style/customize the pop-up accordingly.
Visit this working demo to see this in action.

flowplayer: coverImage as data attribute

I'm calling flowplayer like this:
flowplayer("a.rmPlayer", "libs/flowplayer/flowplayer.swf", {
plugins: {
audio: {
url: 'libs/flowplayer/flowplayer.audio.swf'
},
controls: {
volume: true
}
}
});
I'd now like to have different covers for each mp3 file being called. flowplayer provides the coverimage variable (see http://flash.flowplayer.org/plugins/streaming/audio.html), however can I somehow have the images in a data attribute?

I've ended up using the following code, which seems to work flawlessly.
The link:
<a data-toggle="modal" class="rmPlayer" data-fpurl="http://releases.flowplayer.org/data/fake_empire.mp3" data-fpimg="http://releases.flowplayer.org/data/national.jpg">click me</a>
And the corresponding javascript (with '#rmPlayerInterface' being the modal window)
<script type="text/javascript">
$(document).ready(function() {
player = flowplayer("player", "/libs/flowplayer/flowplayer.swf", {
plugins: {audio: {url: '/libs/flowplayer/flowplayer.audio.swf'},controls: {url: '/libs/flowplayer/flowplayer.controls.swf'}},
clip: {autoplay: false, autoBuffering: true}
});
$(document).on("click", ".rmPlayer", function () {
$('#rmPlayerInterface').data('playeroptions', $(this).data());//.music = music;
$('#rmPlayerInterface').modal('show');//:music});//('music', $(this).data('music'));
});
$('#rmPlayerInterface').on('show', function () {
var poptions = $('#rmPlayerInterface').data('playeroptions');
var c = {url: poptions["fpurl"],coverImage: {url: poptions["fpimg"],scaling: 'orig'}};
player.play(c);
});
$('#rmPlayerInterface').on('hide', function () {
player.pause();
});
});
</script>