Develop Reference

jQuery cycle for text animation on a slideshow

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.

jQuery - How do I change view based on mouseOver?

I made the home page of my site so that when you mouse over the different service offerings that the related image would also display. However when Malsup's hosting of Cycle came off github the function was lost.
Here is the code I am using that worked before but no longer works correctly. The slideshow still cycles through, but the mouseover function does not work correctly.
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager : '#slideshow-nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
speed: 1000,
delay: 3000,
timeout: 9000,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true
});
});
</script>
What changes do I need to make to get it working again?
Thanks.

Try this 'command' of the plugin libary, it will do the trick.
<script type="text/javascript">
$(document).ready(function(){
$("#skills li").click(function(){
id = $(this).attr('id');
imgIndexToJump = id.substr(1); //extracting number as index from id
imgIndexToJump = parseInt(imgIndexToJump, 10);
$('.slideshow').cycle('goto', imgIndexToJump);
});
});
</script>
assign ids to ur list in skills like this and it will work.
<ul id="skills">
<li id="a0">
a1-data
</li>
<li id="a2">
a1-data
</li>
</ul>

Break one jQuery Easing plugin animation into two (left + right)?

I have this code in which jQuery Easing plugin is being used to switch between Testimonials.
This code can be seen here (go to Testimonials section): http://jsfiddle.net/ahmadka/3hkwz/
When you open the Testimonials section, you'll see 2 buttons at the bottom for switch left (called prev) and right (called next) between the Testimonials.
The code works, but it uses the same scrollLeftEasing animation for going both left and right. I want to update the code so that when prev is clicked, the animation used should be scrollRight, not scrollLeft ..
The same JavaScript is used to link both prev and next's clicks to the same Easing animation code:
$('.scrollable4 .items').cycle({
fx: 'scrollRight',
speed:700,
timeout: 0,
next: '.next',
prev: '.prev',
easing: 'easeInOutBack',
})
How do I split them up ?
Also, there is an attached JavaScript resource file which contains some relevant code:
Deminify this: http://www.jenierteas.com/templates/default/js/jquery.cycle.all.2.74.pack.js
Then go to line 118, and you'll see this snippet:
case "prev":
case "next":
var u = i(q).data("cycle.opts");
if (!u) {
f('options not found, "prev/next" ignored');
return false
}
i.fn.cycle[t](u);
return false;
So can someone help me here ? I'm baffled ..

You can change your fx transition to scrollHorz it handles automatically the correct direction.
Code:
$('.scrollable4 .items').cycle({
fx: 'scrollHorz',
speed:700,
timeout: 0,
next: '.next',
prev: '.prev',
easing: 'easeInOutBack'
})
Demo: http://jsfiddle.net/IrvinDominin/TE9Bq/

Basic jQuery Slider - Current Slide Number

I'm currently having issues displaying the current slide number, basically I need to have the current slides number inserted into a span class called current slide. I'm using follow jquery slider: http://basic-slider.com
I'm using this snippet to call the script.
jQuery(document).ready(function($) {
var total = jQuery('.bjqs li').length;
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : false,
responsive : false
});
jQuery('#slider-status > .total-slides').html(total);
});
According to the design it needs to be shown as 1(current slide) / 3(being total amount)
Any help would be very much appreciated!

If you are not using bjqs min file you can modify set_next function to get current slide number and apped it to span.

Try this:
$('#banner-slide').bjqs({
animtype : 'slide',
height : 490,
width : 695,
showmarkers : true, // set it to true
responsive : false
});
From http://basic-slider.com/
showmarkers : true, // Show individual slide markers

jquery cycle slideshow - adding slide prev/next progression (a la scrollHorz) along with custom animation

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'
});