Develop Reference

jQuery .each() method doesn't iterate over all images

I am trying to make an image carousel. I am using the jQuery .each() method to iterate over all the images in the div with class="slideshow".
HTML code
<div class="slideshow">
<img src="images/page-1-hero-image.jpg" alt="school's image" class="img-responsive page-one-pic mySlides">
<img src="images/Capture2.PNG" alt="school pic" class="img-responsive mySlides">
<img src="images/Capture.PNG" alt="school pic" class="img-responsive mySlides">
<img src="images/Capture3.PNG" alt="school pic" class="img-responsive mySlides">
</div>
CSS code
.mySlides {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 1;
/* to make pic responsive */
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
}
Javascript:
function carousel() {
$(".slideshow > img").each(function(index, element) {
$(element).fadeIn(1000).delay(2000);
setTimeout(carousel, 1000);
});
}
The function only fades in the first image and then stops. The other images are not displayed.
here is the link to the hosted project:
https://rimildeyjsr.github.io/St.Anthony-Website/

This code:
function carousel() {
$(".slideshow > img").each(function(index,element){
$(element).fadeIn(1000).delay(2000);
setTimeout(carousel,1000);
});
}
Says: "For each img element, spend a second fading in, then delay by two seconds before doing nothing, and reschedule this entire process (not per element, for all of them) to run again a second from now."
That doesn't make much sense, you'll be calling carousel several times again roughly at the time the first image finishes fading out.
Given the term "slideshow" I'd guess what you're trying to do is show each image for two seconds before spending a second having the next one fade in, looping when you get to the end. If so, you want to call carousel once, two seconds after the last image has finished fading in. You can do that by delaying the fades and the next call.
function carousel() {
var imgs = $(".slideshow > img");
imgs.each(function(index,element){
// Don't make the first one (index = 0) wait at all;
// make the second (index = 1) wait 3 seconds, the third
// (index = 2) wait 6 seconds, etc. And then fade in
$(element).delay(index * 3000).fadeIn(1000);
});
// Start the entire process again two seconds after the last image fades in
setTimeout(carousel, imgs.length * 3000);
}

Just an improvement to the previous answer, you can do it in the form of a callback(which ensures you that the function is called only after the fadeIn has occurred or happened, so you wont need a setTimeout) as follows
function carousel() {
var imgs = $(".slideshow > img");
imgs.each(function(index, element) {
$(element).delay(index * 2000).fadeIn(1000, function() {
if (index + 1 >= imgs.length) {
carousel(); // call the function only after all images are fadeIn completed
}
});
});
}
See if that helps and if not drop a comment below
Edit:
After .fadeIn() does it's job, it sets the display value to block what you have to do here is, hide the elements before continuing the slideshow animation, for simplicity we'll set all the img elements display to hidden by using .hide(0). This sets the elements display to none
function carousel() {
var imgs = $(".slideshow > img");
imgs.stop().hide(0); // hide all the images whenever the carousel() is called
imgs.each(function(index, element) {
$(element).delay(index * 2000).fadeIn(1000, function() {
if (index + 1 >= imgs.length) {
carousel(); // call the function only after all images are fadeIn completed
}
});
});
}
Let me know if you need anything else

Fade In / Fade Out background images without white background

I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
Here's my HTML code:
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html

AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
Thus having the structure ready which is the following:
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
Here is the implementation: http://jsbin.com/wisofeqetu/1/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>

If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
Now some JQuery. To appear first image when window load write this:
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.

You may also use jQuery plugin backstretch.

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.

JS Image Cycler - Load in Background

