jquery cycle, link to other page on last slide - javascript

I'm working on a website using jquery cycle (1st version).
I have pages including a slideshow, I navigate into my slideshow with #next function.
when clicking on my last slide of my slideshow it redirect me to another page (var random_next_url_enfant).
it works fine, but my cycle starts again just before changing to the next page. (last slide, then first slide displays briefly and then link to the next page)...
see this example :
http://www.jacques-ferrier.com/projets/choisy-le-roi/
I would like to know if someone knows a trick to stop the slideshow and change page without latency. When the last slide from my slideshow is displayed, stop the sliding navigation, and when clicking goes directly to my link. I thought that the "e.preventDefault()" would do this but it doesn't.
here is my js code :
$('#slider_projets').cycle({
speed: 600, //temps d'animation
timeout: 0, //fréquence
fx: 'scrollLeft',
//compteur//
pager: "#nav",
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
$('#counter').text((options.currSlide + 1) + ' / ' + (options.slideCount));
slideIndex = options.currSlide;
nextIndex = slideIndex + 1;
prevIndex = slideIndex - 1;
if (slideIndex == options.slideCount - 1) {
nextIndex = 0;
var random_next_url_enfant = $("#random_next_url_enfant").val();
$('#next').on("click", function(e){
e.preventDefault();
window.location = random_next_url_enfant;
});
}
if (slideIndex === 0) {
prevIndex = options.slideCount - 1;
}
}
});
$('#next').click(function() {
$('#slider_projets').cycle(nextIndex, "scrollLeft");
});
here is a jsfiddle : http://jsfiddle.net/GahHQ/
hope you can help me,
thanks a lot

Related

Make last image in slider pause before reseting loop (slider from scratch)

I'm working on a slider from scratch (trying to get the hang of it) but I've come up with a problem. In my slider all slides take 3 seconds before going to the next one, but once the last slide has been reached, no time to view it is given.
I want to add a smooth transition from the last slide to the first.
Here's a fiddle http://jsfiddle.net/4wnrwkf0/
function startSlider() {
interval = setInterval(function() {
$sliderContainer.animate({'margin-left': '-=+100%'}, animationSpeed, function() {
if (++currentSlide === $slides.length+1) {
currentSlide = 1;
$sliderContainer.css('margin-left', 0);
}
});
}, pause);
}
I'm guessing my problem is somewhere around this code
For the time being I'm using a blank slide at the end...but I don't want to leave it like that :P
Thanks in advance
EDIT:
I found a working solution by repeating the first slide at the end of the ul, seems a bit hackish so if anyone has an idea, i'm willing to try alternatives. Anyways...in case anyone finds it useful: http://jsfiddle.net/eclipticald/2gLh5ks0/
See this fiddle if the effect resolved your problem -- http://jsfiddle.net/4wnrwkf0/5/
FROM:
if (++currentSlide === $slides.length+1) {
currentSlide = 1;
$sliderContainer.css('margin-left', 0);
}
TO:
if (++currentSlide === $slides.length+1) {
$sliderContainer.animate({'margin-left': '0'}, animationSpeed, function() {
currentSlide = 1;
});
}
EDIT. Another updated fiddle, so the last slide won't show the white/blank slide, instead goes to slide #1. http://jsfiddle.net/4wnrwkf0/6/
Cheers.

How to convert data attribute value to integer for in javascript?

