OpenStudio LAB

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 2

New version of the non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3).

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

call

  1. <link rel="stylesheet" href="css/jquery.fancybox-1.3.0.css" type="text/css" media="screen" />
  2. <link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />
  3. <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
  5. <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.swfobject.1-0-9.min.js"></script>
  7. <script type="text/javascript" src="js/jquery.multimedia-portfolio-2.0.js"></script>
  8. <script type="text/javascript" src="js/jquery.fancybox-1.3.0.pack.js"></script>
  9. <script type="text/javascript">
  10.         $(document).ready(function(){
  11.                 $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
  12.         });
  13. </script>

Ajoutez simplement dans votre page la liste des fichiers multimédia :

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

- exemple pour une image :

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

- exemple, pour un fichier vidéo (flv):

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

- exemple pour un fichier audio (mp3)

  1. <ul class="multimedia-portfolio">
  2.         <li>
  3.                 <a href="http://radio-libre.fr/pulp/pulp_2007-10_changement_climatique_mplefebvre.mp3" title="Enquête sur le changement climatique - M-P Lefebvre" ><img src="thumbnails/pulp.jpg" width="320" height="240" alt="" /></a>
  4.         </li>
  5. </ul>  

- exemple, pour une video youtube :

  1. <ul class="multimedia-portfolio">
  2.         <li>
  3.                 <a href="http://www.youtube.com/watch?v=vJJxVXoilBY" title="Moitessier">Moitessier</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 3
of the License, or any later version.

call

  1. <link rel="stylesheet" href="css/jquery.fancybox-1.3.0.css" type="text/css" media="screen" />
  2. <link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />
  3. <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
  5. <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.swfobject.1-0-9.min.js"></script>
  7. <script type="text/javascript" src="js/jquery.multimedia-portfolio-2.0.js"></script>
  8. <script type="text/javascript" src="js/jquery.fancybox-1.3.0.pack.js"></script>
  9. <script type="text/javascript">
  10.         $(document).ready(function(){
  11.                 $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
  12.         });
  13. </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' title='doc-title'><img src='doc-thumbnail' alt='' width='thumbnail-width' height='thumbnail-height' /></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" title="voiture dans un champ"><img src="thumbnails/image1.jpg" alt='' width='320' height='240' /></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" title="enfants"><img src="thumbnails/enfants-tbilissi.jpg" width="320" height="240" alt="" /></a>
  4.         </li>
  5. </ul>

- exemple : for an audio record (mp3 format)

  1. <ul class="multimedia-portfolio">
  2.         <li>
  3.                 <a href="http://radio-libre.fr/pulp/pulp_2007-10_changement_climatique_mplefebvre.mp3" title="Enquête sur le changement climatique - M-P Lefebvre" ><img src="thumbnails/pulp.jpg" width="320" height="240" alt="" /></a>
  4.         </li>
  5. </ul>  

- exemple, for a youtube video :

  1. <ul class="multimedia-portfolio">
  2.         <li>
  3.                 <a href="http://www.youtube.com/watch?v=vJJxVXoilBY" title="Moitessier">Moitessier</a>
  4.         </li>
  5. </ul>

23 Forum posts

  • Could you get the plugin to auto scroll with speed settings and other similar modifications?

  • hello,

    Thank you for this useful multimedia portfolio. I use it on a website that works fine in ie8. Like William I have some trouble getting the handle to slide in ie9. The slider of the demonstration also seems not to work well in ie9. I have updated the jquery core and took jquery-ui-1.8.16.custom.min but the trouble remains. Someone has found a solution ?
    Many Thanks for any help.

  • Bonjour j’ai installé ce super plugin portfolio sur un site spip. Il correspond à mes attentes mais j’ai tout de même un soucis.

    Le texte du site n’a plus de saut de ligne..tout est écrasé sur la page ou le lecteur est installé mais également sur toutes les autres pages???

    Avez-vous une idée?

    Merci d’avance

    Jérôme

  • I’m having some trouble getting this to work, but I’m inexperienced to web design. Is it possible to get a for dummies guide for this, it would be very much appreciated :)

  • many thanks ! I like this.
    Currently I have a problem with huge number of photos.
    Here is the situation.
    I have more than 5000 photos. It produce many rows of picture and each row fold at 75.
    I do not know how to stretch and make them as very long one row.

  • I really like your idea of using adapters. Do you have any documentation on how to create new adapters?

  • I seem to be having some trouble getting the handle to slide. I am sure I am missing some very basic function. Perhaps, someone could look over my coding and direct me towards the necessary fix. Thank you.

    Below is a link to the preliminary test page I am working on.

    http://interactivetoy.com/IATC0711/demos/ITC_prototype_demos6.html

  • Le plugin présenté sur cette page est un plugin jQuery et non pas un plugin SPIP.

    La version pour SPIP existe et est disponible ici : http://svp.smellup.net/spip.php?plugin315

  • Bonjour,

    Merci pour ce splendide plugin.

    Comment l’intégrer dans mon squelette article.html à la place du porfolio ?

    Encore merci

    Robert

  • Hi, thanks very much for this script, we want to use it on our band site.
    But, we like to show multiple Multimedia Portfolio players with pictures from diverend gigs on one page... Is that possible and how can we do that?
    Thanks in advance.

  • Hello,
    Many thanks for making this module.
    The cursor seems not to correctly function with ie9.
    When you click on the cursor the hand appears but it is not possible to move it.
    Someone has noticed that and found a solution ?

  • There is a way to put the width of the images auto, or max-width: 130 px; (e.g) and just put a padding between images? Because I have images of various widths and the Designer wants to keep the same space

  • There is a possibility of bridging the gap between the images?
    Thanks

  • There is a possibility of eliminating Distance from among the images?
    Thanks

  • Its wonderful module which i needed. thanks a lot for developer....

  • gallery position anywhere in the slider, ie the beginning and end, middle, etc.

  • posicionar la galeria en cualquier parte del slider, es decir al inicio, al final, en medio, etc

  • Very nice module, thanks!

  • Hi,
    It was gr8 work, i wanted to know can we open .flv file similar to the images (like opening it in pop-up like the images opens)

  • Hello ....

    This is a beautiful gallery. Thank you for making it.

    I have a question:

    Which is the CSS file where I can extend it across the page so it displays more thumbnails? I would like to have more than 3 thumbnails visible. Possibly 6 or 8 but smaller thumbnails.

    Thanks,

    Doug

  • We’re moving to flash, but for the time being we have a large number of existing WMV videos that we also need to support. Would it be possible for you to add support for WMV?

    Also, I don’t know if this is a problem (or not), but our new FLV’s will stream from a web address that begins with "http://", but our older WMV will stream from a web address that begns with "mms://". Will the current version of jQuery Multimedia Portfolio support the use of a "mms://" web address?

    Thanks,
    DF

  • I have 2 questions:

    1) Does jQuery Multimedia Portfolio 2 support wmv? Does it support steaming wmv video?

    2) Does jQuery Multimedia Portfolio 2 support web addresses that do not begin with http:? For example, can I use "mms://media.anyone.com/streamingvideo.wmv"?

    Thanks!