jQueryReplacing images at time intervals - javascript

I'm trying to add christmas lights to my logo. I was going to do this in flash but I'm trying to move away from flash so I decided to try it with jQuery.
A quick google search returned this tutorial. Which did a pretty good job getting me on the right track. The problem is that I don't want the images to fade in and out so I replaced
$active.fadeOut(function() $next.fadeIn().addClass('active');
with
$active.show(function() $next.show().addClass('active');
The problem with this is that it only rotates though the images once then stops. I tried using hide instead but it does a weird zoom-out effect.
In short, I have 4 images and i'm trying to cycle though them using this code:
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.show(function(){
$active.removeClass('active');
$next.show().addClass('active');
});
}
$(document).ready(function(){
setInterval('swapImages()', 1000);
})
Html:
<div id="myGallery">
<img src="br_xmas_1.png" class="active" />
<img src="br_xmas_2.png" />
<img src="br_xmas_3.png" />
<img src="br_xmas_4.png" />
</div>
See partly working full code here or not working jsfiddle

Try this;
function swapImages() {
var $current = $('#myGallery img:visible');
var $next = $current.next();
if($next.length === 0) {
$next = $('#myGallery img:first');
}
$current.hide();
$next.show();
}
$(document).ready(function() {
// Run our swapImages() function every 0.5 secs
setInterval(swapImages, 500);
});
Working example
Bonus (Random change)
function swapImages() {
var random = Math.floor(Math.random()*3),
$current = $('#myGallery img:visible');
$current.hide();
if($current.index() == random) {
random = ++random % 4;
}
$('#myGallery img').eq(random).show();
}
$(document).ready(function() {
// Run our swapImages() function every 0.5 secs
setInterval(swapImages, 500);
});

Ah, already answered.
Try this one
You've used show() function which adds display:block style to the element. So, after one run all of the images were displaying at once and the last one was on top of the others so that one was displayed.

Related

fading image at random

I wonder if anyone can help or point me in the right direction.
I have a grid of images. What I'm hoping to do is grab all the images on the page and put them in an array(done). Then every 3 seconds I want to to randomly choose an image, fade it out and fade in another image from the same page.
can someone help me with this?
I've got a nice script I made once, it does use jquery though:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var curIndex = 0;
var src = ['imgs/derp.jpg', 'imgs/derp2.png'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;
$(document).ready(function(){
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2){
if(fadeOut2){
setTimeout(fadeOut, waitTimeInMilliseconds);
}else{
var index = Math.floor((Math.random()*src.length))
if(curIndex == index){
index++;
if(index >= src.length){
index-=2;
}
}
curIndex = index;
$("#swekker").attr("src", src[index]);
fadeIn();
}
}
function fadeOut(){
$("#swekker").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}
function fadeIn(){
$("#swekker").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}
</script>
It's a jquery script script that continuously fades in, waits and fades out again.
To use this script simply add it to an image:
<img width="602" height="400" src="imgs/derp.jpg" id="swekker"/>

Fade Between Images

I have some code set up to fade between images, and it's not working properly:
The images:
<div id="banner_area">
<img class="active" src= "http://f14.co/automaker-search/assets/images/laptop-Dodge.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Ford.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Honda.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Subaru.png">
</div>
The javascript:
<script>
function cycleImages(){
var $active = $('#banner_area .active');
var $next = ($('#banner_area .active').next().length > 0) ? $('#banner_area .active').next() : $('#banner_area 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(){
$('#banner_area').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})</script>
The CSS:
#banner_area img { width:714px; height:414px; position:absolute; top:28px; left:55px;top:0;z-index:1}
#banner_area img.active{z-index:3}
Yet all I get is a pile of images, like so: http://f14.co/automaker-search/reno/
I'm guessing I'm way off? I'm really trying to keep it simple. No hover, just an auto rotate.
I would do it like this:
function cycleImages(){
var images = $('#banner_area img'),
now = images.filter(':visible'),
next = now.next().length ? now.next() : images.first(),
speed = 1500;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function() {
setInterval(cycleImages, 7000);
});
FIDDLE
You appear to have a syntax error in the code that is on the page, if you replace the cycleImages function with the one you have above it should start to work.
As an aside, I would write the interval as simply setInterval( cycleImages, 7000 ), and hide any images that are not currently being shown (they seem to "poke out" in the background).
We had some fun accomplishing this with a NodeList:
var nodes = document.querySelectorAll('#banner_area img');
var count = nodes.length;
setInterval(function() {
count -= 1;
if (count > 0) {
$(nodes[count]).fadeOut(1500);
}
else {
count = nodes.length;
$(nodes[count - 1]).fadeIn(1500, function() {
$(nodes).fadeIn(100); // arbitrary speed to outpace next transition
});
}
}, 7000);
:)

Image Carousel script stops after last image. Need it to repeat

I need my script to repeat after the last image is displayed. How can I go about resetting what the script has done then making it play again? The script changes the z-index of the current image. After the last image how can I make the script 'reset' the z-index of all the images and re-run from the top? Thanks!
<script>
function cycleImages(){
var $active = $('#carousel .active');
var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel 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
if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);//check for a next image, and if one exists, call the function recursively
});
}
$(document).ready(function(){
// run every 7s
setTimeout('cycleImages()', 1000);
})
</script>
You don't need to check again if there is a next .active element when setting a new Timeout
use just
setTimeout('cycleImages()',1000);
instead of
if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);
Simple logic would be to check if the images have reached the end by comparing the .length with the total no of images (full length). if yes then go to first image i.e
('#carousel .active').first()
and call
setTimeout('cycleImages()',1000);
happy coding :)
instead of bringing the next element to front, you can send the active element back by maintaning the counter for z-index, like
<script>
var zCount = 0;
function cycleImages(){
var $active = $('#carousel .active');
var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel img:first');
$active.fadeOut(1500, function(){//fade out the top image
$active.css('z-index', --zCount).show().removeClass('active'); //send the active image at the bottom of all images and unhide the image
$next.addClass('active'); //make the next image as active
setTimeout('cycleImages()',1000);
});
}
$(document).ready(function(){
setTimeout('cycleImages()', 1000);
})
</script>

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/

