Develop Reference

slider won't work properly

I am trying to animate my list item towards right but it animate all item towards right at once but I want it to be one after another ..here is my jQuery
var I,
total_slide = $('#slide li').length,
slide = $('#slide li');
function run() {
for (I = 1; I <= total_slide; I++) {
var total = total_slide - I
$(slide).eq(total).animate({
left: '700px'
}, 4000);
}
}
run()

You have to use setTimeout function to make pauses between animations:
function run(){
var timeout = 0, delay = 4000;
$("#slide li").each(function(){
var $li = $(this);
setTimeout(function(){
$li.animate({ left: 700 }, delay);
}, timeout);
timeout += delay;
});
}
Example
Also I would recommend to use CSS-animations whenever it's possible:
Example with CSS-animations

Stop slideshow from cycling if only has one image + stop fade of first image when slideshow loads

I have a slideshow that is almost perfect in fitting my needs. I just need to change a couple of things:
The slideshow should not fade in and out if there is only one image.
The slideshow should not fade in when the page is loaded.
Thanks!
I have the code here:
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
Html code:
<div id="rotating-item-wrapper">
<img src="images/slider/1.jpg" class="rotating-item" />
<img src="images/slider/2.jpg" class="rotating-item" />
<img src="images/slider/3.jpg" class="rotating-item" />
</div>

The slideshow should not fade in and out if there is only one image.
you can get the number of img using
if($('.rotating-item-wrapper .rotating-item').length > 1){
// run slider
}else{
// just one image don't slide
}
The slideshow should not fade in when the page is loaded.
you already used
$(window).load();
to make your code more easier to control .. use infiniteLoop as a function
var infiniteLoop = function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
});
and then setInterval
if($('.rotating-item-wrapper .rotating-item').length > 1){
// run slider
setInterval(infiniteLoop , itemInterval);
}else{
// just one image don't slide
}
the full code looks like this
$(document).ready(function() { //start after HTML, images have loaded
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
if(numberOfItems > 1){
//loop through the items
var infiniteLoop = setInterval(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
}
InfiniteRotator.init();
});
JSFIDDLE

I think it has to look like this:
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
// We want the first slide without fade
$('.rotating-item').eq(currentItem).fadeIn(0);
//loop through the items
//dont slide if there's no more than 1 item
if(numberOfItems < 1){
var infiniteLoop = setInterval(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
}

Change img src every second using Jquery and Javascript

I have been trying to write a script that changes an image src every two seconds based on a list.
So, everything is inside a forloop that loops over that list:
$(document).ready(function() {
var lis = {{dias|safe}}; <----- a long list from django. This part of the code works fine.
for (i=0; i<lis.length; i++){
src_img = lis[i][1];
var timeout = setInterval(function(){
console.log(src_img)
$("#imagen").attr("src", src_img);
}, 2000)
}
});
It doesn't work, the console logs thousands of srcs that correspond to the last item on the list. Thanks a lot for your help.

you don't need to run cycle in this case, you just save "pointer" - curentImage and call next array item through function ever 2 sec
var curentImage = 0;
function getNextImg(){
var url = lis[curentImage];
if(lis[curentImage]){
curentImage++;
} else {
curentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)

var curentImage = 0;
var length = lis.length;
function NewImage(){
var url = lis[curentImage];
if(curentImage < length){
currentImage++;
}
else{
currentImage = 0;
}
return url;
}
var timeout = setInterval(function(){
$("#imagen").attr("src", getNextImg());
}, 2000)
PS: Better than the previous one, Checks for lis length and starts from first if you reach end.

You need something like this
$(document).ready(function() {
var index = 0;
setInterval(function(){
src_img = lis[index++ % lis.lenght][1]; // avoid arrayOutOfBounds
$("#imagen").attr("src", src_img);
}, 2000)
});

How to get around javascript timeout of 0

Here is a fiddle: http://jsfiddle.net/hB7gY/16/
I have the following code which controls a slideshow with four quadrants. The idea is to rotate through the slideshow and dynamically change the slides based upon a predefined time frame. For instance, many times a slide has a value of 0, which means instantly load the next slide in the series.
The problem is that when using fadeIn() or animate(), they take longer than the timeout of 0. I've tried incrementing my counters when this happens, but that doesn't work.
EDIT: I think I may not have been clear in my question, but the goal is to be able to load the next image instantly, but still maintain the animation effect on the previous image, so essentially it will appear as if both images are animating simultaneously.
var slide_array = <?php echo json_encode( $slides ); ?>;
jQuery(document).ready(function(){
var c =0;
var slide = 0;
var counter = 1000;
for (var i=0;i<slide_array.length;i++){
jQuery('#slide_'+i).attr('src', slide_array[i]["url"]);
}
var intFn = function(){
clearTimeout(interval);
c++;
slide++;
if (slide == slide_array.length) { slide = 0; }
if (c == 4){ c = 0; }
jQuery('#slide_'+c).attr('src',slide_array[slide]['url']).animate({
opacity: 0.5
}, 100, function() {
jQuery('#slide_'+c).attr('src',slide_array[slide]['url']).animate({
opacity: 1
}, 100);
});
counter = slide_array[slide]['duration'] * 1000;
//if (counter < 1000 ) { counter = 400; }
interval = setTimeout(intFn, counter);
}
var interval = setTimeout(intFn, 2500);
});

jQuery pause function on hover?

I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...
Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?
var current = 1;
function autoAdvance() {
if (current == -1) return false;
jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
changeEvery = 10;
}
var itvl = setInterval(function () {
autoAdvance()
}, changeEvery * 1000);

Something like this would work assuming interval is defined in an outer scope:
$('.slideshow img').hover(function() {
interval = clearInterval(interval);
}, function() {
interval = setInterval(flip, 5000);
});

(function () {
var imgs = $('#your_div img'), index = 0, interval,
interval_function = function () {
imgs.eq(index).hide();
index = (index + 1) % imgs.length;
imgs.eq(index).show();
};
imgs.eq(0).show();
interval = setInterval(interval_function, 5000);
$('#your_div').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 5000);
});
}());
Example: http://jsfiddle.net/Zq7KB/3/
I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.
Hope this helps.