I've been searching everywhere for this and can't seem to find an anwser that works. What i have is a slider with arrows and buttons, when an arrow or button is clicked the function grabs the data-cs attribute which it uses to to determine the next slide.
the html
<div id="arrowleft" class="sliderbtns flip" data-sc="prev"></div>
<div id="arrowright" class="sliderbtns" data-sc="next"></div>
<div id="buttons" class="sliderbtns">
<div class="selectedbtn sliderbtns" id="button1" data-sc="1"></div>
<div class="button sliderbtns" data-sc="2"></div>
</div>
the javascript
$( ".sliderbtns" ).click(function() {
var button_data = $(this).attr('data-sc');
myslider(button_data);
});
the function in js
function myslider(position) {
if (position == "next" && (currentslide == slidecount)) {
position = 1;
} else if (position == "next") {
position = currentslide + 1;
} else if ((position == "prev") && (currentslide == 1)){
position = slidecount;
} else if ((position == "prev")) {
position = position - 1;
} else {
// position must then eqauls some integer from the data-sc attribute
position = parseInt(position);
alert (position); // alerts properly the first time
var out_slide = "Slide" + currentslide + "Out";
var next_slide = "Slide" + position;
alert(out_slide); //these work fine the first time
alert(next_slide);
window[next_slide]();
window[out_slide]();
// later on in the slide currentslide becomes position after this it returns value of Nan
setTimeout( function() {
currentslide = position;
alert("this is the current slide position" + currentslide);
}, 2000);
/* ommited code */
}
}
The arrows work fine if I just click on the arrows but when I click on a button it proprly goes to the next slide but none of the buttons no longer work and display current position as NaN, I have tried making the position variable an int in a bunch of different ways with Number(position), ToInt and ParseInt, but still after currentslide = position it returns it as Nan and the slider can no longer find the proper slides and functions etc... If any one has any idea what I could be doing wrong, how to properly make sure it's an actuall integer if that's posssible from a data attribute, or maybe some other way around I can throw that data around as and int that could be gotten by clicking the arrows or buttons. Greatly appreciate any help!
To get data use .data():
$(this).data('sc')
Seems nobody reading the question.
NaN should appear due to this:
position = currentslide + 1;
From code, I cannot see currentslide being intialized. If you do undefined + 1, you get NaN.
Globally, set currentSlide = 0 to have it work properly. Unless you're hiding code.
ps. title does not match the question posed in the description.

What is the right jQuery (or javaScript) code to pause a basic slider using a simple 'setTimeOut' funcitonality?

I have built a basic content slider, based upon a tutorial I got from the web.
In the example, the slides scroll on a timed interval using a setTimeout parameter, but also has a navigation functionality (of course) which allows you to go to selected slides directly.
The slides scroll without pausing the Timeout when a slide is selected and obviously when the mouse hovers.
The key javaScript/jQuery code which controls the scrolling is essentially (7 total slides):
var currentSlide = 0;
function slideScroll(){
if (currentSlide == 7)
selectSlide(1);
else
selectSlide( currentSlide + 1 );
setTimeout ('slideScroll()', 4000);
}
((Other javaScript code omitted because I was fairly certain that the key is this function, but I can certainly update my question with the precursory code if needed for clarity.))
The end game is a) to have the Timeout reset whenever a user selects a new slide and b) to have the Timeout pause when a mouse is rolled over the content in the slide.
I presume that the code ought to be inserted in conjunction with the setTimeout, with some if statements or something. Can someone help me devise this solution for endgame a) and b) ?
Live prototype and NOT a shameless plug: HERE
Thanks in advance for tips!
add a check for paused and a variable to hold the timer reference
var currentSlide = 0,
paused = 0,
timer;
function slideScroll () {
if (paused) {/* action if paused or leave blank*/}
else if (currentSlide === 7) selectSlide(1);
else selectSlide(currentSlide + 1);
timer = setTimeout(slideScroll, 4000);
}
Then in the choose slide click
clearTimeout(timer);
timer = setTimeout(slideScroll, 4000);
Then in mouseover
paused = 1;
and mouseout
pause = 0;
Alternatively, use a shorter timeout which does almost nothing most times it's invoked
var currentSlide = 0,
paused = 0,
remain = 4000;
function slideScroll () {
if (!paused) {
if (remain > 0) remain -= 200;
else {
remain = 4000;
if (currentSlide === 7) selectSlide(1);
else selectSlide(currentSlide + 1);
}
}
setTimeout(slideScroll, 200);
}
Then in the choose slide click
remain = 4000;
Same as before for mouseover and mouseout

Difficulty with setInterval loop using class of Divs

