Click on image, open flash file as a pop up

Question

I can successfully embed flash file on my page, but i like to do some changes. I like to show a image on my page first, and on image click, show the flash file as a pop up instead of appending to the website. I have searched online for quite awhile but still have no clue..

A simple fiddle i did: http://jsfiddle.net/e057o7b0/

my original append code:

$(this).parent().siblings(".sectionTwo_mainPic").append('<object class="swfSrc" type="application/x-shockwave-flash" target="_blank" data="'+mainSwf+'" width="800" height="600"> <param name="movie" value="'+mainSwf+'" /><param name="quality" value="high"/></object>');

Can anyone enlighten me? Thanks

Answer 1

With jQuery you can do it in following way:

• create div (it will be used as a popup later) with your flash object
• hide that div on the page (display: none)
• attach new onclick function to your image in which you will create new jQuery dialog ( http://jqueryui.com/dialog/ ) using created above div

That's all! If you are using some backend (ASP.NET MVC, Angular, ...) you don't have to create that div on the page as popup content can be loaded by ajax call)