We Keep Coding

Using owl-filter.js to filter through owl carousel items

I am using this plugin to filter through items in my owl carousel
But it is not working, I have had various console errors, this is the current one:
"Uncaught ReferenceError: initOwlEvent is not defined"
I have added the jquery.owl-filter.js in the footer of my page, and below this called the plugin using this script tag:
<script>
$(function() {
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
initOwlEvent.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})
</script>
This is how I initiate the owl carousel:
var OwlCarousel = function () {
return {
initOwlEvent: function () {
jQuery(document).ready(function() {
var owl = jQuery(".owl-events");
owl.owlCarousel({
lazyLoad: true,
items: 4,
itemsDesktop : [1000,2],
itemsDesktopSmall : [900,2],
itemsTablet: [600,1],
itemsMobile : [479,1],
slideSpeed: 1000,
autoPlay : 5000
});
});
}
}();
My HTML
<div class="row parallax-counter-v4 parallaxBg" id="row_events">
<div class="content container">
<h2 class="title-v2 title-center">Events</h2>
<div id="filter-container" class="btn-filter-wrap cbp-1-filters-text">
<div data-filter=".event-1" class="btn-filter cbp-filter-item">Main Events</div> |
<div data-filter=".event-2" class="btn-filter cbp-filter-item">The Venue</div> |
<div data-filter=".event-3" class="btn-filter cbp-filter-item">Woodys</div> |
<div data-filter=".event-4" class="btn-filter cbp-filter-item">Activities</div>
</div>
<div class="owl-carousel-v1 owl-work-v1 margin-bottom-50 mobile-margin-bottom-10">
<div class="owl-events">
{exp:su_event:homepage limit="8"} {events}
<div class="item news-v2 cbp-item event-{venue_id}">
<div class="news-v2-badge">
{if thumbnail_url == ""}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="" />
</a>
{if:else}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="{thumbnail_url}" />
</a>
{/if}
<p>
<span>{start_date format="%d"}</span>
<small>{start_date format="%M"}</small>
</p>
</div>
<h4>{title}</h4>
<p>{description}</p>
</div>
{/events} {/exp:su_event:homepage}
</div>
</div>
</div>
</div>

I had a similar issue while working with WordPress theme. Owl theme displayed the same error as you have mentioned. I have added jquery at the header and the issue got solved I am not sure whether this will work for you but you can give a try. Also, check if the owl script files are included after jquery.

for me, it's working...
$(function() {
$.fn.owlRemoveItem = function(num) {
var owl_data = $(this).data('owlCarousel');
owl_data._items = $.map(owl_data._items, function(data, index) {
if (index != num) return data;
})
$(this).find('.owl-item').eq(num).remove();
}
$.fn.owlFilter = function(data, callback) {
var owl = this,
owl_data = $(owl).data('owlCarousel'),
$elemCopy = $('<div>').css('display', 'none');
/* check attr owl-clone exist */
if (typeof($(owl).data('owl-clone')) == 'undefined') {
$(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
$(owl).data('owl-clone', $elemCopy);
} else {
$elemCopy = $(owl).data('owl-clone');
}
/* clear content */
owl.trigger('replace.owl.carousel', ['<div/>']);
switch (data) {
case '*':
$elemCopy.children().each(function() {
owl.trigger('add.owl.carousel', [$(this).clone()]);
})
break;
default:
$elemCopy.find(data).each(function() {
owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
})
break;
}
/* remove item empty when clear */
owl.owlRemoveItem(0);
owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);
// callback
if (callback) callback.call(this, owl);
}
var owl = $('.owl-carousel').owlCarousel({
autoplay: false,
nav: true,
loop: false,
items: 3,
autoplayHoverPause: true,
lazyLoad: true,
margin: 10,
responsiveClass: true,
navText : ["",""],
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 3,
nav: true,
}
},
});
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
console.log('ddd');
var filter_data = $(this).data('filter');
/* return if current */
if ($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})

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.

jwplayer play one video and stop all of the others

I have multiple jwplayer videos on my page with the following config:
$(function(){
//add attributes to your ".video" DIV placeholder to customimize output
//example: data-autostart="true" - see customSettings Object below.
if (typeof(jwplayer) !== 'undefined'){
$('.video').each(function(){
var vid = $(this),
videoSettings = {},
settings = {
autostart: false,
width: '100%',
aspectratio: '16:9',
image: ''
},
customSettings = {
autostart: vid.attr('data-autostart'),
width: vid.attr('data-width'),
aspectratio: vid.attr('data-aspectratio'),
image: vid.attr('data-image')
};
$.extend(videoSettings, settings, customSettings);
var playerInstance = jwplayer( vid.attr('id') ).setup({
primary: "flash",
file: Drupal.settings.basePath + $(this).attr('data-src'),
autostart: videoSettings.autostart,
aspectratio: videoSettings.aspectratio,
image: Drupal.settings.basePath + videoSettings.image,
skin: "glow",
stretching: "exactfit",
width: videoSettings.width,
ga:{idstring: videoSettings.videotitle,
trackingobject: "pageTracker"
}
});
});
}
});
I have tried to add this:
events: {
onReady: function ()
{
jwplayer($('.video').id).stop();
}
},
but I am getting the following error:
[.PPAPIContext]GL ERROR :GL_INVALID_ENUM : glTexImage2D: target was GL_TEXTURE_RECTANGLE_ARB
is there a way to make all other videos stop when one is played?

It worked for me...
if(typeof jwplayer().stop === "function" ){
jwplayer().stop();
}

Magnific popup has scroll problems on the iPhone

I'm using the Magnific popup for to show the popup in my site, it's worked well in all browsers and smartphones, however it happened a problem on the iPhone, when I scroll the page with popup open, the "body" scroll together.
This is my jQuery code:
if ($.fn.magnificPopup) {
$('.open-popup').magnificPopup({
type: 'inline',
alignTop: true,
midClick: true,
fixedContentPos: true,
removalDelay: 300,
mainClass: 'modulos-popup fade-popup'
});
$.extend(true, $.magnificPopup.defaults, {
tClose: 'Fechar (Esc)',
tLoading: 'Carregando...'
});
}

yeah I'm facing the same problem seems like the following patch is working for me:
utils.js(useful if you are using the popup in different places)
window.Utils = {
magnificPopupConfiguration: function() {
var startWindowScroll = 0;
return {
beforeOpen: function() {
startWindowScroll = $(window).scrollTop();
$('html').addClass('mfp-helper');
},
close: function() {
$('html').removeClass('mfp-helper');
setTimeout(function(){
$('body').animate({ scrollTop: startWindowScroll }, 0);
}, 0);
}
}
}
}
css:
.mfp-wrap {
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
}
html.mfp-helper {
height: 100%;
body {
overflow: hidden;
height: 100%;
-webkit-transform: translateZ(0);
}
}
Preparing the js:
$(document).ready(function() {
if ($('.open-popup-link').length) {
startWindowScroll = 0;
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true,
fixedContentPos: true,
callbacks: Utils.magnificPopupConfiguration()
});
}
});
html:
<a class="open-popup-link" href="#your-html-content">text link</a>

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.