How to play sound and view pictures with Fancybox and the same time?

My goal is to allow someone to view several images and play, pause, stop an audio file that will play when someone views the images.

Deliverable: multiple images that scroll to the next picture using fancybox navigation and an audio player at the bottom that plays a single audio clip.

I think I probably need to add a div at the bottom of Fancybox and then embed my player. What's the proper method? I'm a bit new with JQuery and Fancybox :(

Solution

try these API options instead of onComplete and onClosed

'titlePosition' : 'inside',
'titleFormat'   : function(title) {
 return '<span>'+title+'<br /><embed style="position:absolute;" src="test_song.mp3" type="audio/mpeg" controller="false" pluginspage="http://www.apple.com/quicktime/download/" width="1" height="1" /></span>';
}

of course, check that the embed part is correct (I just copy/paste from your code) ... you may test it as a normal html embed in your page.

NOTE: this is for fancybox v1.3.x