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/
Related
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);
I have a very strange behaviour of my script: only from time to time (seldom 3-4 times at one time right after each other, but more likely every 7th to 150th trial) the skript loads, but I only see a white canvas and get the error message:
Uncaught TypeError: Cannot read property 'getParent' of
undefinedKonva.Util.addMethods.add # konva.min.js:44draw #
floorplansurvey.php:950(anonymous function) #
floorplansurvey.php:985images.(anonymous function).onload #
floorplansurvey.php:390
On reload it often works again...
I just have no idea at all what is happening here, the bug can't be forced/reproduced, I thank you so much, if you have anything you can help me with. Even a strategy for a clearer analysis would be helpful, sorry for being that unspecific and the long code
edit: I've made a jsfiddle under:
https://jsfiddle.net/17548hmv/1/
run it several times, until the error occures
these are the code snippets at:
# floorplansurvey.php:390:
function loadImages(sources, draw) {
//window.location.reload(true);
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
draw(images);
}
};
images[src].src = sources[src];
}
delete (loadedImages);
delete (numImages);
};
# floorplansurvey.php:985images.(anonymous function).onload:
loadImages(sources, function(images) {
draw(images);
});
# floorplansurvey.php:950(anonymous function):
bglayer.add(plan);
# konva.min.js:44draw:
I dont understand this one myself
add:function(t)
{if(arguments.length>1)
{for(var e=0;e<arguments.length;e++)
this.add(arguments[e]);
return this}if(t.getParent())return t.moveTo(this),this;
var n=this.children;
return
Var sources is defined like:
var sources = {
Cd: './graphics/Cd.png',
Cu: './graphics/Cu.png',
Ca: './graphics/Ca.png',
Cs: './graphics/Cs.png',
Cc: './graphics/Cc.png',
Ed: './graphics/Ed.png',
Eu: './graphics/Eu.png',
Ea: './graphics/Ea.png',
Es: './graphics/Es.png',
Ec: './graphics/Ec.png',
Hd: './graphics/Hd.png',
Hu: './graphics/Hu.png',
...and so on
and this is the function draw:
function draw(images) {
for (i=0, len=showdatax.length; i<=len-1; i++)
{
//window.location.reload(true);
var gridcell = new Konva.Rect({
x: parseInt((imagesizeX - showdatax[i])*scalar-(gridcellsize/2)),
y: parseInt((imagesizeY - showdatay[i])*scalar-(gridcellsize/2)),
offset: [0, 0],
width: gridcellsize,
height: gridcellsize,
//fill: 'white',
//stroke: 'grey',
//strokeWidth: 2,
draggable: false,
id: showdatav[i]
});
gridlayer.add(gridcell);
}
//defaultsettiongs
var init = new Array();
init['x'] = new Array();
init['y'] = new Array();
init['x']['c'] = 0*scalar;
init['y']['c'] = 170*scalar;
init['x']['e'] = 0*scalar;
init['y']['e'] = 320*scalar;
init['x']['h'] = 0*scalar;
init['y']['h'] = 470*scalar;
init['x']['l'] = 0*scalar;
init['y']['l'] = 620*scalar;
init['x']['s'] = 0*scalar;
init['y']['s'] = 770*scalar;
init['x']['w'] = 0*scalar;
init['y']['w'] = 920*scalar; var step = 0;
var count = new Array (
'c','e','h','l','s','w');
count['c'] = 0;
count['e'] = 0;
count['h'] = 0;
count['l'] = 0;
count['s'] = 0;
count['w'] = 0;
var starttime = new Date();
var loghistory = '';
//drag event functions
function mouseoverbox (box,active)
{
writeMessage('Click and hold the left mouse button and pull this activity icon to the floorplan.');
box.setFillPatternImage(active);
box.shadowColor('blue');
box.moveTo(templayer);
badgelayer.draw();
templayer.draw();
}
function dragstarttouchstartbox (box,pos,kind)
{
//count[kind]++;
writeMessage('dragstart' + count[kind]);
var boxx = box.x;
box.x(pos.x-1.5*gridcellsize);
var boxy = box.y;
box.y(pos.y-1.5*gridcellsize);
var boxrshadowoffsetx = box.shadowOffset();
box.shadowOffset({x:0.25*gridcellsize,y:0.25*gridcellsize});
box.moveTo(templayer);
badgelayer.draw();
templayer.draw();
}
function dragmovebox (box,pos,kind,success,active,caution)
{
writeMessage('Your outside of the floorplan. Dropping the activity icon will reset it to its initial position.');
box.moveTo(templayer);
var boxx = box.x;
box.x(pos.x-1.5*gridcellsize);
var boxy = box.y;
box.y(pos.y-1.5*gridcellsize);
var shape = gridlayer.getIntersection(pos);
if (shape)
{
if (!badgelayer.getIntersection(pos))
{
writeMessage('Release the mouse button to place this activity icon on position (' + shape.x() + '|' + shape.y() + ')');
box.x(shape.x()-gridcellsize);
box.y(shape.y()-gridcellsize);
box.setFillPatternImage(success);
box.shadowColor('green');
badgelayer.draw();
}
else
{
writeMessage('Position (' + shape.x() + '|' + shape.y() + ') is in use!!! Can\'t allocate second activiy icon here.');
var boxx = box.x;
box.x(pos.x-1.5*gridcellsize);
var boxy = box.y;
box.y(pos.y-1.5*gridcellsize);
box.setFillPatternImage(caution);
box.shadowColor('red');
badgelayer.draw();
}
}
else
{
box.setFillPatternImage(active);
box.shadowColor('blue');
templayer.draw();
badgelayer.draw();
}
}
function dragendtouchendbox (box,pos,kind,caution,defaultimage)
{
var shape = gridlayer.getIntersection(pos);
box.moveTo(badgelayer);
templayer.draw();
if (shape && !(badgelayer.getIntersection(pos)))
{
writeMessage('Activity icon successfully placed at position (' + shape.x() + '|' + shape.y() + ').');
box.shadowOffset({x:0,y:0});
box.shadowColor('green');
}
else
{
box.shadowColor('red');
box.setFillPatternImage(caution);
badgelayer.draw();
var fromouttween = new Konva.Tween
({
node: box,
x: init['x'][kind]+imagesizeX*scalar+ gridcellsize,
y: init['y'][kind],
easing: Konva.Easings['EaseOut'],
duration: 0.3
});
if (!shape)
{
writeMessage('Please drop the activity icons inside the floorplan.');
}
else if (badgelayer.getIntersection(pos))
{
writeMessage('Please don\'t drop the activity icons onto a used place.');
}
fromouttween.play();
box.shadowColor('black');
box.setFillPatternImage(defaultimage);
box.shadowOffset({x:0,y:0});
badgelayer.draw();
pos.x=-100;
pos.y=-100;
}
count['kind']++;
step++;
writeResultToForm(pos,count,kind,step,loghistory,starttime);
badgelayer.draw();
templayer.draw();
//writeMessage('dragend');
}
function mouseoutbox (box,defaultimage)
{
box.setFillPatternImage(defaultimage);
box.moveTo(badgelayer);
box.shadowColor('black');
if (!validateForm(false))
{
writeMessage('There are still activity icons left to place.');
}
else
{
writeMessage('All activity icons are placed successfully. You can click "continue" now or change your placements.');
}
badgelayer.draw();
templayer.draw();
}
function alertbox (box,caution)
{
box.setFillPatternImage(caution);
box.shadowcolor('red');
badgelayer.draw;
}
//cbox and text
var textc = new Konva.Text({
x: init['x']['c']+imagesizeX*scalar+gridcellsize*5,
y: init['y']['c']+gridcellsize,
text: 'Cooking',
align: 'left',
width: badgetextwidth
});
var boxc = new Konva.Rect({
x: init['x']['c']+imagesizeX*scalar+gridcellsize,
y: init['y']['c'],
offset: [0, 0],
width: 3*gridcellsize,
height: 3*gridcellsize,
fillPatternImage: images.Cd,
fillPatternScaleX: scalar,
fillPatternScaleY: scalar,
stroke: 'black',
strokeWidth: 4,
draggable: true,
cornerRadius: gridcellsize/2,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: {x : 0, y : 0},
shadowOpacity: 0.5
});
var boxcd = new Konva.Rect({
x: init['x']['c']+imagesizeX*scalar+gridcellsize,
y: init['y']['c'],
offset: [0, 0],
width: 3*gridcellsize,
height: 3*gridcellsize,
fillPatternImage: images.Cu,
fillPatternScaleX: scalar,
fillPatternScaleY: scalar,
stroke: 'grey',
strokeWidth: 2,
draggable: false,
cornerRadius: gridcellsize/2,
});
boxc.on('mouseover ', function() {
mouseoverbox (this,images.Ca);
});
boxc.on('dragstart', function() {
var pos = stage.getPointerPosition();
dragstarttouchstartbox (this,pos,'c');
});
boxc.on('dragmove', function () {
var pos = stage.getPointerPosition();
dragmovebox(this,pos,'c',images.Cs,images.Ca,images.Cc);
});
boxc.on('dragend', function() {
var pos = stage.getPointerPosition();
dragendtouchendbox (this,pos,'c',images.Cc,images.Cd);
});
boxc.on('mouseout ', function() {
mouseoutbox (this,images.Cd)
});
boxc.on('foo', function() {
alertbox (this,images.Cd)
});
//ebox and text
var texte = new Konva.Text({
x: init['x']['e']+imagesizeX*scalar+gridcellsize*5,
...and so on for all the boxes addes here (5 times as long):
defaultlayer.add(boxcd);
badgelayer.add(boxc);
defaultlayer.add(textc);
defaultlayer.add(boxed);
badgelayer.add(boxe);
defaultlayer.add(texte);
defaultlayer.add(boxhd);
badgelayer.add(boxh);
defaultlayer.add(texth);
defaultlayer.add(boxld);
badgelayer.add(boxl);
defaultlayer.add(textl);
defaultlayer.add(boxsd);
badgelayer.add(boxs);
defaultlayer.add(texts);
defaultlayer.add(boxwd);
badgelayer.add(boxw);
defaultlayer.add(textw);
stage.add(bglayer);
stage.add(gridlayer);
stage.add(defaultlayer);
stage.add(badgelayer);
stage.add(templayer);
}
OK, sorry that it took me so long:
the solution wasn't that easy to find. I found that the script was loaded asynchronously and the png wasn't yet available by using chromes timeline analysis. so i went to my code and had to distinguish between the things, that really should be in the draw function and which not. i added the plan to the array of images (sources) that is loaded (src= ...) before executing draw() and then added
sources.onload= loadImages(sources, function(images) {
draw(images);
});
at the end of my file... no it works without any problem. konva.js had nothing to do with it and is up to now (I'm almost ready) like designed for my project
thanks for the tip #lavrton, it took me on the right way
and you can just put like this:
var imageObj = new Image();
imageObj.src = 'http://localhost:8000/plugins/kamiyar/logo.png';
imageObj.onload = function() {
var img = new Konva.Image({
image: imageObj,
x: stage.getWidth() / 2 - 200 / 2,
y: stage.getHeight() / 2 - 137 / 2,
width: 200,
height: 137,
draggable: true,
stroke: 'blue',
strokeWidth: 1,
dash: [1,5],
strokeEnabled: false
});
layer.add(img);
layer.draw();
};
sorry for my bad English ;)
Does anyone have any ideas why this is not working? Seems to hit the first background but then does not change position.
// Avatar animations
var fadePulse = true; // true: will fade avatar images and pulse in and out once changed
// false: will slide the avatars in and out
var avatarCount = 5; // set the amount of avatars in the sprite image
var avatarSpeed = 2 // set the avatar transition speed
var avatarHeight = 250; // set the height of a single avatar image
var avatars = creative.avatars;
var animDuration = 0.4;
var avatarCurrentIndex = 0;
var avatarAni = new TimelineLite({ paused: true, repeat: -1 });
function startAvatarAnimation() {
show(avatars);
avatarAni.to(avatars, animDuration, {
scaleX: 1, // 1.1 (for bouncing)
scaleY: 1, // 1.1 (for bouncing)
ease: Power3.easeIn,
onComplete: onCompleteScaleIn
});
avatarAni.to(avatars, animDuration, {
scaleX: 1,
scaleY: 1,
ease: Power3.easeOut
});
avatarAni.timeScale(avatarSpeed);
avatarAni.play();
}
function onCompleteScaleIn() {
avatarCurrentIndex ++;
console.log(avatarCurrentIndex ++);
if(avatarCurrentIndex <= avatarCount-1){
TweenLite.set(avatars, {
backgroundPosition: '0 -' + (avatarCurrentIndex * avatarHeight) + 'px'
});
} else {
avatarAni.pause();
hide(avatars);
}
}
It all seems to work apart from that part with looping through and adjusting the position.
// Avatar animations
var fadePulse = true; // true: will fade avatar images and pulse in and out once changed
// false: will slide the avatars in and out
var avatarCount = 5; // set the amount of avatars in the sprite image
var avatarSpeed = 2 // set the avatar transition speed
var avatarHeight = 250; // set the height of a single avatar image
var avatars = creative.avatars;
var animDuration = 0.4;
var avatarCurrentIndex = 0;
var i = 0;
var avatarAni = new TimelineMax({ paused: true, repeat: -1 });
function startAvatarAnimation() {
show(creative.avatars);
avatarAni.to(avatars, animDuration, { scaleX: 1, scaleY: 1, ease: Power3.easeIn, onComplete: onCompleteScaleIn });
avatarAni.to(avatars, animDuration, { scaleX: 1, scaleY: 1, ease: Power3.easeOut });
avatarAni.timeScale(avatarSpeed);
avatarAni.play();
}
function onCompleteScaleIn() {
i++;
if(i <= avatarCount-1){
TweenMax.set(avatars, { backgroundPosition: '0 -' + (i * avatarHeight) + 'px' });
} else {
avatarAni.pause();
hide(avatars);
}
}
Fiddle: https://jsfiddle.net/h405kbaa/
Sometimes the button.fadeIn(300); (Line 78 and 171) don't seem to work.
Usually, if you press the first button, close it, press the second button, close it, open the first button again, then close it, the button will not fadeIn but instead be hidden with display:none;. Why is this happening?
jQuery:
$(document).ready(function() {
// fix span and display on button
var morphObject = {
button: $('button.morphButton'),
container: $('div.morphContainer'),
overlay: $('div.overlay'),
content: $('h1.content, p.content'),
endPosition: {
top: 100,
left: '50%',
width: 600,
height: 400,
marginLeft: -300
},
init: function() {
var mO = morphObject,
button = mO.button;
button.on('click', function() {
button.fadeOut(200);
setTimeout(mO.containerMove, 200);
});
},
containerMove: function() {
var mO = morphObject,
content = mO.content,
overlay = mO.overlay,
container = mO.container,
span = $('span.close');
overlay.fadeIn();
container.addClass('active');
container.animate(mO.endPosition, 400, function() {
content.fadeIn();
span.fadeIn();
mO.close();
});
},
close: function() {
var mO = morphObject,
container = mO.container,
overlay = mO.overlay,
content = mO.content;
if ( container.find('span.close').length ) return;
$('<span class="close">X</span>').appendTo(container);
var span = $('span.close');
span.on('click', function() {
content.fadeOut();
span.fadeOut();
overlay.fadeOut();
setTimeout(mO.animateBack, 200);
});
},
animateBack: function() {
var mO = morphObject,
container = mO.container;
button = mO.button;
container.animate(mO.startPosition, 400, function() {
container.removeClass('active');
button.fadeIn(300);
});
}
}
// End of morphObject One
var container = morphObject.container;
morphObject.startPosition = {
top: container.css('top'),
left: container.css('left'),
width: container.css('width'),
height: container.css('height'),
marginLeft: container.css('margin-left')
};
var morphObjectTwo = {
button: $('button.newButton'),
container: $('div.newContainer'),
overlay: $('div.overlay'),
content: $('h1.newContent, p.newContent'),
endPosition: {
top: 100,
left: '50%',
width: 600,
height: 400,
marginLeft: -300
},
init: function() {
var mO = morphObjectTwo,
button = mO.button;
button.on('click', function() {
button.fadeOut(200);
setTimeout(mO.containerMove, 200);
});
},
containerMove: function() {
var mO = morphObjectTwo,
content = mO.content,
overlay = mO.overlay,
container = mO.container,
span = $('span.close');
overlay.fadeIn();
container.addClass('active');
container.animate(mO.endPosition, 400, function() {
content.fadeIn();
span.fadeIn();
mO.close();
});
},
close: function() {
var mO = morphObjectTwo,
container = mO.container,
overlay = mO.overlay,
content = mO.content;
if ( container.find('span.close').length ) return;
$('<span class="close">X</span>').appendTo(container);
var span = $('span.close');
span.on('click', function() {
content.fadeOut();
span.fadeOut();
overlay.fadeOut();
setTimeout(mO.animateBack, 200);
});
},
animateBack: function() {
var mO = morphObjectTwo,
container = mO.container;
button = mO.button;
container.animate(mO.startPosition, 400, function() {
container.removeClass('active');
button.fadeIn(300);
});
}
}
var container = morphObjectTwo.container;
morphObjectTwo.startPosition = {
top: container.css('top'),
left: container.css('left'),
width: container.css('width'),
height: container.css('height'),
marginLeft: container.css('margin-left')
};
morphObject.init();
morphObjectTwo.init();
});
Please note, the jQuery contains two objects which are identical, only with different properties for different buttons, containers, etc. This means you need to change the code on both objects. The first object ends on line 85, and the second ends on line 176. Both objects are called at the bottom.
Just remove this line from js script
button.fadeOut(200);
Figured it out...
Didn't correctly define the variables:
animateBack: function() {
var mO = morphObject,
container = mO.container;
button = mO.button;
Should be:
animateBack: function() {
var mO = morphObject,
container = mO.container,
button = mO.button;
(The comma).
I am newbie. I can't sprite animation using jquery..
What's the problem?
How can make progressing the sprite animation on the spot loop as scroll??
$(window).scroll('scroll',function(e){
parallaxScroll();
});
function parallaxScroll() {
var ani_data = [0, -120, -240, -480];
var frame_index = 0;
if ( ScrollCount == 3 ) {
ScrollCount = 1;
$('#fatherwalk').css('background-position', ani_data[frame_index] + 'px 0px');
frame_index++;
if ( frame_index >= ani_data.length ) {
frame_index = 0;
}
}
scrollcount++;
}
Why you don't get a shortcut and try SpinJS?
http://fgnass.github.io/spin.js/
It's so easy to implement and works fine.
Here is a Sample that I've made on JSFiddle
Below a quick implementation of the JS:
$.fn.spin = function (opts) {
this.each(function () {
var $this = $(this),
spinner = $this.data('spinner');
if (spinner) spinner.stop();
if (opts !== false) {
opts = $.extend({
color: $this.css('color')
}, opts);
spinner = new Spinner(opts).spin(this);
$this.data('spinner', spinner);
}
});
return this;
};
$(function () {
$(".spinner-link").click(function (e) {
e.preventDefault();
$(this).hide();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
color: '#fff', // #rbg or #rrggbb
speed: 1, // Rounds per second
trail: 66, // Afterglow percentage
shadow: true // Whether to render a shadow
};
$("#spin").show().spin(opts);
});
});
Hope this helps.