From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.
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:
share admin thanks a lot for sharring a very successful and wonderful
possibility of sharing and social solidarity at a level just fine thank you
Internet technology will speed up.Thank you very much.
Your site is very useful in terms of cultural
A significant share of your site as people think. Thank you.
I always follow your site thank you wish you continued success. Thank you.
wow. Great galley I like you :3 kawaaiii desuuuu *-*
Arigato (^v^*)/P
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
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)