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 to transform the […]
multimedia

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

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!

Tagged with:

Mary Lou

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.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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. 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?

  2. I love it !!! ๐Ÿ™‚
    Great work and it looks very very sexy !

    Keep up the excellent work ! ๐Ÿ˜‰

    • Thank you all for your fabulous feedback, it always makes our day! Cheers, ML

  3. I love it too.

    But, the x close button is not sufficient. it’s necessary to close when we click anywhere.

  4. Hello Masoud,
    you need to install the XSL extension for PHP on your server. Hope it helps,
    Cheers, ML

  5. 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.

  6. 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.)

  7. 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!

  8. great job, and thank you for sharing.
    i have a question:
    For some reason i can’t get it to play .mov file, is there something special i need to do????

    i also updated the code to work with .net using ASPX pages and also i made it scan a folder of photos instead of giving it a pre-built xml… if you are interested please let me know where to send you the code.

  9. Hi, I would like to know if it is possible to do that the video starts immediately when it enlarges, instead of press play button.

    Thanks a lot

  10. Awesome gallery. Now I have one question, How can I make the preview image bigger. Have been searching high and low and have not found the controller for this.

    Thanks

  11. Great extension !!! Thumbs up for Mary Lou Yaaaay. Though it took me while until figure out the php xsl extension.
    It will be easier for the user to be able to close the big image by clicking anywhere and autoplay for the videos is a must. Video player starting in black screen without controls leaves in the dark thinking that nothing happened or the media did not get loaded.

    Only these two tiny remarks the rest of the app is Simply Wonderful

    Guby

    Greets

  12. I really love your work. I wanna learn more coz i Don’t know how to code a jquery. please help me out.

  13. Hey nice gallery.But I am attempting to use it only for images .But when I configure the xml for 16 images only 4 shows up.
    Thank for sharing your work