MG Gallery jQuery Plugin

Note: Version 1.3.3 Released September 22, 2014.

There are many nice jQuery image gallery plugins available today. Yet I was still looking for the one with the right combination of features, specifically one that supported a generous caption text/HTML block for each image. The MG Gallery jQuery Plugin has just that and:

  • Navigable thumbnails.
  • A nice crossfade image transition, or a sequential swap transition.
  • An optional title that does not cover or obscure the current image.
  • An optional but built in opacity setting for the thumbnails with hover over animation.
  • Minimal CSS, HTML, or classes.
  • Flexible thumbnail and image page arrangement.
  • All images gracefully fade in on page load.
  • The thumbnails should degrade nicely if the client browser has JavaScript disabled.
  • An optional slideshow with controls.
  • Image preloader for more responsive animation
  • And a generous optional text/HTML block below the current image for more verbose captions.

Examples and Documentation

Download the Plugin at GitHub

If you are not familiar with GitHub, just click the ZIP download button to get the most current version. If you are familiar with GitHub, feel free to fork it or improve it!

Using the MG Gallery Plugin

After linking to the plugin file in your header, the required HTML structure is very simple: just a div with an unordered list of thumbnail images wrapped in anchors to the larger image, and a single empty div to contain the current image. I specifically wanted the plugin to require the fewest HTML objects, classes, or ID’s in the page source. The documentation has all the details on usage, so I won’t repeat myself here.

I have tested the plugin in Firefox, Safari, Chrome, and IE7, 8, 9, 10, 11.

If you have questions or suggestions (or even if you just use the plugin), please let me know!

What Do You Think?

* Required