Develop Reference

Javascript slider shows white screens

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

JavaScript header background fade

I am trying to get one background image to fade into another using a very simple if statement. Currently my background images do not fade into one and another, they first fade onto a white background and then the other image fades in after, I would however like them to fade into each other directly. Secondly there seems to be an error with my images displaying, so when the the limit of the array (1) is reached in the if statement then it will set a simple currentBackground variable to 0, meaning the backgrounds should start from 0 in the array, however, this does not happen and sometimes the image same image is displayed repetitively.
$(window).load(function() {
var images = ['img/fitness-bg-2.jpg','img/runner-header.jpg'];
var i = 0;
function changeBackground() {
$('#header').fadeOut(250, function(){
$('#header').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#header').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 5000);
});

adding fade to change background with javascript

I have the following code for changing a divs background image with jquery, i need help to add a fade to the code so the image change with some effect
this is the code
jQuery(window).load(function(){
var images = ['blured/1.jpg','blured/2.jpg'];
var i = 0;
var timeoutVar;
function changeBackground() {
clearTimeout(timeoutVar); // just to be sure it will run only once at a time
jQuery('#maincont').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
// call the setTimeout every time to repeat the function
timeoutVar = setTimeout(changeBackground, 6000);
}
// Call it on the first time and it will repeat
changeBackground();
});
Any help will be great!
i need to just change the background image, without fading the inside divs, this is the html
<div class="maincont" id="maincont">
<div class="containersrch">
<h1 class="lagro">some title</h1>
<div class="joinus">
<span>JOIN</span>
</div>
</div>

Maybe this is what you want?
$(function(){
var imgId = $('#maincont'), imgCount = 1, imgLast = 2;
setInterval(function(){
imgId.fadeOut('slow', function(){
if(++imgCount > imgLast)imgCount = 1;
imgId.css('background', "url('blured/"+imgCount+".jpg')");
imgId.fadeIn('slow');
});
}, 6000);
});
Now you can have multiple images, just change imgLast to the last number and make sure they have the correct URLs in your blured folder. Of course, the code above assumes you are using .jpg. I actually recommend the lossless compression of .png, but it won't matter if it's the image was taken as a .jpg.

Creating Image slider using only jQuery

I'm trying to create an image slider using Jquery.
What I have is a main div with 3 sub divs with images.
Take a look at this fiddle. FIDDLE
Ok now i got the design just the way I want it. What is missing is the functionality.
When i hover over the div or the images, I want it to act like a clockwise slider.
This may look a bit confusing. Take a look at this demo. This is what i want.
DEMO
This is what i want.The right div gets filled with the middle image src , the middle div gets the left div src. The left div get an new src from an array of images i have defined. Currently i can only change one image div at a time.
However I don't want to use any more plugins. Only Jquery plugin. A CSS only solution would be the best but I do not think it will be possible.
JQUERY
$('.maindiv img').mouseover(function () {
var image = this;
loop = setInterval(function () {
if (i < images.length - 1) {
i++;
$(image).attr('src', images[i]);
} else {
i = 0;
$(image).attr('src', images[i]);
}
}, 1500);
EDIT: I managed to get one part of this working. CHECK THIS.Just need to add fade effect Now the problem is after the images in the array end the first images dont loop back... Had not thought of this before.Does Anybody know how i can get over this issue?

Mabye something like this:
jQuery(document).ready(function () {
var images = [];
var loop;
var i = 0;
images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1GfA01TRDgrh-c5xWzrwSuiapiZ6b-yzDoS5JpmeVoB0ZCA87";
images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQSyUWiS4UUhdP1Xz81I_sFG6QNAyxN7KLGLI0-RjroNcZ5-HLiw";
images[2] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_E_OgC6RiyFxKtw03NeWyelfRgJ3Ax3SnZZrufNkUe0nX3pjQ";
$('img', '.maindiv').mouseover(function () {
//Get divs inside main div and reverse them, so right is first
var divs = $($('div','.maindiv').get().reverse());
//Set up loop
loop = setInterval(function(){
divs.each(function(key, div){
if (divs[key+1])
{
//All divs gets image src from previous div > img
$('img', div).attr('src', $('img', $(divs[key+1])).attr('src'));
}
else
{
//This is left div
if (images && images[i])
{
//If picture url not in array then add it
if ($.inArray($('img', div).attr('src'), images) == -1)
{
images.push($('img', div).attr('src'));
}
$('img', div).attr('src', images[i]);
i++;
if (i>= images.length) i = 0;
}
}
});
}, 1500);
}).mouseout(function(){
clearInterval(loop);
});
});
Fiddle

Image loading failing in IE9+10

Ok so for a site that is heavily graphic based I had to come up with a way for the user not to watch each image load in one by one. So I developed the following code as a sort of preloader until all the images on the page are ready. I know usually we shouldn't delay seeing page content for images, but the images are the only content on the page so I chose the lesser evil of faux-preloading.
The code works like this : it finds all the images in the ul page, holds them in a var (images) and fades in its parent li once the image in scope has loaded. It also has a check for when the image is being pulled from the cache. This creates a nice one by one fade in of the empty li's which are styled as empty boxes until the images themselves are loaded and the rest functionality of the page is triggered.
Now the problem : ie9 and ie10 only get halfway through the process and then randomly stops thus the page never finishes "loading" and the site is nonfunctioning. I've tried a few things but Im not sure what the problem is. The html and js are below.
The images html (only show two of 80 something li's :
<ul>
<li class="ch-one link">
<img class="gif" src="_images/_gifs/_inthemess/inthemess_1.gif" />
<img src="_images/_spreads/_thumbs/spread-04.jpg" />
</li>
<li class="ch-one link">
<img class="gif" src="_images/_gifs/_inthemess/inthemess_2.gif" />
<img src="_images/_spreads/_thumbs/spread-05.jpg" />
</li>
</ul>
The gif is revealed on mouse over, the jpg is the solid state.
var images = $('.spreads').find('img');
var loadedLen;
var liLen;
var x = 0, i = 0;
images.each(function () {
if ($(this).complete) {
$(this).parent().animate({
'opacity': '1'
}, 1000);
$(this).parent().addClass('loaded');
checkPageState();
} else {
$(this).load(function () {
$(this).parent().animate({
'opacity': '1'
}, 1000);
$(this).parent().addClass('loaded');
checkPageState();
});
};
function checkPageState() {
//check if all images are loaded
//if they are animate TOC in
loadedLen = $('.spreads li.loaded').length;
liLen = $('.spreads li').length;
if (loadedLen === liLen) {
showPages();
console.log('#showPages call from checkPageState');
} else if (loadedLen === 10) {
//fix li height issue
var imgHeight = $(images[4]).height() + 2;
};
};
});
function showPages() {
var ph = $(document).height();
//then we call the function that will loop
//and fade in each image until it reaches the last one
pageTime = setTimeout(function () {
clearTimeout(pageTime);
fadeInEachPage();
}, 100);
function fadeInEachPage() {
if (i < images.length) {
clearTimeout(pageTime);
//start the countdown first
pageTime = setTimeout(function () {
i++;
fadeInEachPage();
}, 1);
theImage = images[i];
$(theImage).not('.gif').animate({ 'opacity': '1' }, 800);
} else if (i === images.length) {
//trash collection
//fadeInEachPage is called so frequently the program
//will pass else if (i === images.length) a few times
//thus causing the text to pulse in correctly
if( x === 0 )
{
//adds listener for mouse over effect
addGifListener();
$('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
var inTime = setTimeout(function () {
clearTimeout(inTime);
$('#overview header h1.title').html('Thank you for purchasing the 6 Memos eBook. Simply select a chapter to enjoy full size.');
$('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
}, 2000);
var finalTitleTime = setTimeout(function() {
clearTimeout(finalTitleTime);
$('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
}, 8000);
var finalFadeIn = setTimeout( function() {
$('#overview header h1.title').html('6 Memos');
$('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
clearTimeout(finalFadeIn);
}, 9000);
//trash collection
x++;
} else {
return;
};
};
};
};
Thanks for the help!

The solution for this was $(this).prop('compelete'); as suggested by Musa.
Using $(this).prop('complete') or $('img').prop('complete') will catch any image files already on the page when the js is deployed; whereas load() only checks if it has loaded since the js was deployed.
This was what I was trying for with $(this).complete(); - which seems to be associated with AJAX and thus was not passing the conditional causing the rest of the images to be loaded and displayed while leaving the ones which loaded before the js in the dark - so to speak.