We Keep Coding

How to remove black borders on embed youtube video?

I need to make the video like this one here:
http://themes.laborator.co/aurum/fashion/home/home-4/?header-type=3&header-top-links=hide&header-cart-icon=5
I'm using jquery plugin. You can see here the code.
The first thing I need to do is to make height something about 550px than borders with some blur effect like in the template.
/*
jQuery backVid plugin
by Rory Standley
http://www.rstandley.co.uk
version: 1.0
licensed under the MIT License
*/
(function ($, window) {
var backVid = function(node, options) {
// Establish our default settings
var settings = $.extend({
ratio: 16/9, // either 4/3 or 16/9
videoId: 'O_OKpl6u5P4',
mute: false,
repeat: true,
width: $(window).width(),
playButtonClass: 'backVid-play',
pauseButtonClass: 'backVid-pause',
muteButtonClass: 'backVid-mute',
unMuteButtonClass: 'backVid-unMute',
volumeUpClass: 'backVid-volume-up',
volumeDownClass: 'backVid-volume-down',
increaseVolumeBy: 10,
mobileBackgrounType: 'colour', // either image/colour
backgroundValue: 'rgb(0,0,0)', // either hex,RGB/Image URL - example (http://www.rstandley.co.uk/laboratory/url_shortner/UxWBHq)
videoFilter: false, // either false/lines/bricks/squares/waves/spots/dashes/crosses
start: 0
}, options);
// First we need to check to see if we have a mobile device or not
if (checkDevice()) {
// Now we need to append our div we will work with to the 'body'
wrapElements();
$('body').append(
$('<div />').attr('id','backVid-video-player')
.css({
'position':'inherit',
'left':0,
'top': -177,
'overflow':'hidden',
'z-index':'1',
'height':'100%',
'width':'100%'
})
);
// Lets build our background value for backVid-stop-clicks
switch(settings.videoFilter){
case 'false':
myFilterBG = '0';
break;
case 'lines':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC)';
break;
case 'bricks':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQImWNgwAT/yRf4j0vFfwAZXgb64t36UQAAAABJRU5ErkJggg==)';
break;
case 'squares':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAQElEQVQYlW2OwQ0AMAgCbw7XcMFubj81RVpeGgIcQHK1gJC/+shjtkLNTmpTaZMm05IB76YzfTedaW46k28Opg1VYQ5hW3JdzwAAAABJRU5ErkJggg==)';
break;
case 'waves':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAJElEQVQYlWNgwAT/sYjhVIRXMbokVsW4TPhPjCJi5clXTBwAAOy+CfekNMf3AAAAAElFTkSuQmCC)';
break;
case 'spots':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC)';
break;
case 'dashes':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAEklEQVQYlWNgoBL4T7GCoW8FAGEXBfvNSmHvAAAAAElFTkSuQmCC)';
break;
case 'crosses':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMklEQVQYlWNgYGAwZkAFxjjEcApgSOKTIGgSVpOxKcKqmGiFRFuNUwCHGFaT8erCGuAAtV8HLQ/j6goAAAAASUVORK5CYII=)';
break;
default:
myFilterBG = '0'
}
// Now we need to add a layer to stop people clicking on the YouTube video
$('body').append(
$('<div />').attr('id','backVid-stop-clicks')
.css({
'width':'100%',
'height':'100%',
'z-index':'2',
'position':'fixed',
'left':0,
'top':-177,
'background-image': myFilterBG
})
);
} else {
// We have a mobile device, the auto play feature does not work, so we need to use a BG image/colour
if (settings.mobileBackgrounType == 'image') {
// We need to show the image url
if (settings.backgroundValue != '') {
// We can assume we have a value and we must assume that it is a link to an image
$('body').css({
'background': 'url('+settings.backgroundValue+') no-repeat center center fixed',
'-webkit-background-size': 'cover',
'-moz-background-size': 'cover',
'-o-background-size': 'cover',
'background-size': 'cover',
});
}
} else if (settings.mobileBackgrounType == 'colour') {
// We need to show a background colour
if (settings.backgroundValue != '') {
// We can assume we have a value and we must assume that it is a link to an image
$('body').css({
'background': settings.backgroundValue,
'height':'100%',
'width':'100%'
});
}
}
}
// We are using global space in order to talk with the YouTube API
window.player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('backVid-video-player', {
width: settings.width,
height: Math.ceil(settings.width / settings.ratio),
videoId: settings.videoId,
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
window.onPlayerReady = function(e) {
resize();
if (settings.mute) e.target.mute();
e.target.seekTo(settings.start);
e.target.playVideo();
}
window.onPlayerStateChange = function(state) {
if (state.data === 0 && settings.repeat) {
player.seekTo(settings.start);
}
}
// resize handler updates width, height and offset of player after resize/init
var resize = function() {
var width = $(window).width(),
pWidth,
height = $(window).height(),
pHeight,
$backVidPlayer = $('#backVid-video-player');
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / settings.ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * settings.ratio); // get new player width
$backVidPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: -117}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / settings.ratio); // get new player height
$backVidPlayer.width(width).height(pHeight).css({left: 0, top: -117}); // player height is greater, offset top; reset left
}
}
$('body').on('click','.' + settings.playButtonClass, function(e) { // play button
e.preventDefault();
player.playVideo();
}).on('click', '.' + settings.pauseButtonClass, function(e) { // pause button
e.preventDefault();
player.pauseVideo();
}).on('click', '.' + settings.muteButtonClass, function(e) { // mute button
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
}).on('click', '.' + settings.volumeDownClass, function(e) { // volume down button
e.preventDefault();
var currentVolume = player.getVolume();
if (currentVolume < settings.increaseVolumeBy) currentVolume = settings.increaseVolumeBy;
player.setVolume(currentVolume - settings.increaseVolumeBy);
}).on('click', '.' + settings.volumeUpClass, function(e) { // volume up button
e.preventDefault();
if (player.isMuted()) player.unMute(); // if mute is on, unmute
var currentVolume = player.getVolume();
if (currentVolume > 100 - settings.increaseVolumeBy) currentVolume = 100 - settings.increaseVolumeBy;
player.setVolume(currentVolume + settings.increaseVolumeBy);
}).on('click', '.' + settings.unMuteButtonClass, function(e) { // mute button
e.preventDefault();
player.unMute()
});
}
// Load the YouTube API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Lets create our Plugin
$.fn.backVid = function (options) {
return this.each(function () {
// First lets check to see if we have a mobile device or not
if (!$.data(this, 'backVid_instantiated')) { // let's only run one
$.data(this, 'backVid_instantiated',
backVid(this, options));
}
});
}
function checkDevice() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
return false;
} else {
return true;
}
}
function wrapElements() {
// We are going to wrapp all the elements so we can adjust the z-index
$('body').wrapInner($('<div />').attr('class','backVid-wrapper').css({
'position':'relative',
'z-index':'3'
})
);
}
})(jQuery, window);

