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 Manoela Ilic 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.

Menu to Grid Layout Animation

On-Scroll Typography Animations

Kinetic Typography Page Transition

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.

  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?

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

  6. I love it too.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. ok the in the last post it should be

    “<thumb>
    media/videos/thumbs/video1.png
    </thumb>
    ”
    but the breakets where eaten by the webpage

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

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

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

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

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

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

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

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

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

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

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

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

  49. 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….

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