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.
- 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
- MG Gallery Plugin Documentation
- Default Crossfade Installation
- Swap Transition Installation With Thumbnail Strip at Top
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!