Previous and next image link in JavaScript

I need help for the slider on TweenMax.js
The problem:
This example has 4 images, on click each images will open in a fullscreen.
But i am not getting the previous screen link and next screen link in fullscreen.
Expected Result: once image is clicked, it should get previous image hyperlink and next hyperlink in all the sliders
Please Note : Now it is working for last image and first image.
even though i click any image
Please accept my apologies, CODE is very big !
JSFIDDLE :
http://jsfiddle.net/goo08gg5/11/
Any help is appreciated, thanks in advance.
UPDATE:
I feel this place in JS, we need to make the changes, but i might be wrong
//next image link
TweenLite.set($expander_nav.last(), {
x : 160,
right : 4,
left : 'auto',
delay : delay
});
//first image link
TweenLite.set($expander_nav.first(), {
x : -160,
left : 4,
right : 'auto',
delay : delay,
onComplete : function () {
// add content to title overlay after delay
$title.html(self.$cur_circle.siblings('.tagline').html());
}
});
JAVASCRIPT
var HeroCircles = function(el) {
this.$el = $(el);
this.$circles = this.$el.find('.circle');
this.$expander = this.$el.find('.circle-expander');
this.$cur_circle = null;
};
HeroCircles.prototype._placeBG = function() {
// get parent position and dimensions
var self = this,
parent_pos = this.$el.offset(),
parent_width = this.$el.width(),
parent_height = this.$el.height();
this.$circles.each(function() {
var $circle = $(this),
offset = $circle.offset(),
$bg = $circle.children('.bg');
// set position
$bg.css({
'top': parent_pos.top - offset.top + 'px',
'left': parent_pos.left - offset.left + 'px',
'width': parent_width + 'px',
'height': parent_height + 'px'
});
});
};
HeroCircles.prototype._animateInTitle = function(delay) {
var self = this,
$title = this.$expander.children('.title-overlay'),
cur_class = this.$cur_circle.data('name'),
$expander_nav = this.$expander.children('.expander-nav').children('a').not('.' + cur_class);
TweenLite.set($expander_nav.last(), { x: 160, right: 4, left: 'auto', delay: delay });
//Last image
TweenLite.set($expander_nav.first(), {
x: -160,
left: 4,
right: 'auto',
delay: delay,
onComplete: function() {
// add content to title overlay after delay
$title.html(self.$cur_circle.siblings('.tagline').html());
}
});
//Firstimage
// animate in title overlay
TweenLite.to($title, 0.5, {
y: 40,
delay: delay,
ease: Back.easeOut
});
TweenLite.to($expander_nav, 0.15, {
x: 0,
delay: delay + 0.5
});
};
HeroCircles.prototype._animateOutTitle = function() {
var $title = this.$expander.children('.title-overlay'),
cur_class = this.$cur_circle.data('name'),
$expander_nav = this.$expander.children('.expander-nav').children('a').not('.' + cur_class);
// animate out title overlay
TweenLite.to($title, 0.5, {
y: $title.outerHeight()
});
// animate out circles
TweenLite.to($expander_nav.first(), 0.15, {
x: -160
});
TweenLite.to($expander_nav.last(), 0.15, {
x: 160
});
};
HeroCircles.prototype._animateIn = function(circle) {
var $circle = $(circle),
$border = $circle.siblings('.border'),
img = $circle.children('.bg').data('bg');
// set current circle
this.$cur_circle = $circle;
// set bg image for expander div
this.$expander.css('z-index', 4);
this.$expander.children('.bg').css('background-image', 'url(' + img + ')');
// add active class to li
$circle.parent('li').addClass('active');
// expand circle
TweenLite.to($border, 0.3, {
scale: 7
});
// fade in expander
TweenLite.to(this.$expander, 0.5, {
opacity: 1,
delay: 0.5,
onComplete: function() {
TweenLite.set($border, { scale: 1 });
}
});
// animate in title overlay
this._animateInTitle(1);
};
HeroCircles.prototype._animateOut = function() {
var self = this;
// remove active class and scale down border
this.$el.find('li').removeClass('active');
// animate out title
this._animateOutTitle();
// fade out expander
TweenLite.to(this.$expander, 0.5, {
opacity: 0,
delay: 0.5,
onComplete: function() {
self.$expander.css({
'z-index': -1
});
}
});
};
HeroCircles.prototype._animateSwitch = function(circle) {
this._animateOutTitle();
this.$cur_circle = $(circle);
var img = this.$cur_circle.children('.bg').data('bg'),
$bg = this.$expander.children('.bg');
// switch active class
this.$el.find('li').removeClass('active');
this.$cur_circle.parent('li').addClass('active');
TweenLite.to($bg, 0.3, {
opacity: 0,
delay: 0.5,
onComplete: function() {
$bg.css('background-image', 'url(' + img + ')');
TweenLite.to($bg, 0.3, { opacity: 1 });
}
});
this._animateInTitle(1);
};
HeroCircles.prototype.init = function() {
var self = this;
this._placeBG();
// add click events
this.$el.on('click', '.circle', function() {
self._animateIn(this);
});
this.$el.find('.close-btn').on('click', function(e) {
e.preventDefault();
self._animateOut();
});
this.$expander.children('.expander-nav').on('click', 'a', function(e) {
e.preventDefault();
var new_class = $(this).attr('class'),
$circle = self.$el.find('ul .' + new_class);
console.log("new class is", new_class, "new circle is", $circle[0]);
self._animateSwitch($circle);
});
};
HeroCircles.prototype.initMobile = function() {
var self = this,
$mobile_slider = this.$el.find('.mobile-slider');
this.$el.on('click', '.circle', function() {
var $this = $(this),
bg = $this.children('.bg').data('bg');
self.$circles.removeClass('active');
$this.addClass('active');
$mobile_slider.html('<div>' + $this.siblings('.tagline').html() + '</div>');
$mobile_slider.css('background-image', 'url(' + bg + ')');
});
this.$circles.first().trigger('click');
};
var hero_circles = new HeroCircles('.hero-circles');
if ( window.innerWidth > 580 ) {
hero_circles.init();
} else {
hero_circles.initMobile();
}

