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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 58

Comments are closed.
  1. 3

    First, I would like to say that this is by far the best multimedia gallery I have found on the web for use. However, I am having a bit of difficulty adjusting the format to fit my needs. Basically, I am trying to get the preview images to be set on a fixed amount of space (behaving like a grid inside an AP Div tag) and not floating or dependent on the window size.

    I think I found the right area in the jquery.multimediagallery.js file, dealing with the countSpaces and container sizes, but every time I try and set them to a set limit, things go haywire.

    Can anyone help me figure this out?

  2. 4

    Hi guys.

    I’m attempting to get this to work, but this xml file is going way over my head. Some of the above links are broken, and I haven’t been able to find any site that I can truly understand what they mean.

    When I download the file, it does not display the ‘stuff.’ I’m aware that this has something to do with the PhP and xml file included, but I have no idea how to get this to work.

    Any help would be appreciated.

    Thanks

  3. 5

    Hey NRELDIR,

    This is an article I used to get the code working on my machine locally:

    http://www.adobe.com/devnet/dreamweaver/articles/setup_php.html

    I put my website into this folder (C:\xampp\htdocs) in a folder called web (call it what you like, or use your default web folder). Dreamweaver handled it pretty well for testing using live code, but the best way to test is to open up your browser and type “localhost/foldername” without the quotes. The folder name is the one I just referenced, so for me, it’s localhost/web. Hope this helps… I’ve been chugging through this stuff with no previous PHP or JS experience and it has been mind numbing.

    Anyways, on to my problem. I did manage to get the gallery stationary inside DV tags by adding one and fudging with the multimediagallery.js a lot.

    I got the gallery working like a charm on my machine (beside the random order), however when I uploaded it to my website, the gallery only shows 4 images (plenty more in the list) and no videos. Is there some kind of limiter in the code hidden somewhere to prevent us from using this online, or is there something up with the PHP settings on my web hosting server?

    HELP!!!!

  4. 6

    err.. sorry, 5 images, and my web address is flippenimages.com in case you didn’t know you can click on the name.

  5. 7

    Nevermind on the problem, I found out what was going wrong. It turns out windows likes to save images as .JPG instead of .jpg sometimes, and if the config file doesn’t match the title EXACTLY (or it’s thumbnail), then it will not load on the server I am using (which I am going to assume is some form of linux, since it ran just fine on my local server test in Win 7).

    Again, thank you so much for making this gallery code accessible. I love the features it provides for my site.

  6. 8

    This is really gr8!
    MARY LOU…. i would like to get ur training…………… can u help me?

  7. 9

    Hi there,
    this is a great gallery that I have got to insert it in my personal gallery, but does anyone know how to insert my own images/videos? I have been adding the images and thumbs into the media folder, but once I uploaded in the server, it doesn’t appear at all…please help me….

  8. 10

    I have noticed that myself as well as others don’t see the images in the gallery, there is some answers about installing the XSL extension for PHP on your server… how do you do this? I am trying to use this gallery for my digital portfolio course and I’m using the school’s computers. Can some one make it a little easier for me?

  9. 12

    I can’t get the gallery to run in Server: Windows NT WIN-6SV7184VROD 6.0 build 6001

    Worked just fine on Linux.

    Any suggestions?

  10. 15

    Nice work.

    Hi Jose,

    Can you tell me the steps how you integrate it with Asp.net

    Thanks and regards,
    Sanjeev Kumar

  11. 16

    Nice work,

    Hi Jose,

    I am trying to implemend the portfolio script inside a div which is for example 800 pixels width. Now the thumb structure has a fluid layout when setting different screen resolutions, when i add a div arround it with for example 800 pixels width the thumb structure gets messed up.
    Does anybody has a solution for this?

    Cheers
    BerD

  12. 17

    Hi,

    Is there an easy way to create a slideshow without having to clic to see the next pic ?

    Regards

Comments are closed.