Can anyone tell me what's wrong with this switch statement (javascript)?

Hey all, its your typical slider - both automated and controlled by user click. Problem is when you click, if you are on last slide,it shouldn't show right arrow, and if you are on first slide, it shouldn't show left arrow. If you are anywhere else, it should show both arrows. However, when on last slide it still shows right arrow. However, when on first slide, it correctly doens't show left arrow. But then when you get to middle slides, it doesn't bring back right arrow:
$(".paging").show();
$(".image_reel img:first").addClass("active");
$active = $(".image_reel img:first");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerId = $active.attr('src').substring(7,8);
var image_reelPosition = (triggerId - 1) * imageWidth;
$(".image_reel img").removeClass("active");
$active.addClass("active");
switch ($active.attr('src')) {
case "images/4.png":
var $lastPic = $active.attr("src");
manageControls($lastPic);
break;
case "images/1.png":
var $firstPic = $active.attr('src');
manageControls($firstPic);
break;
case "image/2.png":
var $standardPic = $active.attr('src');
manageControls($standardPic);
break;
case "image/3.png":
var $standardPic = $actice.attr('src');
manageControls($standardPic);
break;
}
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
rotateSwitch = function(){
play = setInterval(function(){
if(!$(".paging a").show()) $(".paging a").show(); //This is CRITICAL - this makes sure the arrows reappear after they have been removed
$active = $(".image_reel img.active").parent().next().find("img");
if ($active.length === 0){
$active = $('.image_reel img:first');
var $firstPic = $active.attr("src");
manageControls($firstPic);
}
rotate();
}, 5000);
};
rotateSwitch();
$(".paging a").click(function(){
$active = ($(this).attr('id')=='rightCtr') ? $(".image_reel img.active").parent().next().find('img') : $(".image_reel img.active").parent().prev().find('img');
if ($active.length === 0){
$active = $('.image_reel img:first');
}
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
manageControls = function(whichImg){
(whichImg == "images/4.png") ? $(".paging a#rightCtr").hide() : $(".paging a#rightCtr").show();
(whichImg == "images/1.png") ? $(".paging a#leftCtr").hide() : $(".paging a#rightCtr").show();
if(whichImg != "images/1.png" || whichImg != "images/4.png"){
$(".paging a#rightCtr").show();
$(".paging a#rightCtr").show();
}
};
html:
<div class="window">
<div class="image_reel">
<img src="images/1.png" alt="" />
<img src="images/2.png" alt="" />
<img src="images/3.png" alt="" />
<img src="images/4.png" alt="" />
</div>
</div>
<div class="paging">
Left
Right
</div>
</div>
Thanks for any response.
It is working, you just have a typo:
var $standardPic = $actice.attr('src');
^
should be
var $standardPic = $active.attr('src');
Notes:
Your code can be rewritten in a much more elegant way, you can use another logic instead of the switch statement, especially with the help of jquery selectors.
Use firebug, it helps with javascript debugging and web development in general, and it has a console that shows errors.
The switch statement is weird, but it's OK I think. I believe that the problem is with that "manageControls" function. Inside the last if statement, you do the same thing twice. Also the expression in the if will always be true.
I said that the switch is "weird" because, well, it is:
switch ($active.attr('src')) {
case "images/4.png":
var $lastPic = $active.attr("src");
manageControls($lastPic);
break;
OK. So for that first case, you now know that the "src" attribute of the active element is "images/4.png". So, if you know that, why do you need to get it again to set the "$lastPic" variable? Why do you need those variables at all? Why not just collapse the entire switch down to
manageControls($active.attr('src'));

Categories