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 […]

View demoDownload source

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:
View demoDownload source

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.
Previous:
Next:

Tagged with:

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

View all contributions by

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

Related Articles

Feedback 34

Comments are closed.
  1. 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

  2. 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)

Comments are closed.