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.
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élécharger"><img src="thumbnails/pulp.jpg" title="Enquête sur le changement climatique - M-P Lefebvre" /></a>
- </li>
- </ul>
Download
jquery.multimedia-portfolio.zip
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.
Le 21 novembre 2007


25 Messages
28 février 2012, 05:47, par Ghanashyam
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.
Thanks
7 février 2012, 00:30, par Rick Martinec
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.
Rick
17 novembre 2011, 08:22, par JAVA
hello patricia rios
For your question I do a test, but I found that they can change the background, can change their CSS
23 octobre 2011, 17:51, par Wiqqi
Hello !
I used it but i want to reduce its heights and want to put slider buttons where i want.
9 octobre 2011, 12:05, par patricia rios
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 !
19 août 2011, 15:30, par abison
How to reduce the height and width of the component ?
17 août 2011, 15:50, par Manoj
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 !
30 juillet 2011, 23:23, par tomy
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" />
<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/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">
$(document).ready(function()
$("ul.multimedia-portfolio").multimedia_portfolio(width : 500, baseDir : ’.’) ;
) ;
</script>
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 !
30 juillet 2011, 09:28, par Richard
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.
http://www.todaytricks.com
28 avril 2011, 01:40, par Fabricio
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 ?
thanks
23 janvier 2011, 15:20
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....
5 janvier 2011, 10:49
How to display slideshare documents in this.Slidshare Document is not working for me
18 décembre 2010, 01:57, par Galen Sonntag
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.
29 avril 2010, 15:32, par Tom
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
12 janvier 2010, 14:35, par camyo
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
23 septembre 2009, 23:29
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 !
13 septembre 2009, 22:43
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">$(document).ready(function(){
$("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
});
</script>
I took the correct ordering of script calls from the demonstration index.html code !!!!!
2 septembre 2009, 09:43
thank you so much ... just want to know how to make the movement automatically
Voir en ligne : Egypt Web Design
7 mai 2009, 06:41
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 !
23 mars 2009, 16:17
Is there a way to change the first position, so that image1 is centered when the slideshow loads ?
16 mars 2009, 08:29, par Arnault
ok the link was wrong ! now it’s working. thanks
16 mars 2009, 07:07
demo is broken ?
14 janvier 2009, 00:30
Thanks for this, but your demo seems to be down.
3 septembre 2008, 11:50
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.
mark[at]storm-media[dot]co[dot]uk
Many thanks.
Kind regards,
M.
Voir en ligne : http://www.storm-media.co.uk/
10 août 2008, 09:50, par Issy
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