The images used in the demo are by Davidd. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

The locations for the images are saved in the album.xml file which has the following stucture:

<album>
	<name>Thailand 2011</name>
	<description>Some description</description>
	<places>
	...
	</places>
</album>

Inside of the places, we’ll have the information of each place with its name and location and all the single photos in that place:

<place>
	<name>Bangkok</name>		
	<location>
		<lat>13.696693336737654</lat>
		<lng>100.57159423828125</lng>
	</location>
	<photos>
		<photo>
			<thumb>photos/Bangkok/thumbs/1.jpg</thumb>
			<source>photos/Bangkok/1.jpg</source>
			<description>Some description</description>
			<location>
				<lat>13.710035342476681</lat>
				<lng>100.52043914794922</lng>
			</location>
		</photo>
		<photo>
			...
		</photo>
	</photos>
</place>

Besides the path to its thumbnail and the full image, every photo has a location in latitude and longitude as well.

Note, that we are using some PHP here in order to load and retrieve the XML data, so you’ll need a server environment to run this.

Initially, a map with all the places is shown:

In our example it is Bangkok, Phuket and Myeik. In the bar under the map and the preview area, we will have the name and the description of the whole album. In this stage we can already go fullscreen in order to see the full map with the places.

Back in the normal mode, when choosing a place, all the images of that place will show on the right side while we zoom the map in on the left side. As you can see, whenever you hover over a photo, you will see its location on the map and vice versa:

When clicking on a thumbnail or the camera icon on the map, we open the preview for the images, through which we can also navigate:

Clicking on the zoom icon of the preview image will open the large lightbox-like view of the full image:

When we are in the second level and open the fullscreen mode, we can see the thumbnails in the map:

Hope you find it useful, feedback is welcome!

View demo Download source

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