From our sponsor: Leverage AI for dynamic, custom website builds with ease.
There’s a new version here.
In many blogs and news sites images are mostly included as an addition to the content. Space is often limited and therefore we thought of a slick solution to integrate a miniature image gallery that does not occupy a lot of space.
The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.
The Plugin Parameters
The plugin has the following configuration:
- menu: Defines if the menu should be visible (true) or just appear when hovering over the gallery (false). The default value is true.
- size: The size of the image gallery: “small”, “medium” or “large”
- mode: The initial mode of the image gallery: “single” or “thumbs”
The three sizes of the image gallery define the following picture sizes (maximal height and width):
- small: 102 pixels
- medium: 162 pixels
- large: 222 pixels
HTML Structure
All images should be wrapped in a div with class “microGallery”:
<div id="mG1" class="microGallery">
<img src="gallery/2.jpg"/>
<img src="gallery/3.jpg"/>
<img src="gallery/4.jpg"/>
<img src="gallery/5.jpg"/>
</div>
and you can call the plugin:
$("#mG1").microgallery();
Please note that in IE no rounded borders or box shadows will be shown.
There’s a new version here:
