Improved Micro Image Gallery: A jQuery Plugin

Here’s an improved version of the Micro Image Gallery Plugin. I have added some features as suggested in the comments, specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To […]
igv2

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

Here’s an improved version of the Micro Image Gallery Plugin. I have added some features as suggested in the comments, specifically the auto play function, the possibility to add descriptions for each image, and the cycle mode. Note that the auto play function can only be set if the cycle option is also set. To add descriptions for the images, just place your text inside the alt attribute of the image tag, like shown further in the HTML Structure section.

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”
  • cycle: If set to true, the first image will be displayed again when reaching the end of the gallery
  • autoplay: If set to true, the gallery will jump from image to image automatically
  • autoplayTime: The time in milliseconds that it takes to show the next image

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" alt="description comes here"/>
	<img src="gallery/4.jpg" alt="if you leave it empty then nothing will appear in the description container"/>
	<img src="gallery/5.jpg" alt="...and another description"/>
</div>

and you can call the plugin:

$("#mG1").microgallery();

Please note that in IE no rounded borders or box shadows will be shown.

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/

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 26

Comments are closed.
    • @Marcelo
      It works fine in IE7, what exactly are you referring to? As mentioned in the post, the rounded borders and the shadows are CSS3 properties that are not supported by IE. But the functionality works fine in IE7 and IE8. Cheers

  1. Hi, unfortunately it also doesn’t work for me in IE7. Not even the online demo. I can’t see any images. In my browser window I read the common IE-statement that an error was encountered (supposedly a script error). I didn’t run the debugger yet though.

  2. Hi, I’m using IE 7.0.5. Personally I’m using the latest Firefox but I’m designing for several clients in Austria (Europe) and – as you’ll certainly know – I have to take into account what the majority of people OUTSIDE the designer- and developer scene is using. And that’s still IE 7 (thank god that the era of IE 6 is almost over). Of course, CSS 3 is a problem too. I think it’s good that most of the bloggers who run a website like yours began to simply ignore the Seattle-bunch. Maybe that will finally change their attitude towards the developers.

    • Hi Ruana,
      I am testing with IE8 developer mode where I can see the page in IE7 which actually shows the gallery, but obviously it is not acting correctly. If you could check the error that it throws, I could try to find the problem. Thanks for the feedback! Cheers

  3. Hi, sorry for answering so late – tight timing at the moment… I will test the gallery and see what I can come up with. Please bear with me, it might take 2-3 days.

  4. Hi Cody,

    Very useful little plugin! The only thing I find rather inconvenient is that when javascript is disabled nothing shows up. Wouldn’ t it be better to show just the css + the first image? Make it degrade gracefully.

  5. Hi, thank you very much for your efforts, this gallery is very useful but it doesnt work on IE7 as on Safari, FF displays very well.

    Line: 117
    Char: 165
    Error: Could not get the display property. Invalid Argument.
    Code:0

    I’ve tried but no luck, do you think you can fix it???

    Thank you in advance.

    Ricardo

  6. How would one turn off the sliding of the description?

    In other words, I don’t want the description to move up and down, I just want it to change with the photo.

  7. OK so I kind of hacked the code to stop the animation.

    What I really need is the ability to link from the images or thumbnails to another page.

    That, I suspect is trickier…

  8. I was able to add a link to the description by adding a “longdesc” attribute to each image.

    I also wanted to change the number of thumbnails per page to 4 from 9. Everything works fine except manually cycling backwards in thumbnail mode.

    The last set of thumbnails disappears.

    http://www.window.state.tx.us/publications/MicroGallery/index.html

    And IE7 does not work for me either. The galleries just don’t show up.

    • Hello, you have two errors in your code. Maybe it would be good if you downloaded Firebug for Firefox (or inspect the element under Google Chrome). It seems to be a syntax error at first glance. Hope it helps, ML

  9. Thanks Mary Lou –

    I think we fixed those issues (colliding scripts) but I’m still having the disappearing thumbnails issue when stepping backwards, and I have an unwanted description when the gallery comes up in thumbnail mode.

    I don’t really know javascript, so any help – even a comment or two – in the code would be awesome.

  10. OK it appears that stepping backwards through thumbnails in cycle mode only works if incfactor is odd or divisible by 3.

    I think I was able to hack all the other behaviors I needed.

  11. The IE issue comes from the CSS-Property display:table-cell which the internet exploder just does not recognize. If you search&replace it in the jquery.microgallery.js with the value ‘block’ the whole thing starts working perfectly with MSIE 6 and 7. Thanks for this fantastic Plugin. I like it very much.

  12. Really helpful.
    I searched a lot for such a gallery (flickr micro gallery) and finally found this. it seems more powerful than flickr’s.
    Maybe one day I create an extension for joomla with this plugin

  13. http://www.handbagsonsales.com

    Chanel Handbags

    Gucci Handbags Gucci 2010 New Handbag

    Hermes Handbags

    Balenciaga Handbags

    Bottega Veneta Handbags

    Chloe Handbags

    Coach Handbags

    Dior Handbags

    Fendi Handbags

    Dolce & Gabbana Handbags

    Hermes Handbags

    Versace Handbags

    Prada Handbags

  14. Is it a possibility to create multiple galleries on the same page…It only work with one…

  15. In a single mode, if there is just one image in gallery, the next button becomes active. how can i fix it?
    it shouldnt be clickable.
    thank you…

  16. Very slick, but it does not work with the latest jquery. How can I make it work? Thanks.