last day (15 days later) » 

1:05 AM
1
A: jQuery: infinite loop animation -For a photo slideshow

SidniciousjQuery is asynchronous, so you need to use its .queue() method to schedule the next step to happen after the animation finishes. I might do it like the below (including some stylistic changes which you can take or ignore). Here’s a fiddle, let me know if you have any questions. function slidesh...

 
I am a beguinner, as you might had figure out. Where can I learn about what you did with photos array? -I can't understand it: var photos = [ { image: ..., link: ....... } ]
 
@Omar: You might know that an array is an ordered list of things, and the easiest way to create one is by putting the list between square brackets: [ "one", "two", "three" ]. These things can be strings, numbers, other arrays, or other objects. Most things in JavaScript are objects, but the simplest kind of object is a set of keys which have values. They are a lot like arrays, except instead of accessing each thing with a number, you access it with its key, which can be any string. (Continued…)
@Omar: The easiest way to create objects is with curly brackets: { name: "Omar", id: 931377 }. In my code, photos is an array which contains three objects. Each of them has an image property and a link property. You could get at the one link with photos[0].link, or photos[0]["link"] (in the bracket form, the thing you put in brackets can be any expression, like photos[0]["li" + "nk"] or photos[0][someVariable]. You can learn more about object literals here.
@Omar: You could use jQuery’s .delay() function, which waits a certain amount of time before running the next thing in an element’s effects queue. Just add .delay(delayTime) as a line between .fadeIn(fade_time) and .queue(step).
 
THANKS!!! Your explanation REALLY helps! BTW, how can I add a var transition_time to the mix? -A time period before the div fades In and Out. (A time period to keep the image before the next one). PS. I like your stylistic changes
I used your comment to add a delay time between transition. Like this http://jsfiddle.net/2TPTX/4/? BTW, I am still having problems iniciating with an image and then switch to the next one -Right now the image is hidden on load
 
@Omar: Awesome! I might do that by moving the code that sets the image and link into a function (to avoid duplicating it), calling it right away with the first slide, and then queueing step after delay_time (starting i at 1 instead of 0). Like this.
 
WOW! I am really learning with this slideshow, thanks to you and everyone else!!! I am still scratching my head about .queue() -I can't understand the .queue() documentation.... Also I can't make sense out of (images[i])): .queue(function(nextSlide){ ... { ... }; }(images[i]))
 
1:28 AM
I am new to this chat....does it stays in the question, just like comments?
 
2:09 AM
I love your solution, but I am scratching my head on some areas...
 
2:23 AM
I can't make sense out of (images[i]))
 
3:03 AM
Hey, Omar. Are you still around?
Sorry, I was leaving work.
That is a little bit tricky to explain.
The chat, unfortunately, doesn't become part of the question.
That code is a little bit “tricky” and I probably shouldn’t have used it in the code I gave you.

The way variables work in JavaScript is pretty cool. When a function is created (i.e. when a line of code that includes a `function` statement runs), that function has and will always have access to all of the variables which were “in scope” (visible) when it was created. If you’re not familiar with this concept, check out [this question](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) for a good description.
386
Q: How do JavaScript closures work?

Kevin SamuelLike the old Albert said: "If you can't explain it to a six-year old, you really don't understand it yourself.”. Well, I tried to explain JavaScript closures to a 27-year old friend and completely failed. How would you explain it to a 6-year old person that is strangely interested in that subjec...

Much of the time this is great, but sometimes it can cause problems. Here's the slideshow function from my code, for reference:
function slideshow($slide, $link, fade_time, images){
    var i = 0;
    function step(next){
        if (i === images.length) {
            i = 0;
        }
        $slide
            .fadeOut(fade_time)
            .queue(function(nextSlide){ return function(next){
                $slide.css("background-image", "url('" + nextSlide.image + "')");
                $link.attr("href", nextSlide.link);
                next();
            }; }(images[i]))
            .fadeIn(fade_time)
            .queue(step);
Without that weird function(nextSlide){ return function(next){ … }; }(images[i])), the middle lines would look like this:
.queue(function(next){
    $slide.css("background-image", "url('" + images[i].image + "')");
    $link.attr("href", images[i].link);
    next();
})
This looks like it should work, and it mostly does. But, remember that the function passed to .queue() doesn’t run immediately — jQuery will run it after the fade out finishes. And, because JavaScript has “closures” (I don’t love the word because a closure isn’t a thing, it’s just the way JavaScript works), when jQuery does call that function you passed into .queue(), it will be using the images and ivariables from slideshow() when it was created.
But, what happens first?
Look just below that big chain of jQuery methods:
i++;
i will already have been incremented by the time jQuery actually calls function(next){ $slide.css(… }!
So, the wrong image will get loaded.
This is a nasty trick to get around that:
function(nextSlide){ return function(next){ … }; }(images[i])
I’m creating a function which takes one argument, nextSlide. Neither this function, nor the anonymous (unnamed) function inside it directly accesses images or i, so they won't be affected if either of them changes.
I call it right away: function(nextSlide){ … }(images[i]). That's like doing this:
function makeAFunctionThatGoesToASlide(nextSlide){
	return function(next){
		$slide.css("background-image", "url('" + nextSlide.image + "')");
		$link.attr("href", nextSlide.link);
		next();
	}
}

var goToNextSlide = makeAFunctionThatGoesToASlide(images[i]);
The current value of images[i] gets passed into makeAFunctionThatGoesToASlide, as the nextSlide argument. It returns a function which has access to that nextSlide argument — even though makeAFunctionThatGoesToASlide has already exit.
I could keep calling makeAFunctionThatGoesToASlide and get different copies of the inner function that will always go to specific slides:
var goToSlideOne = makeAFunctionThatGoesToASlide(images[0]);
var goToSlideTwo = makeAFunctionThatGoesToASlide(images[1]);
var goToSlideThree = makeAFunctionThatGoesToASlide(images[2]);
Calling each of those functions (goToSlideOne(), etc.) will always go to the slide that you passed in when you created it!
What you see being passed into .queue() is the same, just consolidated down into a few lines.
This is perfectly valid JavaScript:
function(text){ alert(text); }("Hello!")
It does the same thing as
alert("Hello!")
or
function mySpecialAlert(text){
	alert(text);
}

mySpecialAlert("Hello!");
Does that make any more sense?
I need to go to sleep soon, but I’ll try to check back in tomorrow.
 
 
3 hours later…
7:05 AM
WOW man! You are cool!!! I always try to find the answer to my questions
But somehow I end up with more questions....
Because I have no time to go to school to learn javascript/jQuery. The small portion I know is self thought, but do not understand terms like asynchronous, iteration, etc...so I wind up with more questions than when I started :P

I usually find answers in blogs, and lately, this site. But never had the luck to have someone explain me in detail this stuff like you are doing right now.

In a nutshell, I am veeeeeery thankful!
Oh, by the way...I do not mind that the code you used is a "bit tricky". It actually helps me more than you think. That's because I can learn new things and use it as an excuse to try to become a better "programmer" -Although I can not solve most of my problems on my own, yet.
For what I read, .queue() is better than stacking a bunch of callbacks. I wouldn't have known if it wasn't for your help. This makes your solution better than the others -To my point of view.
 

last day (15 days later) »