Improved Micro Image Gallery: A jQuery Plugin

Development April 26, 2010 by cody 19 Comments

View demoDownload source

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.

View demoDownload source

Tagged with: , , ,

You might also like

Discussion19 Join the discussion

  • Marcelo
    April 27th, 2010 at 02:26

    Very nice, but does not work in IE 7.

    Thanks.

  • Petr Snobelt
    April 27th, 2010 at 09:02

    After click on bigger photo you should go back to small thumbnails

  • cody
    April 27th, 2010 at 09:38

    @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

  • Ruana
    April 30th, 2010 at 16:11

    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.

  • cody
    April 30th, 2010 at 16:22

    Hi Ruana, in mine it’s working fine. Which version of IE7 are you using?
    Thanks

  • Ruana
    May 1st, 2010 at 12:04

    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.

  • cody
    May 1st, 2010 at 12:13

    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

  • Ruana
    May 3rd, 2010 at 23:30

    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.

  • gauss
    May 7th, 2010 at 02:48

    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.

  • Ricardo
    June 17th, 2010 at 03:56

    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

  • Rio Brewster
    July 6th, 2010 at 20:46

    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.

  • Rio Brewster
    July 7th, 2010 at 00:29

    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…

  • Rio Brewster
    July 9th, 2010 at 22:29

    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.

  • Mary Lou
    July 9th, 2010 at 23:13

    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

  • Rio Brewster
    July 12th, 2010 at 15:56

    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.

  • Rio Brewster
    July 12th, 2010 at 21:50

    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.

  • AndrĂ© Runzer
    July 25th, 2010 at 14:31

    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.

  • blue
    July 31st, 2010 at 01:02

    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

  • chanel handabags on sale
    August 25th, 2010 at 04:25

    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

Follow this discussion

Join the discussion