Multimedia Gallery for Images, Video and Audio

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images. We use an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet […]

View demoDownload source

This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images.

We use an XML file for defining the items in the gallery and a PHP class with an XSL Stylesheet to transform the data. The XML file defines the locations of the items and their thumbnails. For video files, we can add more than one source or define a link to a YouTube video.

The structure of the XML file looks as follows:

<?xml version="1.0"?>
<MultimediaGallery>
	<file type="photo">
		<thumb>media/photos/thumbs/3.jpg</thumb>
		<source>media/photos/3.jpg</source>
		<description>this is a description</description>
	</file>
	<file type="video">
		<thumb>media/videos/thumbs/html5.png</thumb>
		<source>http://www.youtube.com/watch?v=siOHh0uzcuY</source>
		<description>Youtube Video: Introduction to HTML5</description>
	</file>
	<file type="video">
		<thumb>media/videos/thumbs/bbbtrailer.png</thumb>
		<source>media/videos/video1.ogg</source>
		<source>media/videos/video1.m4v</source>
		<description>Video Integration Example: BBB Trailer</description>
	</file>
	<file type="audio">
		<thumb>media/audio/thumbs/audio1.jpg</thumb>
		<source>media/audio/audio1.ogg</source>
		<source>media/audio/audio1.mp3</source>
		<description>Audio Example</description>
	</file>
	...
</MultimediaGallery>

Once a thumbnail is clicked, we can navigate through the previews and see the descriptions (that can optionally be added to the configuration XML file). Images get resized automatically to the size of the user’s viewport. We also resize the thumbnails to fit into the grid elements.

For displaying video and audio we are using jMediaElement which is an HTML5 audio and video development kit with Flash and VLC Fallback.
Please be aware that for non-embedded videos and audio files to be played in every browser, each necessary format needs to be added.

If you want to read more about HTML5 and video, we recommend the following resources:

Video on the Web (Dive Into HTML 5)
HTML5 video (Wikipedia)
5 Tools For Integrating HTML5 Video in Your Website (Mashable)
Using audio and video in Firefox (Mozilla Developer Center)

We hope you enjoy this gallery and find it useful! Stay tuned for updates!

View demoDownload source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 58

Comments are closed.
  1. 2

    is there a maximum number of images this supports? seems to crap out at 6×18. where the last image is just a blank thumbnail?
    otherwise everything looks great. thanks in advance

  2. 3

    i love this script, but there is a way to have more than one gallery (one for the videos, one for the images and one for the audio)? thnx

  3. 5

    I just downloaded it. Unzipped. Opened the index.html – but its not working?

  4. 6

    First of all, amazing gallery! thanks for sharing. I have a little problem: on my local server the gallery works fine, on remote server it doesn’t appear at all. I also made sure that XSL was enabled and it is. Any idea? thanks! jp

  5. 7

    Is absolute amazing, I wrote a small python script to add photos to the config file but I have to save the sings without prettyprint because prettyprint would save it as

    media/photos/3.jpg


    And the new line in the text node kills the parser I think.
    Could that be fixed?

  6. 8

    ok the in the last post it should be

    “<thumb>
    media/videos/thumbs/video1.png
    </thumb>

    but the breakets where eaten by the webpage

  7. 9

    This is really gr8! A very scalable approach that I would love to use in some of my upcoming projects. What a wonderful design too!

    BTW… some of you are wondering how to autoplay the jwPlayer. Have a look at line 290 on the jquery.multimediagallery.js file. you will need to add in an autoplay parameter within the video tag. I am sure there is a cleaner way to do this, but it seems to work for me.

    Thanks again. Wonderful work!!

  8. 12

    I just downloaded it and then after extraction i clicked on index.html file but it is not working. there is appearing a black page

  9. 14

    How to make this application work with my pictures? I’m not getting. I changed the options in the xml but the images do not appear.

  10. 15

    I downloaded it many time, extract files click on index.html and page appeares blank with black background. Please help me how can it work. what the thing am i missing. plz plz plz

  11. 16

    I do not see photo in gallery… and I’m install XSL extension for PHP on your server “Wampserver”. Plz help-me?

  12. 20

    Thanks James.
    Your hint works
    Enable XSL Module For Php.

    Open the File php.ini which is Located in Appserv and then remove the ” ; ” which is in the begning of the line
    ;extension=php_xsl.dll
    and restart the apache server.

    I will work.

Comments are closed.