I have make
Expected Result: once image is clicked, it should get previous image
hyperlink and next hyperlink in all the sliders
But i dont know how work this fadeIn and fadeOut circle.
This script work fine for next and prev slide, but the animation slide is no good. but it's work !
I have add a index of clicked circle for next and prev slide.
please see: http://jsfiddle.net/gw4eqg92/

Auto upload image on canvas without submit button

I am using fabric.js i am trying to upload image on canvas without submit button ,image is uploading successfully but the problem is that when i upload one image its uploading 4 time's on canvas just let me know how do i break the loop once count==1
$(document).ready(function(e) {
$('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
// alert('NotChanged');
var count=0;
var gal_id =$(this).children('img').attr('id');
if(gal_id=='upload')
{
count++;
// alert(count);
// alert(gal_src);
}
if(count==1)
{
//var gal_id =$(this).children('img').attr('id');
var imgInstance2 = new fabric.Image(gal_id, {
left: 300,
top: 200,
// height:100,
angle: 60
// opacity: 0.85
});
// add image onto canvas
canvas.add(imgInstance2);
parent.$("#upload_image_pop_up").bPopup().close();
}
})
}
You can see here one image attached 4 times.

Got the answer following is my code.
$(document).ready(function(e) {
var flag=0;
$('#preview').bind('DOMNodeInserted', function(event) {
//$('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
if(flag==0)
{
// $('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
// alert('NotChanged');
var count=0;
var gal_id =$(this).children('img').attr('id');
var gal_src =$(this).children('img').attr('src');
if(gal_id=='upload')
{
count++;
// alert(count);
// alert(gal_src);
}
if(count==1)
{
//var gal_id =$(this).children('img').attr('id');
var imgInstance2 = new fabric.Image(gal_id, {
left: 300,
top: 200,
// height:100,
angle: 60
// opacity: 0.85
});
// add image onto canvas
canvas.add(imgInstance2);
parent.$("#upload_image_pop_up").bPopup().close();
flag=1;
}
}
})

Objects with same class do not hide sometimes

I am trying to fadeOut the blue circle markers on click. It works on the first few clicks but after that the markers do not fade out. What can I be doing wrong?
Here is a demo. Please look for the animated circle blue markers.
P.S: I am trying to fadeout the objects with the class of .marker.
var marker = $('.marker'),
body = $('#movingBody'),
dynamicbox = $('.dynamicbox'),
dbleft = $('.dynamicbox.left').hide(),
dbright = $('.dynamicbox.right').hide(),
closeBtn = dynamicbox.find('.close');
marker.on('click', function() {
var $this = $(this),
rel = $this.attr('rel'),
div = $(rel),
img = $this.attr('href');
marker.fadeOut(200);
$('.dynamicbox .content div').hide();
div.show();
$(img).fadeIn();
function animateOut(unit) {
body.animate({
'left' : unit
}, 500, 'easeOutCirc');
}
if($this.hasClass('r')) {
animateOut(0); dbright.fadeIn(200);
} else {
animateOut(258); dbleft.fadeIn(200);
}
closeBtn.on('click', function() {
body.animate({
'left' : 140
}, 500, 'easeOutCirc', function() {
marker.fadeIn(200);
});
$(img).fadeOut();
dynamicbox.fadeOut(200);
});
});

Try moving this part outside the 'click' function:
closeBtn.on('click', function() {
...
});

Javascript slider pause function on hover

Looking for a little help with this slider that came with a Magento Template I purchased.
I'm trying to add a pause on hover and resume on mouse out but am very new to getting my hands this dirty with the JavaScript.
Hoping for a push in the right direction
Here is the code I'm working with
function decorateSlideshow() {
var $$li = $$('#slideshow ul li');
if ($$li.length > 0) {
// reset UL's width
var ul = $$('#slideshow ul')[0];
var w = 0;
$$li.each(function(li) {
w += li.getWidth();
});
ul.setStyle({'width':w+'px'});
// private variables
var previous = $$('#slideshow a.previous')[0];
var next = $$('#slideshow a.next')[0];
var num = 1;
var width = ul.down().getWidth() * num;
var slidePeriod = 3; // seconds
var manualSliding = false;
// next slide
function nextSlide() {
new Effect.Move(ul, {
x: -width,
mode: 'relative',
queue: 'end',
duration: 1.0,
//transition: Effect.Transitions.sinoidal,
afterFinish: function() {
for (var i = 0; i < num; i++)
ul.insert({ bottom: ul.down() });
ul.setStyle('left:0');
}
});
}
// previous slide
function previousSlide() {
new Effect.Move(ul, {
x: width,
mode: 'relative',
queue: 'end',
duration: 1.0,
//transition: Effect.Transitions.sinoidal,
beforeSetup: function() {
for (var i = 0; i < num; i++)
ul.insert({ top: ul.down('li:last-child') });
ul.setStyle({'position': 'relative', 'left': -width+'px'});
}
});
}
function startSliding() {
sliding = true;
}
function stopSliding() {
sliding = false;
}
// bind next button's onlick event
next.observe('click', function(event) {
Event.stop(event);
manualSliding = true;
nextSlide();
});
// bind previous button's onclick event
previous.observe('click', function(event) {
Event.stop(event);
manualSliding = true;
previousSlide();
});
// auto run slideshow
new PeriodicalExecuter(function() {
if (!manualSliding) nextSlide();
manualSliding = false;
}, slidePeriod);
}
Now I'm guessing the best way would be to manipulate a hover or mouseover observer similar to the next and previous ones to stop and start but I'm just not sure on how to set this up.
Would appreciate a push in the right direction!
Edit ....
So I'm getting much closer but I seem to have a problem yet hopefully someone who know about prototype can help.
I got it to work by adding this variable
var stopSliding = false;
and then adding an if like so
function nextSlide() {
if (!stopSliding) {
new Effect.Move(ul, {
x: -width,
mode: 'relative',
queue: 'end',
duration: 1.0,
//transition: Effect.Transitions.sinoidal,
afterFinish: function() {
for (var i = 0; i < num; i++)
ul.insert({ bottom: ul.down() });
ul.setStyle('left:0');
}
});
}
}
// previous slide
function previousSlide() {
if (!stopSliding) {
new Effect.Move(ul, {
x: width,
mode: 'relative',
queue: 'end',
duration: 1.0,
//transition: Effect.Transitions.sinoidal,
beforeSetup: function() {
for (var i = 0; i < num; i++)
ul.insert({ top: ul.down('li:last-child') });
ul.setStyle({'position': 'relative', 'left': -width+'px'});
}
});
}
}
then
ul.observe('mouseover', function(event) {
stopSliding = true;
});
ul.observe('mouseout', function(event) {
stopSliding = false;
});
This method works but only Safari will auto start my slideshow now and firefox needs interaction to trigger a start.
However I did find that switching the var to true at the start and switching around the order of the mouseovers it then auto starts fine in Firefox and not in Safari.
Had enough for this evening.

So I managed to get it to work in both Firefox, Safari, IE etc using:
Event.observe( window, 'load', function() { stopSliding = false; });
This ensures that my variable "stopSliding" is set.