jQuery Media Gallery Plugin

The Media Gallery plugin is a small, simple tool that makes it easy to convert a collection of media files (YouTube videos for example) and thumbnail images into a gallery. For example, using the following HTML code and the Media Gallery plugin, the gallery displayed further below is created:

[-]?View Code JAVASCRIPT
<div id="gallery_display"></div>
 
<div class="media_gallery">
  <span style="background: url(http://img.youtube.com/vi/XfKlfSU0T10/2.jpg);" class="thumb"></span>
  <div>
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/XfKlfSU0T10&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XfKlfSU0T10&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
  </div>
</div>
 
<div class="media_gallery">
  <span style="background: url(http://img.youtube.com/vi/D05-9J0-Lsk/2.jpg);" class="thumb"></span>
  <div>
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/D05-9J0-Lsk&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/D05-9J0-Lsk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
  </div>
</div>
 
<div class="media_gallery">
  <span style="background: url(http://img.youtube.com/vi/mk_qhW_7K8Q/2.jpg);" class="thumb"></span>
  <div>
    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/mk_qhW_7K8Q&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/mk_qhW_7K8Q&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
  </div>
</div>
 
<div class="media_gallery">
  <span style="background: url(http://farm3.static.flickr.com/2138/2325309343_17cfb0c6f8_m.jpg);" class="thumb"></span>
  <div>
    <embed src="http://media.mtvnservices.com/mgid:hcx:content:atom.com:be5495e5-a5e5-4e80-8252-7631e5e2b837" width="425" height="350" type="application/x-shockwave-flash" wmode="window" allowFullscreen="true" flashvars="autoPlay=false&dist=http://www.studiosb3.com&orig="></embed><div style='border-top:1px solid #343f43; padding:5px 0 7px 0; text-align:center; width:426px; background:#000; color:#fff; font: bold 10px verdana, sans-serif;'><a href='http://www.atom.com/' target='_blank'><img src='http://www.atom.com/i/universal/atom_20.jpg'></a> <a href='http://www.atom.com/funny_videos/' target='_blank' style='color:#c1ddf2; margin:0 5px;'>Funny Videos</a> | <a href='http://www.atom.com/channels/category_cartoons/' target='_blank' style='color:#c1ddf2; margin:0 5px;'>Funny Cartoons</a> | <a href='http://www.atom.com/' target='_blank' style='color:#c1ddf2; margin-left:5px;'>More Video Clips</a></div>
  </div>
</div>
 
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.media_gallery').media_gallery({thumbnail_element: 'span',
      target_container: '#gallery_display'});
  });
</script>

The resulting gallery

As you can see, the plugin doesn’t specifically work with particular media file types, so you can easily mix and match YouTube media with other video sources or you can mix and match audio, video and Flash elements using this single Media Gallery plugin.

With a little bit of CSS love, you can create a gallery that not only works well, but looks great too!

Plugin Information

Thanks to my good friend, Spencer for providing me with great sample media to display here!

Comments:

{ 1 trackback }

jQuery plugin: Media Gallery
April 15, 2009 at 8:45 am

Comments on this entry are closed.