Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?
I added a JSfiddle down below.
Here's my javascript:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 200 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
The JS Fiddle Link
This is happening because there is no background while the fade in occurs. The easiest way to fix this is to add a z-index property to the image or the slide.
For example give the first image an z-index of 1 and the second one a z-index of 2
Here is the code that you should implement:
var subs = $(this).find('#sliderImg');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
$(this).css('z-index', ++index);
});
The idea is to access each element of the array via the tag you provided #sliderImg and using the jQuery method each to increase the z-index css property with 1.
Here is a working fiddle: Working Fiddle
Related
I'm trying to run slider with new jQuery because some functions like rotate are deprecated. Slider works fine when page is uploaded and I'm working to load image from clicked tab from right side. When I clicked on tab, current image and current active tab are removed and new image and new active tab are loaded correctly than I call my startSlider(); function again but i'm loosing variable value of i so my startSlider(); running without loading image and active tab background. Please help me to solve this problem. This is slide image:
and this is my jQuery code:
$(function() {
var count = $(".ui-tabs-nav li").length;
var slideSpeed = 5000;
var fadingSpeed = 300;
var i = 1;
var $slider = $('#featured');
var interval;
function startSlider() {
interval = setInterval(function() {
$("#fragment-"+i).fadeOut(fadingSpeed, function() {
$(this).removeClass("ui-tabs-activated");
$('#nav-fragment-'+i).removeClass("ui-tabs-active");
a = i+1;
if (i == count) {
a = 1;
i = 0;
}
$('#nav-fragment-'+a).addClass("ui-tabs-active");
$("#fragment-"+a).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated");
});
i++;
});
}, slideSpeed); // End setInterval function
}
function stopSlider() {
clearInterval(interval);
}
$('.ui-tabs-nav-item > a').click(function(evt){
evt.preventDefault();
stopSlider();
i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5
var id = $(".ui-tabs-active > a").attr('href');
$(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background
$("#fragment-"+id).remove(); // This remove div with current image
$("#fragment-"+i).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated"); // Load new image
$('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background
});
startSlider(); // Start slider again
});
startSlider();
}); // jQuery function
Well, startslider() is using variable i to fadeout and remove active class, and variable a for fadein and add active class.
After click you are using variable i for fadein and adding active class.
Variable i is global, so when your restart startslider() it will use that i to fadeout.
Also, after click you are removing an element, but in the code your show right now I do not see anything that adds a new element or loads an image.
I have an image slider like animation, the differences is that in one slide are several elements, in my case 4 pictures which come from the left or right side in the scene.
The question is how to make the links that trigger the animation function to be disabled until the animation is finished 100%, and then enable again.
Here is my code...
$(document).ready(function() {
//
$('.package_box_menu li').children().click(function(){
$(this).showProducts($(this).attr("id"))
});
jQuery.fn.showProducts = function (clickedSeason) {
var nextToShowSide = $('.'+[clickedSeason]+'_img1').attr("rel");
var active = $('img[ rel |= active]').attr('season');
if (nextToShowSide == 'right') {var whereTo = '-1000px'; var currentToHideSide ="left" };
if (nextToShowSide == 'left') {var whereTo = '3000px'; var currentToHideSide ="right" };
show();
hide(active, whereTo, currentToHideSide);
function show(){
var allToShow = ($('img[ season |= '+[clickedSeason]+']').get()).length;
for (var i = 1; i<= allToShow ; i++){
var delay = $('.'+[clickedSeason]+'_img'+[i]).attr('delay');
var position = $('.'+[clickedSeason]+'_img'+[i]).attr('left');
$('.'+[clickedSeason]+'_img'+[i]).stop().delay(delay).animate({'margin-left': position }, 1000, 'easeOutExpo').attr('rel','active');
}
};
function hide(active, whereTo, currentToHideSide){
var all = ($('img[ rel |= active]').get()).length;
for (var i = 1; i<= all ; i++){
if ($('.'+[active]+'_img'+[i]).attr('rel') == 'active') {
$('.'+[active]+'_img'+[i]).stop().delay([i]+'00').animate({'margin-left': whereTo }, 1000, 'easeInExpo').attr('rel', currentToHideSide );
}
}
};
};
jQuery().showProducts('spring');
});
if you are just trying to make sure a link isn't clicked while being animated add this to your click.
$('.package_box_menu li').children().click(function(){
if($('img[class$=img1]').is(':animated')) {
event.preventDefault();
return false;
}
$(this).showProducts($(this).attr("id"));
});
This will simply refuse the click while it animated and then work when it stops. $(this) could be replaced with something that is being animated for example your slide :)
NOTE
As there is no HTML shown I had to make some assumptions on the selector i used 'img[class$=img1]' which is a img where the class ends in 'img1' taken from the '_img1').attr("rel");
Copied your site to Fiddle and got it working with the change i mentions here
I have a responsive layout and I've created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.
Here's what I'd like to achieve:
When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.
Once the animation is stopped, I want to reset the area to display the 1st panel.
If the user scrolls back up above that screen size, start the animation again.
Here is my code, thanks in advance for your time:
// Get the viewport size!
var viewport = $(document).width();
if (viewport >= 1140) {
var InfiniteRotator =
{
init: function()
{
// hard set height of container
$('#circles').height('286.717px');
// initial fade-in time
var initialInterval = 3000;
// interval between items
var itemInterval = 5000;
// cross-fade time
var fadeTime = 2000;
// count number of items
var numberOfItem = $('.rotating-item').length;
// set current item
var currentItem = 0;
// create loop
var infiniteLoop = setInterval(function() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
// go Go GO!
InfiniteRotator.init();
}
Please note: I used this great tutorial to create the fading panels: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/
window.onresize = function() {
clearInterval(infiniteLoop)
}
Note that you must still be in your init function in order to get the infiniteLoop variable.
You can use
window.onresize = function(){ ... }
$(window).resize(function() {
//stop and reset animation in here.
});
I have created a slideshow with jquery. It clones an image in a container, moves it to the right, then slides it to the left and starts over. Here is the code:
$(document).ready(function() {
var slideshow = new main.slideshow();
slideshow.start({
path: 'images/slideshow/',
images: ['1', '2']
});
});
var main = new (function() {
this.slideshow = (function() {
var self = this;
var nextSlide, path, images, startLeft;
var fileExtension = 'jpg';
var container = $('#slideshow');
var currentSlide = container.children('img');
var timerlength = 4000;
var currentSlideIndex = 0;
this.start = function(args) {
path = args['path'];
images = args['images'];
if (typeof args['fileExtension'] !== 'undefined') fileExtension = args['fileExtension'];
container.css('overflow', 'hidden');
currentSlide.css('position', 'absolute');
startLeft = currentSlide.position();
startLeft = startLeft.left;
self.nextSlide();
};
this.nextSlide = function() {
nextSlide = currentSlide.clone();
nextSlide.css('left', (startLeft + currentSlide.width()) + 'px');
currentSlideIndex++;
if (currentSlideIndex >= images.length) currentSlideIndex = 0;
nextSlide.attr('src', path + images[currentSlideIndex] + '.' + fileExtension);
container.append(nextSlide);
setTimeout(function() {
self.slideToNext();
}, timerlength);
};
this.slideToNext = function() {
currentSlide.animate({
left: '-' + (currentSlide.width() - startLeft) + 'px'
}, 2000);
nextSlide.animate({
left: startLeft + 'px'
}, 2000, function() {
currentSlide.remove();
currentSlide = nextSlide;
self.nextSlide();
});
};
});
});
A link to see this in action can be found here:
https://dustinhendricks.com/breastfest/public_html/
The problem I'm having as you can see is that the second slide when first added to the dom, does not seem to be moved to the right when I call css('left', x);. After the first jQuery animation however, each cloned slide then seems to be able to be moved to the right with that call no problem. This leads me to believe that jquery's animate is setting something that allows for the object to be moved via css('left', x);, but what could it be changing? position is already being set to absolute.
This is why my example pages seems to take a while before the slides start sliding. Any idea how I can fix?
If your first image is not loaded yet when you call .start() such that currentslide.width() isn't correct, then it won't set the proper initial value for left upon initialization. You may need to set a .load() event handler so you know when that first slide is loaded and you can wait for it to be loaded before starting the slideshow.
When testing this, you must set the .load() handler before the .src value is set on the image object (or you may miss the load event in IE) and you should make sure you test both the cases where no images are cached and where all images are cached (as the timing of the load event can be different in both cases).
I have a slideshow component that I wrote in javascript using jQuery. The slideshow consists of three slides, each containing HTML content. Each slide is a div with class .slide. Every 7 seconds, I fade out the slides that should be hidden and fade in the one I want to show. I also have some buttons (indicators) that let the user manually switch slides by clicking the buttons.
It all works great, unless the user switches tabs. If enough time elapses, when the user returns, there will be two slides visible. When the switch slide event fires, everything goes back to normal.
Example:
http://jsfiddle.net/vwdJ5/
Here is my code:
var slides = $(".slide");
var indicators = $(".indicator li");
var currentSlide = 1;
var incrementSlide = function () {
currentSlide = currentSlide === 2 ? 0 : currentSlide + 1;
};
var switchSlide = function () {
if (currentSlide === 0) {
var onDeck = 1;
var inTheHole = 2;
} else if (currentSlide === 1) {
var onDeck = 2;
var inTheHole = 0;
} else {
var onDeck = 0;
var inTheHole = 1;
}
indicators.removeClass("active");
$(indicators[currentSlide]).addClass("active");
$(slides[onDeck]).hide();
$(slides[inTheHole]).fadeOut(200, function () {
$(slides[currentSlide]).fadeIn(200);
incrementSlide();
});
};
var interval = setInterval(switchSlide, 7000);
indicators.click(function () {
clearInterval(interval);
if ($(this).hasClass("first")) {
currentSlide = 0;
} else if ($(this).hasClass("second")) {
currentSlide = 1;
} else if ($(this).hasClass("third")) {
currentSlide = 2;
}
switchSlide();
interval = setInterval(switchSlide, 7000);
});
Modern browsers (Chrome and FF6 for sure) are now using a "queue" system on inactive tabs. You switch tabs, and setTimeout and setInterval still run, but at a much slower speed. Then when you go back to the tab, it tries to catch up, normally resulting in weird issues (sorry, probably not the most technical description).
It's recommended to use requestAnimationFrame instead if possible.
For your example where you need something to happen at specific times, you can just add stop() prior to the animations, which will prevent multiple animations from occurring at once