thickbox not load the embed tag content

Question

I need some advice about thickbox, please! I've just follow the example in thickbox inline but I couldn't load the content of the div in my page as I wanna. My html code and jquery code like that. Any suggestion for my problem?

 $(".artist").hover(function(){
     var artistname = $(this).attr("title");
     var artist = "<embed hspace=\"5\" vspace=\"5\" ";
     artist += "src=\"http://abc.vn/res/music/passion/MP3_Player.swf\"";
     artist += "menu=\"false\" quality=\"high\" width=\"330\" height=\"338\"";
     artist += "name=\"index\" allowScriptAccess=\"never\" type=\"";
     artist += "application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"";
     artist += "flashvars=\"&amp;config=http://abc.vn/res/music/passion/MP3_Config.xml&amp;amp;";
     artist += "file=http://abc.vn/listsong.hightway?artist=" +artistname+ "\"";
     artist += "wmode=\"transparent\" border=\"0\"></embed>";

     $("#tooltip_artist").replaceWith(artist);
     $("#tooltip_artist").css({display:"none"});
    },function(){});

<a class="artist" title="singer's name" rel="#TB_inline&inlineId=tooltip_artist" href="/singer's name">singer's name</a>

Thank you for your attention!

Answer 1

First of all it's not wise to use replaceWith here, because after the first hovering, the $('tooltip_artist') node will be replaced with your swf --> subsequent hoverings won't work. Its better to insert the embed code into the $('tooltip_artist') by using the .html() method.

then I'd use double/single quotes for the html snippet, so that you don't have to escape the attribute quotes all the time

var artist = '<embed hspace="5" vspace="5">';

Finally, are you sure you want to use .hover here? Obviously your intention is to play the music of an artist while the user is hovering over his name.

But in this case your approach is wrong. You'd better embed a scriptable mp3 player somewhere on the page and trigger its play method when the user is hovering over a track name. This gives a much better performace compared to always reinstantiating a swf Movie on .hover There is the nice jPlayer plugin for jQuery (completely styleable by CSS), you should have a look at that.