I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.
I figured out how to make my image title and caption move using .animate ( http://jsfiddle.net/S8F9Y/ ) :
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Get the slideshow options
var $slidespeed = parseInt( meteorslidessettings.meteorslideshowspeed );
var $slidetimeout = parseInt( meteorslidessettings.meteorslideshowduration );
var $slideheight = parseInt( meteorslidessettings.meteorslideshowheight );
var $slidewidth = parseInt( meteorslidessettings.meteorslideshowwidth );
var $slidetransition = meteorslidessettings.meteorslideshowtransition;
var $captionduration = $slidetimeout - ($slidespeed*2);
$j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
$j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
$j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
// Setup jQuery Cycle
$j('.meteor-slides').cycle({
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
// Setup jQuery TouchWipe
$j('.meteor-slides').touchwipe({
wipeLeft: function() {
$j('.meteor-slides').cycle('next');
},
wipeRight: function() {
$j('.meteor-slides').cycle('prev');
},
preventDefaultEvents: false
});
// Add class to hide and show prev/next nav on hover
$j('.meteor-slides').hover(function () {
$j(this).addClass('navhover');
}, function () {
$j(this).removeClass('navhover');
});
// Set a fixed height for prev/next nav in IE6
if(typeof document.body.style.maxWidth === 'undefined') {
$j('.meteor-nav a').height($slideheight);
}
// Add align class if set in metadata
$j('.meteor-slides').each(function () {
meteormetadata = $j(this).metadata();
if (meteormetadata.align == 'left') {
$j(this).addClass('meteor-left');
} else if (meteormetadata.align == 'right') {
$j(this).addClass('meteor-right');
} else if (meteormetadata.align == 'center') {
$j(this).addClass('meteor-center');
}
});
});
The 1st problem is that there's no cycle so the text animation only
plays once,
the 2nd problem is that text effects are not in sync with slide effects,
the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).
Thanks in advance,
Kim
Use the callback of each slide instead of trying to sync them by time.
$j('.meteor-slides').cycle({
after: function (currSlideElement) {
// Place all your animations here
// Example:
$j(currSlideElement).find('h1').animate();
// ...
},
cleartypeNoBg: true,
fit: 1,
fx: $slidetransition,
height: $slideheight,
next: '#meteor-next',
pager: '#meteor-buttons',
pagerEvent: 'click',
pause: 1,
prev: '#meteor-prev',
slideExpr: '.mslide',
speed: $slidespeed,
timeout: $slidetimeout,
width: $slidewidth
});
Place any captions and animations where it says // Place all your animations here and they will show after each slide has loaded.
You can also use before depending on what's best suited for your slideshow.
Demo here
Find more about how they are used here.
Related
I'm trying to make a cycle div. The wanted final effect is : being able to click on div1 to see div 2. Being able to click div 2 to see div 1 again. Being able to also do this with only keyboard ==> this is done and working.
But the second part of my goal is giving my problems.
Basically I want this : when I hover div1, the slide go to div2. But it has to stop sliding immediately. It must go back to div 1 when the hover is ended.
Here is what I tried but doesnt work :
$(document).ready(function() {
$('#s1').cycle({
fx: 'slideY',
speed: 300,
next: '#s1',
timeout: 0,
after: function (curr, next) {
$(next).find('.goto').focus();
}
});
var cycleConfigured = false;
$('#s1').hover(
function() {
if(cycleConfigured)
$(this).cycle('resume');
else
{
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
slideResize: false,
pause: 0,
after: function() {
$(this).cycle('pause');
}
});
cycleConfigured = true;
}
},
function(){
$(this).cycle('pause');
}
).trigger('hover');
});
jsfiddle http://jsfiddle.net/gy8p5ewv/3/
basically as you can see, when I hover the div, it starts sliding and I cant stop it.
To sump up, here is the wanted effect I cant reach :
on hover container div > go div 2 permanently
on leaving hover container div > go back to div 1 permanently
documentation : http://jquery.malsup.com/cycle/options.html
Instead of getting it complicated, just replace the hover callback with a trigger like this :
$('#s1').hover(function () {
// Trigger a click.
$('#Goto2').click();
});
Working fiddle
When we hover on #s1 we want the div to behave as if #Goto2 was clicked, and switch the slides.
I am trying to create product slider for devices - but the current jquery i am using is using auto slide - does anyone know how i can achieve this?
I have tried deleting auto: 3000, but i get a white box/image instead of the first image.
I need the first image to slide on then stop to allow people to choose to slide though.
var bullets = $('#thumbnails li.sliderindicator');
var elem = document.getElementById('slider');
window.mySwipe = Swipe(elem, {
startSlide: -1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = 'circle';
}
bullets[pos].className = 'on';
}
});
Thanks
try remove
startSlide: -1,
auto: 3000,
i think if startSlide: -1 it will not display first image look this link .It work ok!
I have implemented a content fade in slide show inside the sliding content panel.
Fade in slide show is in the first li of the sliding panel but the problem is since sliding is moving randomly I am not able to show the slide show.
What I need is, Sliding should wait until the slideshow completes its animation. Once slideshow is done then the next li of the sliding panel should come up.
Here is the code used for that
//Fade in slide show
var quotes = $(".inner_detail div");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 1
});
If you wanna see the slideshow effect, please remove the slider code in js and then you can see how slideshow works. (Here a fiddle to show only slideshow)
Here is the working DEMO (in this demo the first sliding li has the slideshow div which cant be seen because sliding is moving fast)
Thanks in advance...
You can not achieve this without modifying the plugin. It doesn't maintain a reference to itself, therefore it is simply a bunch of always running functions. Your can either
Modify the plugin and add a reference to itself as seen here
Write your own version
If you decide to go with the first method, the plugin contains a 'isPaused' property, which you can play with to pause the plugin until your animation is over.
I think you can do it if you know the exact no. of elements in the Slideshow from their your can do simple Steps like
1) Wait_For_SlideToFinish = NO.Of.Elements * (fadeIn_Value + delay_Value + fadeOut_value )
2) Now you can Delay slider for xxx no of seconds Wait_For_SlideToFinish before you can initiate slider function.
If i understood your question then this can work for you.
Do you want something like this?
var quotes = $(".inner_detail div");
var quoteIndex = -1;
var fadeIn_time = 2000, delay_time = 2000, fadeOut_time = 2000;
var time_length = quotes.length*(fadeIn_time + delay_time + fadeOut_time);
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(fadeIn_time )
.delay(delay_time )
.fadeOut(fadeOut_time , showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: time_length,
animation: 'fade',
mousePause: false,
showItems: 1
});
I have found solution for this. I have used callback function to stop the slider until it is done with the action.
//Editorial Slide + Carousel
var isAni = true;
$(window).load(function(){
var quoteIndex = -1;
function showNextQuote(ele,e) {
++quoteIndex;
e.isPaused = true;
if(quoteIndex < ele.length-1){
ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").delay(2000).fadeOut(2000,"swing", function(){
showNextQuote(ele,e)
});
}else{
ele.eq(quoteIndex % ele.length).fadeIn(2000,"swing").fadeOut(2000,"swing",function(){ele.eq(quoteIndex+1 % ele.length).fadeIn(0);
quoteIndex = -1;e.isPaused = false;});
}
}
//showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: true,
showItems: 1,
callback : function(ele,e){
var inner = ele.children("li:first").find("div.inner_detail");
if(inner.length !=0){
quoteIndex = -1;
showNextQuote(inner.find("div"),e);
}
}
});
});
PS - Call back function is written in vticker.js but unfortunately i am not able to post that file here.
Thanks all for your responses!!!
I am using the Nivoslider script for a project of mine. Basically I'm needing to tweak the slider a little to make it do what I want it to do! I need it to do two things:
How can I make it re-direct to a new page after the slideshow is finished? I can make it stop after it cycles through, but I need it to automatically redirect to another page of the site after my images have been shown. I assume this is through using nivosliders function lastslide.
Is there any way of making nivoSlider fade to white, then to the slide instead of crossfading? I tried to add a "white" slide in between the slides, but you can't specify seperate timing for the slides, so it stayed on this "white slide" for 4 seconds, I need it to fade to white for about 0.5 seconds then fade in the next slide.
Here is my code so far:
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){
var $slider = $('#slider img');
$slider.css('opacity',0);
$('#preloader').fadeOut(500, function(){
$slider.animate({'opacity':1}, 500);
});
} // Triggers when slider has loaded
});
});
</script>
Thanks for any help!
For your first question, just add this line in your afterLoad function()
window.location = "http://google.com"
I am using the jquery cycle plugin with a custom animation. It is working great!
However, I would like the slides to advance to the right or left depending upon the index#, i.e. if the user clicks on link 1 while slide #3 is the active slide the animation will transition out to the right, while if link 4 was clicked on the slide would transition to the left.
The functionality I'm looking for is the same as the scrollHorz/scrollVert transitions.
I understand that what I need is some logic to relate the current frame and the next frame: if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}
I just don't know where to put it in the code. I hope that makes sense. Any help would be greatly appreciated! Thanks!
Not that it probably helps, but my custom code is below.
$('#s4').before('<div id="nav" class="nav">').cycle({
fx: 'custom',
cssBefore:{
left:1000,
opacity:0,
display:'block'
},
animIn:{
left:0,
opacity:100
},
animOut:{
left:-1000,
opacity:0
},
cssAfter:{
display:'none'
},
speed: 'slow',
easeIn: 'easeInExpo',
easeOut: 'easeInExpo',
next: '.nextnav',
prev: '.previous',
timeout: 0,
containerResize: 1,
fit: 0,
height: 600,
pager: '#slideshow-nav',
pagerAnchorBuilder: function(idx, slide) {
return '#slideshow-nav li:eq(' + (idx) + ')';
}
});
You need to hook into to onPrevNextEvent. They have something called isnext wich gets passed wich basically tells you which direction you are going in.
Example I updated a fiddle I whipped up yesterday for cycle.
http://jsfiddle.net/gx3YE/12/
$(function() {
$('#megaWrapper').cycle({
next : "#next",
prev : "#prev",
timeout : 0,
onPrevNextEvent: function(is,i,el) {
if (is === true) {
alert('slide right');
}
else {
alert('slide left');
}
}
});
});
Isn't what you're describing part of Cycle's core functionality?
Here's how I do it:
$('.slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '#next',
prev: '#prev'
});