Welcome to the moogallery demo page!
Let's take a look at the example provided, notice that the gallery aspect can be easily styled through css!

Example

Let's create a video/audio/image gallery, images are taken from lorempixel

var mygallery = new moogallery('mycontainer', [
    {
      thumb: '/static/img/moogallery/mg_ex1_th.jpg',
      img: '/static/img/moogallery/mg_ex1.jpg',
      title: 'Image 1',
      description: 'Lorem ipsum color sin amet',
      credits: '<a href="">http://lorempixel.com</a>'
    },
    {
      thumb: '/static/img/moogallery/glen_hansard_dls_th.png',
      youtube: 'd0123bCoNkc',
      video_width: 853,
      video_height: 480,
      title: 'Glen Hansard (Brooklyn Youth Chorus)',
      description: 'Praesent neque est, viverra ac elementum sed, ultricies et risus',
      credits: '<a href="http://www.youtube.com/watch?v=d0123bCoNkc">youtube</a>'
    },
    {
      thumb: '/static/img/moogallery/joaquin_sabina_v_th.png',
      vimeo: '27882803',
      video_width: 500,
      video_height: 281,
      title: 'Y sin embargo Joaquin Sabina',
      description: 'Fusce sollicitudin purus ut nulla suscipit eleifend',
      credits: '<a href="http://vimeo.com/27882803">vimeo</a>'
    },
    {
      thumb: '/static/img/moogallery/i_have_a_dream_th.jpg',
      mpeg: '/static/audio/I_Have_A_Dream_sample.mp3',
      ogg: '/static/audio/I_Have_A_Dream_sample.ogg',
      title: 'I Have a Dream',
      description: 'Quisque dictum turpis id ipsum rutrum consectetur',
      credits: '<a href="http://en.wikipedia.org/wiki/File:I_Have_A_Dream_sample.ogg">wikipedia</a>'
    },
    // many others
  ],
  {
    show_bullets: true,
    support_mobile: true // I've included mootools-mobile in the head,
    onComplete: function() { alert('rendering complete'); }
  }
);

run javascript

The following block is a div#mycontainer

project page documentation download