This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

call

<link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.slider.js"></script>
<script type="text/javascript" src="js/jquery.multimedia-portfolio.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
 });
</script>

in your BODY section, just add a simple html list of medias :

<ul class="multimedia-portfolio">
<li><a href='link-to-document'><img src='doc-thumbnail' title='doc-title'></a></li> 
<li>...</li>
...
</ul>

example, for a photo :

<ul class="multimedia-portfolio">     
 <li>
  <a href="documents/image1.jpg" alt="agrandir"><img src="thumbnails/image1.jpg" title="voiture dans un champ" /></a>
 </li>
</ul>

exemple, for a video (flv format):

<ul class="multimedia-portfolio">
 <li>
  <a href="documents/enfants-tbilissi.flv" alt="ouvrir la video"><img src="thumbnails/enfants-tbilissi.jpg" width="320" height="240" title="enfants" /></a>
 </li>
</ul>

exemple : for an audio record (mp3 format)

<ul class="multimedia-portfolio">
 <li>
  <a href="http://pulp2.podemus.net/Audio/pulp_tence_131007.mp3" alt="t&eacute;l&eacute;charger"><img src="thumbnails/pulp.jpg" title="Enquête sur le changement climatique - M-P Lefebvre" /></a>
 </li>
</ul>