$(document).ready(function fadeIt() {
$("#cool_content > div").hide();
var sizeLoop = $("#cool_content > div").length;
var startLoop = 0;
$("#cool_content > div").first().eq(startLoop).fadeIn(500);
setInterval(function () {
$("#cool_content > div").eq(startLoop).fadeOut(1000);
if (startLoop == sizeLoop) {
startLoop = 0
} else {
startLoop++;
}
$("#cool_content > div").eq(startLoop).fadeIn(1500);
}, 2000);
});
Here I want a class of divs to animate, infinitely!
However, because the interval is set to two seconds there is period where no div is showing!
What would be an appropriate way to loop the animation of these divs?
I thought about using a for loop but couldn't figure out how to pass a class of divs as arguments. All your help is appreciated.
Thanks!
Ok, generally, you should know that Javascript is a single threaded environment. Along with this, the timer events are generally not on time accurately. I'm not sure how jQuery is doing fadeIn and fadeOut, but if it's not using CSS3 transitions, it's going to be using timeOut and Intervals. So basically, there's a lot of timer's going on.
If you go with the for loop on this one, you'd be blocking the single thread, so that's not the way to go forward. You'd have to do the fade in/out by yourself in the setInterval.
Setting the opacity on each interval call. Like div.css('opacity', (opacity -= 10) + '%')
If you're trying to fade in and out sequentially, I think maybe this code would help
var opacity = 100,
isFadingIn = false;
window.setInterval(function() {
if (isFadingIn) {
opacity += 10;
if (opacity === 100) isFadingIn = false;
} else {
opacity -= 10;
if (opacity === 0) isFadingIn = true;
}
$('#coolContent > div').css('opacity', opacity + '%');
}, 2000);
Consider the following JavaScript / jQuery:
$(function(){
var divs = $('#cool_content > div').hide();
var curDiv;
var counter = 0;
var doUpdate = function(){
// Hide any old div
if (curDiv)
curDiv.fadeOut(1000);
// Show the new div
curDiv = divs.eq(counter);
curDiv.fadeIn(1000);
// Increment the counter
counter = ++counter % divs.length;
};
doUpdate();
setInterval(doUpdate, 2000);
});
This loops infinitely through the divs. It's also more efficient than your code because it only queries the DOM for the list of divs once.
Update: Forked fiddle
instead of
if (startLoop == sizeLoop)
{
startLoop = 0
}
else
{
startLoop++;
}
use
startLoop =(startLoop+1)%sizeLoop;
Check the demo http://jsfiddle.net/JvdU9/ - 1st div is being animated just immediately after 4th disappears.
UPD:
Not sure I've undestood your question, but I'll try to answer :)
It doesn't matter how many divs you are being looped - 4, 5 or 10, since number of frames are being calculated automatically
x=(x+1)%n means that x will never be greater than n-1: x>=0 and x<n.
x=(x+1)%n is just shorten equivalent for
if(x<n-1)
x++;
else
x=0;
as for me first variant is much readable:)
And sorry, I gave you last time wrong demo. Correct one - http://jsfiddle.net/JvdU9/2/

Move my slider thumbnails as new slide comes into view

Script: jQuery Cycle slider: http://jquery.malsup.com/cycle/
I'm using the following code to move my slider thumbnails container to the left by "130px" just before the next slide comes into view. The margin is then reset to "0px" when the last slide is reached. This works well, however the container does not shift until the third slide.
This is the code I'm using:
function onBefore(currElement, nextElement, opts, isFoward) {
var currentslide = opts.currSlide + 1;
if(currentslide == opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '0'});
} else if(currentslide > 1 && currentslide != opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '-=133'});
}
}
How can I have it shift once the second slide comes into view. Note: Replacing "> 1" in the code above with "> 0" shifts the container as soon as the page loads.
I'm not sure of the context in which this function is called. But I think you want the following code:
function onBefore(currElement, nextElement, opts, isFoward) {
if(opts.currSlide == opts.slideCount) {
jQuery(".slider-nav").animate({marginLeft: '0'});
} else {
jQuery(".slider-nav").animate({marginLeft: '-=133'});
}
}
If that doesn't work it may be because your first slide is (slideCount = 0) instead of (slideCount = 1). If so change the IF test to:
if(opts.currSlide == (opts.slideCount - 1)) {
Regards
Neil

Categories