This is a problem with superslides from nicinabox Github Link
I know that you can use the 'play' option in order to set a time in milliseconds before progressing to the next slide automatically. This sets a global time for the entire slideshow.
What I would like to achieve is for individual slides to have their own specific progress/delay time.
For example if I have a slideshow with twenty slides I want all the slides to progress automatically and to stay on screen for 5 seconds. However the third slide should be displayed for 20 seconds.
I have tried to do this by using the animated.slides event but I cant get it to work as the animation stops with the fourth slide :
Here is my code:
$(function () {
$('#slides').superslides({
hashchange: true,
play: 5000,
pagination: true
});
});
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('animate', 3)
}, 20000);
}
disp();
}
});
Any help would be appreciated. Maybe there is someone out there to solve my problem.
Replace .superslides('animate', 3) with .superslides('start').
Demo (the condition is 2, as you originally wrote)
Just do this:
$('#slides').on('animated.slides', function () {
var current_index = $(this).superslides('current');
if (current_index === 2) { // third slide
$(this).superslides('stop');
var disp = function test1() {
setTimeout(function ()
{
$('#slides').superslides('start')
}, 20000);
}
disp();
}
});
FIDDLE
You can do it like this:
$('#slides').superslides({
hashchange: true,
play: 500,
pagination: true
});
$('#slides').on('animated.slides', function () {
var slideNo = $(this).superslides('current');
if(slideNo === 2){
$(this).superslides('stop');
setTimeout(function(){
$('#slides').superslides('start')
}, 2000);
}
});
Here's a fiddle.
Related
This is my JS code so far. Right now I can click on each button on the slider and it will change to the corresponding slide.
$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
// get button data-slide
next = $(this).data('slide');
console.log(current);
$('.slide-nav').removeClass('active');
$(this).addClass('active');
if (current === next) {
return false;
} else {
$('.slider__wrapper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
$('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
}, 900);
}
});
the slider I am working with looks like this one to see the html/css
https://codepen.io/mikun/pen/YWgqEX
So in addition to clicking to change slides I would like to scroll to change slides
You can simulate the click function this way:
setInterval(function () {
$(".slide-nav.active").next().click();
}, 1000);
You need to check if this is the last and try this:
setInterval(function () {
if ($(".slide-nav.active").next().length > 0)
$(".slide-nav.active").next().click();
else
$(".slide-nav").first().click();
}, 1000);
Demo: https://codepen.io/anon/pen/ZwBVzo
so i have this loading screen that displays information while the page is loading but because of faster internet speeds this can be displayed in a flash.. I would like to add a minimum display time! this is my current code
jQuery(window).load(function() {
jQuery('.pageLoad').animate({
opacity: 0
}, 800, function() {
jQuery('.pageLoad').css({
display: 'none'
});
});
});
How can i do this?
You could put your fade-out method in a function and call that after an xx number of seconds from $(document).ready():
var timeoutID;
jQuery(document).ready(function() {
// start hiding the message after 2 seconds
timeoutID = window.setTimeout(hideMessage, 2000);
});
function hideMessage() {
jQuery('.pageLoad').animate({
opacity: 0
}, 800, function() {
jQuery('.pageLoad').css({
display: 'none'
});
});
}
As mentioned by #Rayf, if that piece of info should be read, regardless of page loading speed, you should add some delay to it like this:
// time to read the message...adjust it to the time you feel is right
var msgDisplayTime = 5000,
interval = 0,
loaded = false,
delayed = false,
fadeLoader = function () {
jQuery('.pageLoad').animate({opacity: 0}, 800, function () {
jQuery('.pageLoad').css({display: 'none'});
});
};
//timeout for your desired delay time
//it will ask if it is already loaded after delay ends
//triggering the fading of loading overlay
timeout = setTimeout(function(){
delayed = true;
if(loaded){
fadeLoader();
}
},msgDisplayTime);
//when loaded, it will wait until delay happened
//if not, it will delegate the execution to the timeout
// so at the end, it will be triggered after the delay or
//loading time, in case it longer than desired delay
jQuery(window).load(function(){
loaded = true;
if(delayed){
fadeLoader();
}
});
Inside comments is the roughly explanation about how it works
I can't for the life of me see why my setInterval() function is only executing one time. I believe I am doing it right according to its usage. It's a slideshow script that takes a group of slides as part of a slideshow object called TheBand and changes slides using setInterval().
This is the timer:
current_band.obj_timer = window.setInterval(function () {
TheBand.nextSlide(current_band_id);
}, current_band.timer);
This is the nextSlide function:
nextSlide : function (band_id) {
var obj_band = TheBand.bands[band_id];
if (band_id == 0) {
console.log(obj_band.current_slide, obj_band.slide_count)
}
if (obj_band.current_slide + 1 >= obj_band.slide_count) {
new_slide = 0;
} else {
new_slide = obj_band.current_slide + 1;
}
TheBand.changeSlide(band_id, new_slide);
},
Then the changeSlide function:
changeSlide : function (band_id, slide_id) {
var obj_band = TheBand.bands[band_id];
if (slide_id != obj_band.current_slide) {
// Get the viewport width for display purposes
var slide_width = jQuery(obj_band.viewport).width();
// Set up the slide objects
var current_slide = jQuery(obj_band.slides[obj_band.current_slide]);
var new_slide = jQuery(obj_band.slides[slide_id]);
// Set the left value for the new slide and show it
new_slide.css('left', slide_width).width(slide_width).height(obj_band.max_height);
new_slide.show();
// Animate the slide transition
current_slide.animate({ left: -slide_width }, obj_band.transition_time);
new_slide.animate({ left: 0 }, obj_band.transition_time, 'swing');
if (new_slide.css('background-color') != current_slide.css('background-color')) {
jQuery(obj_band.back).animate({ backgroundColor : new_slide.css('background-color') }, obj_band.transition_time);
}
// Set the class for the nav buttons
jQuery(obj_band.nav_buttons[obj_band.current_slide]).removeClass('selected');
jQuery(obj_band.nav_buttons[slide_id]).addClass('selected');
// Run the slide javascript - be careful with this!
eval(obj_band.slide_script[obj_band.current_slide].unload);
eval(obj_band.slide_script[slide_id].load);
window.setTimeout(function () {
eval(obj_band.slide_script[slide_id].ready);
}, obj_band.transition_time);
// Set the current slide variable
obj_band.current_slide = slide_id;
// Set the correct Nav color
TheBand.setNavColor(band_id);
}
},
Seems simple enough, but I only get to the second slide!? No errors or warnings in console and if I watch the clear timer breakpoint it does show a clear timer event, but its not from this code... Please help?
P.S. The setInterval() timer does not break if I comment out the changeSlide function.
I have a simple function that I wrote that transitions three div elements using a fade in/out effect. The event is triggered when a user clicks a link. Here's my code:
$(".link1").click(function () {
$(".feature1").fadeIn(1000);
$(".feature2").fadeOut(1000);
$(".feature3").fadeOut(1000);
});
$(".link2").click(function () {
$(".feature1").fadeOut(1000);
$(".feature2").fadeIn(1000);
$(".feature3").fadeOut(1000);
});
$(".link3").click(function () {
$(".feature1").fadeOut(1000);
$(".feature2").fadeOut(1000);
$(".feature3").fadeIn(1000);
});
I need to be able to set some sort of timer so that these transitions happen automatically every 8 seconds or so. I also want them to "loop" essentially, so that if we get to the third div in the set, it returns to the first div.
Try using setTimeout() function.
var timer = null;
function foo_loop(div, timeout) {
if (div > 3) div = 1;
$(".feature"+div).fadeIn(1000);
$("div[class^=feature]:not(.feature"+div+")").fadeOut(1000);
clearTimeout(timer);
timer = setTimeout(function() {
foo_loop(div + 1, timeout);
}, timeout);
}
Run this like that (To start with first div and 8 second timeout):
foo_loop(1, 8000);
Function for stopping loop:
function stop_loop() {
clearTimeout(timer);
}
Run it when you need to stop the loop (for example on click on element with id="stop"):
$('#stop').bind('click', stop_loop);
setInterval(expression, timeout); runs the function in intervals, with the length of the timeout between them
example:
var intervalID = setInterval(alert('heelo'), 3000); // will alert hello every 3 seconds
// clearInterval(intervalID); // will clear the timer
Try the following:
var i = 0;
var transition = setInterval(function(){
i++;
if (i == 4) {i = 1}
$(".feature"+i).stop().fadeIn(1000, function(){
$(this).delay('6000').fadeOut(1000)
})
}, 8000)
not sure I fully understand when you want them to loop or how often, but I think this should help you out a bit... every 8 seconds it loops through the animations...
function fadeLoop(selectors, animations, times, index) {
index = index || 0;
if(index == selectors.length) return;
$((selectors[index])[animations[index]](times[index], function() {
fadeLoop(selectors, animations, times, index + 1);
});
}
setInterval(function() {
fadeLoop(
['.feature1', '.feature2', '.feature3'],
['fadeIn', 'fadeOut', 'fadeOut'],
[1000, 1000, 1000]
);
fadeLoop(
['.feature1', '.feature2', '.feature3'],
['fadeOut', 'fadeIn', 'fadeOut'],
[1000, 1000, 1000]
);
fadeLoop(
['.feature1', '.feature2', '.feature3'],
['fadeOut', 'fadeOut', 'fadeIn'],
[1000, 1000, 1000]
);
}, 1000 * 8);
I want to make a loop in my function so that the slideshow effect always restarts.
Here's my fiddle : http://jsfiddle.net/Be67B/
It's all good for the image 1 to go to image 2, but I want it to fade it back to the image 1, and then go the image 2, and so on...to always loop like that.
What do I need to add in my code to make this work?
Don't use a loop, just ask the browser to repetitively call your animation step :
setInterval(function(){
// your animation (in fact just a step)
}, someDelay);
Demonstration : http://jsfiddle.net/dystroy/nPh6S/
In this precise case, the animation is done with :
setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 4000);
see this jquery cycle plugin:
http://jquery.malsup.com/cycle/
may be this is what you want
You can create a function that does the transition, which has a callback function as part of the fadeIn method that will call back to itself to trigger the next transition, and it would just be in a constant loop.
Here's your modified jsfiddle:
http://jsfiddle.net/Be67B/1/
HTML:
<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />
Javascript:
$(document).ready(function(){
transition(false);
});
function transition(first)
{
var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";
$("#top").delay(1000).fadeOut(function() {
$(this).attr("src",src).fadeIn(function() {
transition(!first);
});
});
}
I just made this code:
$(document).ready(function(){
// images in the pool
var images=["http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu- I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
"http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];
// next image to display
var next = 0;
// interval beetween images
var INTERVAL = 1000;
// main function
var doCarrousel = function() {
$("#top").fadeOut(function() {
$(this).attr("src", images[next]).fadeIn(
function() {
setTimeout(doCarrousel, INTERVAL);
});
});
if (++next >= images.length)
next = 0;
};
//start carrousel
doCarrousel();
});
fiddler: http://jsfiddle.net/Be67B/
I would use a plugin. But you can do it by hand. I just recommend against changing the src of the images, because some browsers don't handle it very well, like safari not firing load event.
Instead, have all images inside a container, and cycle their visibility:
$(document).ready(function(){
var currentImage = $("#images img:first");
setInterval(function(){
currentImage.fadeOut();
if(currentImage.next().size())
currentImage = currentImage.next();
else
currentImage = currentImage.siblings().first();
currentImage.fadeIn();
}, 1000)
});
See fiddle: http://jsfiddle.net/Be67B/2/
Quick and dirty: jsFiddle example
function swap(img) {
img = (img == 'http://coreldrawtips.com/images/applebig.jpg') ? 'http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips.com/images/applebig.jpg';
$('#top').delay(2000).fadeOut(function() {
$(this).attr('src', img)
}).fadeIn(function() {
setTimeout(function() {
swap(img)
}, 1000);
});
};
swap($('#top').attr('src'));