Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Dominic E.
Dominic E.
5,531 Points

jQuery Video / Image / MP3 Slider + Blur / Mosaik and Sound Effects

Hey guys,

my idea is to shuffle through a database with videos, images and MP3 songs. The thing is that I don't want to simply display all of the resources rather than modify them in real time. I have found various slides that can handle html content, images as well as videos but I don't know how to modify and apply effects that return to zero.

For example I want to display an image for, lets say 10 seconds. At the beginning the you cant the image but in the end - after the 10 seconds - the blur or mosaic effect is completely gone / finished. Same context for videos.

My idea was to use a jQuery Slider with a block transition such as this example slider (http://aviathemes.com/aviaslider/) and put the slide directly on top of the image div. But than the user could cheat by using the Firefox inspector and disable the Slider div.

Another thing is that I want to make MP3 incognizable at the beginning and in the end the user will hear the original one. So its a kind of "incognizable fade out effect" (or what ever you wanna call it).

Can someone help me with my concerns and has an idea of how to get this job done? Is this possible with jQuery / JavaScript?

All together it is supposed to be a game. I really need your help on that!

cheers + thanks in advance, Dominic

Dominic E.
Dominic E.
5,531 Points

Im still thinking about this and came to the decision that i could also use the example slider i have mentioned and use a Transition between two Images. The first is maybe just Grey and the second is the real Image. That would work i guess, doesnt it ? In most sliders i can change the Duration of the Transition right? For this i Need to know how to load Content dynamically into the slider. That would be possible with my Ruby Backend, if i put the code in between the <%= tags. Is that possible?

But nevertheless i dont know how to handle Videos. So if i want the same procedure and while the slider reveals the Video with a transisiton, the Video is supposed to be playing already.

Even though if i use a slider solution, People could cheat by using the Firefox Inspector to reveal the Images before the Transition is over. How can i handle this?

Please help me!

Edit: I have found something like this (http://homepage.ntlworld.com/ray.hammond/matching_game/#). So it could look like this and the tiles will show a piece of one image behind that whole tile set. Also possible with videos?