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 […]

By in Playground on
Demo Download

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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Crafting a Scrollable and Draggable Parallax Slider

Exploring Playful Context-Aware Animations for Fixed Elements

Audio Reactive Shaders with Three.js and Shader Park

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 58

Comments are closed.

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

  5. Nice work.

    Hi Jose,

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

    Thanks and regards,
    Sanjeev Kumar

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

  7. Hi,

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

    Regards