Multimedia Gallery for Images, Video and Audio

Development June 24, 2010 by Mary Lou 13 Comments

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 demo Download source

Tagged with: audio, CSS3, gallery, html5, images, jQuery, PHP, video, xml, xsl

Discussion¹³ Join the discussion

Jeremy Holstein
June 24th, 2010 at 20:18

I like this a lot, but do you know if there is a way to like make it so when you click on the thing it opens another folder instead of an individual picture?
Valentin Ganchev
June 24th, 2010 at 21:08

I am speechless.. great work! Keep it up!
Alex Flueras
June 25th, 2010 at 19:32

Superb as usual… Thanks so much for sharing such great tools with us.
Frankie
June 26th, 2010 at 09:24

I love it !!! :-)
Great work and it looks very very sexy !

Keep up the excellent work ! ;-)
Mary Lou
June 26th, 2010 at 11:55

Thank you all for your fabulous feedback, it always makes our day! Cheers, ML
JuliusDesign
June 28th, 2010 at 11:30

Fantastic!
Desfossez Thomas
June 28th, 2010 at 19:59

I love it too.

But, the x close button is not sufficient. it’s necessary to close when we click anywhere.
masoud
July 15th, 2010 at 01:33

i cant Speak en..
I do not see photo in gallery..
..>
http://streetdesign.ir/pic/
Mary Lou
July 17th, 2010 at 22:16

Hello Masoud,
you need to install the XSL extension for PHP on your server. Hope it helps,
Cheers, ML
Lonnie Hicks
July 18th, 2010 at 05:58

Thanks for doing this. But…How do you change the hieght of the over all box. It’s too close to the bottom and I don’t think users will be able to see the bottom close button. How do you shrink the height of the main box to make the bottom “close button” more visible.
Jamie B
August 17th, 2010 at 05:02

lovely– i really like the cleanness of the design.
i just have a question though, i downloaded the files, but the gallery doesn’t show up on index.html. i read your comment to masoud, and to be honest, i have no idea how to do that. is there somewhere i can read up on it (in layman’s terms, possibly)?
(i hope that doesn’t sound too pathetic.)
demetrius
August 25th, 2010 at 17:17

Awesome work! I’m fully in love with it.
The only one question I have – how to make videos autoplay? (now u have to click thumbnail firstly and than – PLAY> button).
Thank u so much!
h3b
August 30th, 2010 at 21:35

hope this helps
PHP Servers for XSL Support
http://www.adobe.com/devnet/dreamweaver/articles/config_php_xslt_07.html