Can I put a timeout function inside a for loop?

[nixnerd]

I would really like to achieve this but I can’t figure out how to do it.

Any general pointers?

I won’t post a codepen… but this is way to dependent on local files.

[Alen]

What are you trying to solve?

I’m thinking it would be easier to build up some sort of array, then have a function set to run on a interval, pulling values out and doing whatever needs to be done.

You can’t pause execution, it would render the whole page inaccessible as JavaScript is render blocking.

[nixnerd]

Dude, the whole thing is a hack because there’s no other way. It only works with local files… so let me see if I can upload it all to my server and then post some code. Codepen just won’t work.

My apologies. I know this isn’t how it’s done.

[nixnerd]

Alright… So, here is the item I’m working on:

http://joektempleton.com/sandbox/sps0/

As you can see, when you scroll through the photos, the background photo is the same as the foreground, but the background photo is full screen and blurred. It also moves at the same speed, but it’s much bigger… so it creates sort of a lateral parallax effect.

One cool thing about this slider is that you just load it up with images inside the .strip class and it then pulls those photos with data-path and makes them background images of the .backslide classes.

I’m using a tool called blur.js to blur the background photos.

HERE IS THE PROBLEM… Well, two really:

1. Right now, I’m having to manually set all the.backslide classes to be blurred. I need this done automatically… but I can’t figure out how. I tried to create a function that does it for me inside a loop… but that doesn’t work.
2. Blur.js was built to really only blur one element on a given page. So, you can blur one element, then you need to use timeout functions to blur the rest. I’m ABSOLUTELY certain there is another way… I just need to find it. I tried blurring new elements on click, but that was too slow and choppy.

Here is the gist that controls which elements get blurred:

https://gist.github.com/joetemp/d19f02156885f36528c6

Here is the gist of the JS that controls the slider actions:

https://gist.github.com/joetemp/8b6b3197430946780e95

[nixnerd]

Keep in mind, this is under development and far from a finished slider. Also, if you have suggestions on better way to blur photos, I’m open!

[__]

Just to clarify: the timeout is necessary? if so, is there a minimum interval that seems to be effective?

Have you already tried something like

$( /* your selector */ ).each(
    function( i,e ){ $( e ).blurjs(); }
);

I know a codepen would be difficult, but it would also be very helpful. Perhaps using placekitten or something…?

[nixnerd]

Just to clarify: the timeout is necessary?

It’s the only way I’ve found, other than a click event that works. Again, click event was waaaay too slow. There might be a way with a callback to fire them automagically when one finishes. I’d WAY prefer that to this stupid timeout BS. Also, in terms of an interval, I played around with it quite a bit. 100 is too small. 500 works. I guess I could try 250.

Have you already tried something like …(some code)

I didn’t even try each because I figured if you can’t build a function inside a for loop, you won’t be able to do it inside each. I’ll give it a shot though. On that note, apparently you can build a function inside a loop but you have to return the function somehow. I tried it like 10 times and never got it to work.

I know a codepen would be difficult, but it would also be very helpful. Perhaps using placekitten or something…?

I haven’t inspected blur.js too much… but every time I try to use a remotely hosted photo… it throws me an alert and doesn’t work. Believe me, I hate this nonsense too.

What I really think I need is what is called a “function factory” or a constructor object.

[nixnerd]

I’ve never had super good luck with SVG filters. I suppose I could try. Do they work on straight up photographs?

[nixnerd]

Damn… that would be a simple and elegant solution. I’m going to give it a shot.

[JacobPeters]

Really? I have to use them quite a few times for friends tumblr blogs. They wanted all their posts to be black and white. Worked great. Plus, there is filter: blur() support on chrome;

[nixnerd]

Ok, so I found this:

http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm

But it doesn’t give me any indication on how this works with a photo. What does the construction look like?

[JacobPeters]

Also, can I recommend using translates rather than margins? It would save time on repaints, and you’re already using scale.

[nixnerd]

Yeah, I meant to change that. My bad.

I must be using svg filters wrong. Whenever I try to apply one to an image… the image disappears.

[JacobPeters]

Does this work?

http://codepen.io/jacobcpeters/pen/vxItB

[nixnerd]

Certainly does!!! I just figured that out like right before you posted that but thanks!

Now the question is… does it work with a background image? I’m working on that now.

[Author]

Posts