Related
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/
So I have created a simple morphing button concept. Everything seems good. Except from the fact that after opening and closing the button about 4-5 times, everything seems to mess up and get muddled.
Here is the Fiddle: https://jsfiddle.net/f793yvh5/22/
Here's part of the jQuery:
function Morphing( button, container, content) {
this.button = button;
this.container = container;
this.content = content;
this.overlay = $('div.overlay');
this.span = $('span.close');
var self = this; // so you have a reference to this this.
this.positions = {
endPosition : {
top: 100,
left: '50%',
width: 600,
height: 400,
marginLeft: -300
},
startPosition : {
top: self.container.css('top'),
left: self.container.css('left'),
width: self.container.css('width'),
height: self.container.css('height'),
marginLeft: self.container.css('margin-left')
}
};
}
Morphing.prototype.startMorph = function() {
var self = this;
this.button.on('click', function() {
$(this).fadeOut(200);
// Work on from here!
setTimeout(self.containerMove.bind(self), 200);
});
};
Morphing.prototype.containerMove = function() {
var self = this;
this.overlay.fadeIn();
this.container.addClass('active');
this.container.animate(this.positions.endPosition, 400, function() {
self.content.fadeIn();
self.span.fadeIn();
self.close();
});
};
Morphing.prototype.close = function() {
var self = this;
this.span.on('click', function() {
self.content.fadeOut();
self.span.fadeOut();
self.overlay.fadeOut();
setTimeout(self.animateBack.bind(self), 275);
});
};
Morphing.prototype.animateBack = function() {
var self = this;
this.container.animate(this.positions.startPosition, 400, function() {
self.button.fadeIn(300);
self.container.removeClass('active');
});
};
The other part:
$(document).ready(function() {
var morph = new Morphing( $('button.morphButton'), $('div.morphContainer'), $('h1.content, p.content') );
morph.startMorph();
});
To sum up, this is what jQuery is doing:
Button is clicked:
1. Button fades out,
2. Container behind the button is therefore visible,
3. Overlay fades in,
4. Container animates to center of screen,
5. Content in container fades in.
When the 'X' is pressed:
1. Content fades out,
2. Overlay fades out,
3. Container animates back to button,
4. Button fades in over the container.
Thanks.
Each time you call:
Morphing.prototype.close = function() {
var self = this;
this.span.on('click', function() {
self.content.fadeOut();
self.span.fadeOut();
self.overlay.fadeOut();
setTimeout(self.animateBack.bind(self), 275);
});
};
You define a on click for the span in your newContainer.
Add:
$.fn.once = function(a, b) {
return this.each(function() {
$(this).off(a).on(a,b);
});
};
at the end of your code and then:
Morphing.prototype.close = function() {
var self = this;
this.span.once('click', function() {
self.content.fadeOut();
self.span.fadeOut();
self.overlay.fadeOut();
setTimeout(self.animateBack.bind(self), 275);
});
};
and it should be ok.
Here is an updated Fiddle
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).
this is my website demo : http://daplonline.in/index5.php
i got this jquery from : http://designm.ag/tutorials/image-rotator-css-jquery/
i want to stop slider automatic to stop when user Mouse hover on Small thumb image current slide is automatic and user can't read image's advertise
i want to make automatic but when user click or mouse hover on small image slider must stop.
my jquery code is here
<script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions
$(document).ready(function() {
// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
// Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
var imgDesc = $(this).find('.block').html(); // Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block
if ($(this).is(".active")) { // If it's already active, then...
return false; // Don't click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
$(this).addClass('active'); // add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");
if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}
$(currentImage).removeClass("active");
$(nextImage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextImage).find('img').attr("alt");
var imgTitle = $(nextImage).find('a').attr("href");
var imgDesc = $(nextImage).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};
});// Close Function
</script>
try this,
$('.image_thumb ul li').on("mouseover",function(){
clearInterval(intervalID);
});
$('.image_thumb ul li').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
add this at the end of your coding...
Add this code at the end of your script.. I guess the mouse-over will pause the slider but i m not sure if the mouseout works or not.. Just give it a try and let me know about the result.
$('.main_image').on("mouseover",function(){
clearInterval(intervalID);
});
$('.main_image').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
Adding the above lines will make the code as below:
<script type="text/javascript">
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions
$(document).ready(function() {
// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
// Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
var imgDesc = $(this).find('.block').html(); // Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block
if ($(this).is(".active")) { // If it's already active, then...
return false; // Don't click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
$(this).addClass('active'); // add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");
if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}
$(currentImage).removeClass("active");
$(nextImage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextImage).find('img').attr("alt");
var imgTitle = $(nextImage).find('a').attr("href");
var imgDesc = $(nextImage).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};
$('.main_image').on("mouseover",function(){
clearInterval(intervalID);
});
$('.main_image').on("mouseout",function(){
intervalID = setInterval(cycleImage, slidetime);
});
});// Close Function
</script>
you need to clear the interval for image rotation:
$(function(){
var stop;
function rotate(){
stop = setInterval(change, 1000);
}
rotate();
//Use the event you want to stop image rotation
$("#ok").click(function(){
clearInterval(stop);
});
});
$( "..." ) .mouseover(function() {
//Stop the animation here
$( "..." ).stop();
}).mouseout(function() {
//Do your animation here
$( "...").animate();
});
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.