OpenStudio est éditeur du logiciel libre Thelia

Thelia est un outil de création de sites e-commerce et de gestion de contenu en ligne basé sur Symfony 2. Vous trouverez dans cette section un aperçu de nos autres contributions libres et variées : développements logiciels, thèmes graphiques, tutoriels...

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3).

Update 2010/02/19 : a new V2 beta version is available

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



  1. <link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />
  2. <script type="text/javascript" src="js/jquery.js"></script>
  3. <script type="text/javascript" src="js/jquery.dimensions.js"></script>
  4. <script type="text/javascript" src="js/ui.mouse.js"></script>
  5. <script type="text/javascript" src="js/ui.slider.js"></script>
  6. <script type="text/javascript" src="js/jquery.multimedia-portfolio.js"></script>
  7. <script type="text/javascript">
  8.         $(document).ready(function(){
  9.                 $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
  10.         });
  11. </script>

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

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

- example, for a photo :

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

- exemple, for a video (flv format) :

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

- exemple : for an audio record (mp3 format)

  1. <ul class="multimedia-portfolio">
  2.         <li>
  3.                 <a href="" alt="t&eacute;l&eacute;charger"><img src="thumbnails/pulp.jpg" title="Enquête sur le changement climatique - M-P Lefebvre" /></a>
  4.         </li>
  5. </ul>  


This program is free software ; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation ; either version 2
of the License, or any later version.

25 Messages

  • Hi, nice work but just to tell you it’s not working with latest jquery (jquery-1.7.1.js) developer version, can you please check once then it will be great for us.


  • I’m looking to create a graphic design portfolio and I was wondering could your product display Flash SWF files ?
    Also in the comments area of your site I see some great questions but no answers. Do you have a forum or question/answer page ?

    Thanks for your time.

  • hello patricia rios

    For your question I do a test, but I found that they can change the background, can change their CSS

  • Hello !
    I used it but i want to reduce its heights and want to put slider buttons where i want.

  • hey this is working fine for me thanks so much ! but there is a problem ! I would like to customise the slider to put my own background and buttons but when I change the back ground image, it seems to stop working properly...Cant I change the css ????

    thanks a lot !

  • How to reduce the height and width of the component ?

  • Hai,

    Today I tried installed this plugin,it has killed by whole day with an error saying that "The plugin does not have a valid header." when activating it after upload the file through dashboard.If i try to put the extract file directly into plugin folder and checking the plugins to activate it doesn’t appear.Your help is much more appreciated and hope that will save my day.
    Thanks in advance !

  • Hey there ! Great script however there are a few errors in the documentation. First, if you have an image and you want to have it shown in the thickbox, add class="thickbox" to the link. You also have to add the css stylesheet for the thickbox in order for it to work, as well as the js file :
    <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
    &ltlink 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/thickbox-compressed.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">
    $("ul.multimedia-portfolio").multimedia_portfolio(width : 500, baseDir : ’.’) ;
    ) ;
    Add this instead of the example above in the header.
    Now notice the scrollbar is in the way of the thickbox (this shows in the demonstration page). To change this we edit some stuff in the thickbox.css file. It can be found in the css folder. In Notepad, open thickbox.css and search for "z-index" and add 100 to the number after the semicolon in each case. Then save and view.

    Other than that the instructions here are fine and this is quite easy to implement and works quite well. Thanks for sharing !

  • Your site is an awesome platform to learn and adorn up jquery skills. Does anyone tell me about 4 rounded corners jquery script which is compatible with IE7 or IE8 any help must be appreciated thanks in advance.

  • Ahm.. the first image stay in the middle of the div I would like that It stays on the left.. It’s possible ? and How ?

  • i got a problem, i use this portfolio for many category in one page, eventually if i slide for one category, the slider for other category will slide too...pls help....

  • How to display slideshare documents in this.Slidshare Document is not working for me

  • great script !

    I would like to use smaller thumbnails so that the height of the slideshow is less. I set all my thumbnails to 100 px high but the script keeps increasing them.

  • Hi I have been combing and combing through this code to try to find a way to change the way the thick box closes. From what I have seen the close is written into the compressed thick box js file but I want to make the close option a image button.

    Voir en ligne : Godoploid design

  • Bonjour,
    Félicitation, ce script est très bien et simple d’installation ..

    Toutefois, les images "left_handle.png" & "right_handle.png" passent devant la thickbox ..

    une question de z-index que j’ai pas encore résolu ...

    Mais quand même , merci

  • Thank you for this great portfolio.
    I have a question — how do you change the size of the media ? Right now, the sizes are fixed at around 200px... but I would like to have a portfolio with images that are bigger.

    Thanks !

  • I have been trying this code above for about 2 hours, and it wasn`t working, the thickbox wasn`t handling the event onclick because the call order of the scripts isn`t correct above :

    <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">
    $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});

    I took the correct ordering of script calls from the demonstration index.html code !!!!!

  • thank you so much ... just want to know how to make the movement automatically

    Voir en ligne : Egypt Web Design

  • This is a great tool, thanks !!

    How do I change the pic/video that gets centered when the page is loade ?. In your example is the "Tbilisoba" flash movie.

    Thanks again !

  • Is there a way to change the first position, so that image1 is centered when the slideshow loads ?

  • ok the link was wrong ! now it’s working. thanks

  • demo is broken ?

  • Thanks for this, but your demo seems to be down.

  • Hello, how can I modify the "thickbox-compressed.js" file as it has been compressed !!

    Please can you provide a link to the uncompressed version.


    Many thanks.

    Kind regards,

    Voir en ligne :

  • How would I go about adding youtube videos ?
    Could you post an example ?

    This is a great script, keep up the good work.

    Thank you