Micro Image Gallery: A jQuery Plugin

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 […]
By in Playground on
micro
View demo Download Source

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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:

Message from TestkingGet professional testking 70-649 web designing training to learn how to create inspiring web designs using jQuery . download testking 640-822 tutorials and testking 642-832 study guides to become expert in web design.

Tagged with:

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

http://tympanus.net/codrops/author/cody/

configurator_featured

A Configurator for Creating Custom WebGL Distortion Effects

SVGFilterEffects_feComponent2_featured

SVG Filter Effects: Duotone Images with <feComponentTransfer>

AnimatedColumns_feat

Animated Image Columns

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 34

Comments are closed.

  8. I have a big problem the microgallery is inside a form, therefore when i click on the buttons, the submit accion is executed, how can a fixit ?
    ty

  9. Me again i fixit myself, i just added to the microgallery.js in the “$(‘.next’,$this).live(‘click’,function(){”
    “return false” at the end (the same for .prev)