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

By cody in Playground on
Demo Download

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? Check out our Collective and stay in the loop.

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.

cody

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

slideshow

How To Create Kinetic Image Animations with React-Three-Fiber

Background Shift Animation with CSS Blend Modes

Image To Grid Transition

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.

Feedback 34

Comments are closed.

  1. 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

  3. 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

  7. This is great – any change of adding a playing, pause, resume slide show feature? That would make complete this already awesome plugin

  9. Looks nice, but is there any way to configure the image sizes? Those are *tiny* images!

  11. Really nice, I love the way the top navigation slides in and out on the third example. Thanks for sharing!

  13. 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?

  14. 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 !

  17. 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???

  18. 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!!!!

  20. 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.

  28. 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

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