tinpanalley Posted October 4, 2011 Share Posted October 4, 2011 Hello,I have a jpeg image in the background of a page on my site that has jwplayer in the middle. When someone clicks the play button on jwplayer, I'd like for the image in the background to fade down towards black. Anyone have any idea how to do this? It's just the one image so I can't imagine that it's too difficult. THANK YOU! Link to comment Share on other sites More sharing options...
thescientist Posted October 4, 2011 Share Posted October 4, 2011 do you know any javascript? Something like jquery could further simplify the process for you too. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 4, 2011 Share Posted October 4, 2011 jQuery would certainly make it easier, but it seems like overkill to include jQuery just for one simple animation. To do it with regular JavaScript, you'll need to use setTimeout and adjust the opacity of the image. This is, of course, assuming you are using an img element as the background, with the background of the page being solid black. Link to comment Share on other sites More sharing options...
tinpanalley Posted October 5, 2011 Author Share Posted October 5, 2011 The background is solid black, this jpg sits on top of it. It's an image of a movie screen in a theater with seats. I'd like for the play button to trigger the fade or even the drop in opacity so as to make it appear that lights have dimmed in this "theater". I'd love for the exit light to stay on, but that's another task for another day (probably just involves a mask on the fading image). So, setTimeout, then? Any place I can get a tutorial on this that might show a similar example? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2011 Share Posted October 5, 2011 First! of all, can the pressing of the flash jwplayer play button be detected, by JavaScript? if yes i would use Jquery, with 2 lines of code, you can have instant fadeout on the press of the button. JavaScript would involve settimeout, cleartimeout, allowing for different opacity styling and opacity value for different browsers. geez forget that! Link to comment Share on other sites More sharing options...
ShadowMage Posted October 5, 2011 Share Posted October 5, 2011 So, setTimeout, then? Any place I can get a tutorial on this that might show a similar example?I don't know of any off hand, but Google may be able to offer some suggestions. Link to comment Share on other sites More sharing options...
tinpanalley Posted October 5, 2011 Author Share Posted October 5, 2011 First! of all, can the pressing of the flash jwplayer play button be detected, by JavaScript?Wouldn't know how to check that. I have very little coding knowledge at all, I'm trying to do edits to a page that was coded for me and figuring things out piece by piece to do edits. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 5, 2011 Share Posted October 5, 2011 I have very little coding knowledge at all, I'm trying to do edits to a page that was coded for me and figuring things out piece by piece to do edits.In that case jQuery might be the way to go. Not that it's difficult to do it the "long" way, but it's definitely more involved. Unless you're interested in learning how it's done. Link to comment Share on other sites More sharing options...
tinpanalley Posted October 5, 2011 Author Share Posted October 5, 2011 In that case jQuery might be the way to go. I have no problem with learning the long way. The long way usually helps understand the shortcuts even better. But for now I really need to just get this done. So jquery tutorials is what I need to look up. But I still dont know if jwplayer detects javascript on its play button or where to get that info. I guess I could email their customer support. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 6, 2011 Share Posted October 6, 2011 This looks promising http://www.kpbowler.co.uk/node/17#controller Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.