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>
Related
I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen
$.fn.animation = function () {
//get the welcome msg element
var $message = $(this);
//get a list of letters from the welcome text
var $getList = $(this).text().split("");
//clear the welcome text msg
$(this).text("");
//loop through the letters in the list array
$.each($getList, function(idx, element) {
//create a span for the letter and set opacity to 0
var newElement = $("<span/>").text(element).css({
opacity: 0
});
//append it to the welcome message
newElement.appendTo($message);
//set the delay on the animation for this element
newElement.delay(idx * 90);
//animate the opacity back to full 1
newElement.animate({
opacity: 1
}, 1100);
});
};
$('.introduction').animation();
$('.secondary').animation();
First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.
Edited
Click here to see the whole code working.
Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.
Changes I made in script: To start the second text animation with delay I used setTimeout() function:
setTimeout(function(){
$('.secondary').animation();
},2000);
To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:
$('.carousel').on('slid.bs.carousel', function () {
// here is where you start the animation for the second slide
})
Re-Edit
To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:
$('.carousel').bind('slid.bs.carousel', function (e) {
if($whichSlide == 1){
//set $whichSlide position for the next slide event
$whichSlide = 2
//start to animate the text
$('.introduction').animation();
setTimeout(function(){
$('.secondary').animation();
},2000);
/*set the text on the second slide to be invisible
* because we don't want it to appear before animation starts
*/
$('.slide2').css("opacity",0);
}else if($whichSlide == 2){
$whichSlide = 1;
$(".carousel").carousel("pause");
$(".slide2").animation();
setTimeout(function(){
$(".carousel").carousel();
},3000);
$('.introduction').css("opacity",0);
$('.secondary').css("opacity",0);
}
});
See the working code
I have problem with scrolling.
When clicking on next tag,
page scrolls to next div. When scrolling to top of the last div and then clicking "next", it must go to the top of the first div, but it doesn't.
demo
Modified your code:
if (t === 'next' ) {
if($('.current').next('.section').length==0)
var $next = $('#one');
else
var $next = $('.current').next('.section');
}
Working Demo
if (t === 'next') {
var $next = $('.current').next('.section');
//so no more next
if (!$next.length)
$next = $('div.section').first();
http://jsfiddle.net/aVJBY/270/
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);
:)
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.
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow, set 4 seconds for each images
slideShow(2000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
</script>
Note: this is not my script, it came from John Rausch's site.
Update:
Yikes, I didn't realize it was going to format like that! Let me repost just a link to his site. Don't want to give anybody eyestrain http://jonraasch.com/blog/a-simple-jquery-slideshow
It works for me in IE. Try it out with this jsFiddle.. Not sure it's the best slideshow.
I would put the object property name and values in quotes, just to avoid any possible variable name clashes. So I would wirte
current.animate({"opacity": "0.0"}, 1000).removeClass('show');
and not ...({opacity: 0.0}, 1000)...
Also, don't use eval for you setTimeouts, just use a function reference or an anonymous function. So I would write:
var timer = setInterval(gallery,speed);
and not ... setInterval('gallery()',speed);
Not sure what your CSS positioning looks like, but it seems like that'd be tricky with this slideshow.
ie is a pain. Why don't try with ie tags?
http://www.quirksmode.org/css/condcom.html
It worked for me on CSS, sure it can work with JS.