I've got a tricky little problem. I'm just starting out the design for a website with a cycling background image. At the minute it's working fine, although you can see the alternate background images loading with the first image which looks a little messy. I could pretty easily hide these images, but I feel a better solution would be to allow the first image to load before the others to speed up the page load. Unfortunately I cant work out how to incorporate this into my existing JS.
The beginnings of the site are here (it might be broken at some point, I'm still experimenting).
My current JS:
function cycleImages(){
var $active = $('#background-cycler .active');
var $next = ($('#background-cycler .active').next().length > 0) ? $('#background-cycler .active').next() : $('#background-cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#background-cycler').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
HTML:
<div id="background-cycler" >
<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="images/bg1.jpg" alt=""/>
<img src="images/bg2.jpg" alt=""/>
<img src="images/bg3.jpg" alt=""/>
<img src="images/bg4.jpg" alt=""/>
<img src="images/bg5.jpg" alt=""/>
</div>
Any help you could give would be greatly appreciated!! :)
EDIT: The other problem I have is I need this on every page, but I'd rather not reload the images each time. Am I right in thinking the images will still be cached?

Here's my take at it:
http://jsfiddle.net/bortao/9TxED/
You hide the image element and only fade it in when the onload event is triggered.
And yes, all images will be cached by the browser throughout your site.
HTML
<div id="background-cycler" class="background-cycler">
<img id="imgPrev" />
<img id="imgNext" />
</div>
CSS
.background-cycler {
width: 1000px;
height: 600px;
}
.background-cycler img {
position: absolute;
left: 0px;
top: 0px;
}
JS
var imgs = [
'http://ravenstudio.co.uk/izzy/images/bg1.jpg',
'http://ravenstudio.co.uk/izzy/images/bg2.jpg',
'http://ravenstudio.co.uk/izzy/images/bg3.jpg',
'http://ravenstudio.co.uk/izzy/images/bg4.jpg',
'http://ravenstudio.co.uk/izzy/images/bg5.jpg']
var imgNext = document.getElementById("imgNext");
var imgPrev = document.getElementById("imgPrev");
var currentImg = -1;
var MAX_IMAGES = 5;
var CYCLE_DELAY = 2000;
var FADE_DELAY = 1500;
imgNext.onload = function () {
// When finished loading:
$(this).fadeIn(FADE_DELAY, function() {
// When fadeIn ends:
imgPrev.src = imgs[currentImg]; // Send current image to back
}); // Fade in loaded image
window.setTimeout('cycleImages()', CYCLE_DELAY + FADE_DELAY); // Set next cycle
};
cycleImages = function () {
currentImg++;
if (currentImg == MAX_IMAGES) currentImg = 0;
imgNext.style.display = "none"; // Hide before loading
imgNext.src = imgs[currentImg]; // Load new image.
// After imgNext finish loading, onload above will be called
}
cycleImages(); // Call the first cycle

How do I change an image within a div every second unless hovered on link?

I asked a question How can I display an image in a div if is hovered over and thanks to adeneo here is a solution (jsFiddle):
Markup:
<div id="imgs">
<img src="http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg" alt="image 1">
<img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" alt="image 2">
<img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg" alt="image 3">
</div>
<ul id="my-ul">
<li>hover to see image1</li>
<li>hover to see image2</li>
<li>hover to see image3</li>
</ul>​
JavaScript:
$('#my-ul a').on('mouseenter mouseleave', function(e) {
$('#imgs img').eq($(this).parent('li').index()).toggle(e.type==='mouseenter');
});
How to modify http://jsfiddle.net/ScAVW/1/ so that every second images change as 1->2->3->1->2->3->1... within div, unless link is hovered. If one of three links is hovered, the corresponded image displayed. It is stopped, when hovered. Once your mouse leaves, images start changing within div again.

Here's a simple image rotator. It will stop on mouseenter over a link, switching to the hovered image; and it'll resume on mouseleave, from the currently visible image.
var intervalId = setInterval(rotate, 1000); // rotate every 1s
function rotate() {
var $imgs = $("#imgs img"),
$visible = $imgs.filter(":visible").hide().index();
$imgs.eq(($visible + 1) % $imgs.length).show();
}
$('#my-ul a').on('mouseenter mouseleave', function(e) {
var $imgs = $('#imgs img');
if (e.type === 'mouseenter') {
clearInterval(intervalId); // stop, hammer time
$imgs.filter(":visible").hide();
$imgs.eq($(this).parent('li').index()).show();
} else {
intervalId = setInterval(rotate, 1000);
}
});
DEMO.