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/
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.
This is a last ditch attempt to try to achieve what I need from this slider. I have implemented a jquery content slider called 'Super Simple Slider' on my website. I have never used this before and so far it has been super simple. However I need the first slide of the slider to display for slightly longer than all of the other slides. 10 seconds. However after much research I can not find a way to do this. Can anybody see a workaround so I can make this happen? Can I perhaps use pure JavaScript along with the jQuery to make this happen?
Below is the jQuery for the slider
<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 7000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
});
</script>
I think the best way to do it is to make some (easy) changes in the plugin:
1. Add an option (to keep it configurable) : speedOnFirst (for example)
In the plugin settings:
var settings = $.extend({
slideShow : true,
startOn : 0,
speed : 3500,
speedOnFirst : 3500, // <--- HERE
transition : 400,
arrows : true
}, options);
2. Change the timeout in reset_timer function
Check if target == 0 (it means it's the first slide), and then, base your timeout on settings.speedOnFirst instead of settings.speed
reset_timer = settings.slideShow ? function() {
clearTimeout(timer);
speed = (0 !== target) ? settings.speed : settings.speedOnFirst; // <--- HERE
timer = setTimeout(next_slide, speed); // <--- Change second param here
} : $.noop;
3. Call your plugin
$('.slider').sss({
slideShow : true,
startOn : 0,
transition : 400,
speed : 7000,
speedOnFirst : 10000, // <--- Delay for your first slide
showNav : true
});
>> See working demo here
NB: In the demo, the slides changes quickly so as you can see the difference with the first one, juste change the values with whatever you need.
You will need to customize the plugin to accomplish what you need.
Look at the non minified version (sss.js) and add the following logic:
Add an extra option:
var settings = $.extend({
slideShow: true,
startOn: 0,
speed: 3500,
transition: 400,
arrows: true,
firstSlideSpeed:10000 // new setting for first slide speed
}, options);
Change the slide logic:
reset_timer = settings.slideShow ? function () {
clearTimeout(timer);
var slideSpeed = ((target === 0) && settings.firstSlideSpeed) ? settings.firstSlideSpeed : settings.speed; // changed here
timer = setTimeout(next_slide, slideSpeed); // changed here
} : $.noop;
This should do the trick for you.
Hope it helps!
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'
});
Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.
Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter
});
});
function onAfter(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
in use with cycle all plugin.
thanks for any help!
so I've changed to this as instructed.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
after: onAfter1
});
});
currentSlide = $("#caption1 a.activeSlide").html()
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
which works fine after the first slide but the first slide randomly says this:
Prev Next (1/111234567891011)
Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?
if I change to this:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
});
currentSlide = $("#caption1 a.activeSlide").html()
});
</script>
It just says 12345678910 instead of 1 of etc.
Edit:
I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
pager: '.thepager',
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr, next, opts) {
currentSlide = $(".thePager a.activeSlide").html();
if (!currentSlide) currentSlide = "1";
$('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}
</script>
but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :(
and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.
EDIT!
I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
you could "fiddle" with its native navigation and get the current picture number, for example:
$('.selector').cycle({
fx: 'scrollLeft',
pager: '.selctorOfPagination',
timeout: 15000,
pause: 1,
next: '.selectorOfNext',
prev: '. selectorOfPrevious'
});
check the pager example here: http://jquery.malsup.com/cycle/int2.html
EDIT: check my example here:
http://jsfiddle.net/jackJoe/7DRSv/
You can check which is the current image by obtaining the html of the pager:
currentSlide = $(".thePager a.activeSlide").html()
And then you can use that variable which is correct and you don't need to "guess" which image is current.
EDIT 2:
Check my new example:
http://jsfiddle.net/jackJoe/7DRSv/2/
P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.
EDIT 3:
New example with a stopped animation, triggered by the next and previous buttons:
http://jsfiddle.net/jackJoe/7DRSv/3/
One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!
You need to use somekind of animation (you can specify the speed in miliseconds);
for an alternative to the "none", use the fx = 'fade' and speed: 1...
I'm using localScroll to create a content slider. The problem is that I want to give a fade effect to the div that I'm sliding out, to make it fade before it disappears.
Does anyone have any idea how can I make this? I tried something with onBefore and onAfter but I didn't get what I expected.
Thanks!
LE: here is the code that I'm using:
$(document).ready(function() {
var localScroll = $('#slider .slideshow-wrapper')
var localSections = $('#slider .slideshow-wrapper ul.slideshow li');
var local = $('#slider ul.slideshow');
local.css('width', localSections[0].offsetWidth * localSections.length);
var localScrollOptions = {
target: localScroll,
items: localSections,
navigation: 'ul.tabs li a',
hash: 'false',
axis: 'xy',
duration: 500,
easing: 'swing'
//onAfter: fadeAway
};
$('.container').serialScroll(localScrollOptions);
$('ul.tabs').find('a span').click(selectNav);
});
You can't use fadeOut because it sets the div style to display:none and thus the div has a zero height and width making the scrollTo plugin mess up pretty bad. I would suggest using opacity. In the code below I set the minimum opacity to 0.2 because when I set it to zero, it was hard to tell the content was scrolling.
I took the LocalScroll Demo and made these modifications - it seems to work pretty well. I didn't try to match your code because I know the code below works with the demo and your question title says localScroll but your code uses serialScroll. Anyway, I'm guessing the ul.slideshow li in your code should be equivalent to the .sub in the code below.
$.localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue: false,
duration: 500,
hash: false,
easing: 'swing',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
$('.sub').animate({ opacity: 0.2 }, 250);
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
$(anchor).animate({ opacity: 1 }, 250);
}
});
Edit: I posted a demo at this pastebin
See: http://docs.jquery.com/Effects/queue