From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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:
very nice plugin really like it is there any option to display image description, i like your plugin. i just downloaded but not working on IE
nice plugin
Doesn’t seem to work right in Safari on OS X Snow Leopard. In the demo… First small gallery works, 2nd one you have to click on to make images appear, 3rd one doesn’t show images at all.
Yes, we noticed that this bug happens today, yesterday the demo ran fine, it probably has to do with loading the images. Thanks for the comment, we will try to fix this and update it! Cheers, ML
It’s working now, and I have updated it!
Cheers
really nice, in special the version with navigation bar hidden.
Wonderful but id doesnt work in IE 7/8 on Xp
@namik, the IE problem is solved now. Thank you for your comment.
Cheers
so cutez and so nice…and so little sweet ^_^’
This is great – any change of adding a playing, pause, resume slide show feature? That would make complete this already awesome plugin
Hi Mark, thanks for the suggestion. I will release those features soon!
Cheers
Very impressive, its simple and elegant. Nicely Done
Looks nice, but is there any way to configure the image sizes? Those are *tiny* images!
Some improvements here: http://tympanus.net/codrops/2010/04/26/improved-micro-image-gallery-a-jquery-plugin/
Really nice, I love the way the top navigation slides in and out on the third example. Thanks for sharing!
I like the #3 sample, … i will use it to my site… thanks…
Hi, I’ve no idea what’s the problem but similar to the improved Micro-Gallery this one doesn’t work either (IE 7). No images appear on my screen. Has this happened to anyone besides myself?
Hi Ruana, in mine it’s working fine. Which version of IE7 are you using?
Thanks
this is so cool. I’m about to cry, you won my heart and I’ll be back to check your work. Thanks for sharing !
Great! love the stuff a lot – Thanx Boss
perfect 😉
This plugin if you, try to use it with php, to get images automatic it dosen’t show the slider till the images are loaded, dosen’t even show the div
Is that a bug???
I think with http://css3pie.com/ you can get the border-radius and the shadow to work on IE7 and IE8
One question, does this plugin work on IE6? cause on my computer it doesn’t … but it’s working flawlessly everywhere else… Thank you , you’ve done an amazing job, the code is clean and easy to understand and I was able to tweak it easily. Separating the presentational data in the CSS and those variables defined on the JS I must say man I LOVE YOU!!!!
Confirmed … It’s not working on IE6
I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit of people who have very beautiful and pleasing to be professional.Site concept and sharing are quality thank you.
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)