MicroGallery

MicroGallery is one of the smallest (800 bytes) gallery plugins around. There are no fancy animations (as if one's watching pictures of products, one doesn't want to wait for them to fade in, slide down or whatever ...).

What MicroGallery does is:

• Showing thumbnails
• Letting the user click on  the thumbnails
• Showing the clicked thumbnail in a bigger size
• The 'target-element' in which the big pictures will be shown can be chosen, so you'll  be able to change the background-image of any element.

Screenshot

Demonstration
Check the demo out here.

HowTo
The HTML

<div id="microgallery-view"> 
</div> 
<div class="microgallery"> 
 <div class="microgallery-element"> 
  <a href="Images/mercury.jpg"><img alt="Planet" src="Images/mercury.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/venus.gif"><img alt="Planet" src="Images/venus.gif" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/earth.jpg"><img alt="Planet" src="Images/earth.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/mars.jpg"><img alt="Planet" src="Images/mars.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/jupiter.jpg"><img alt="Planet" src="Images/jupiter.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/saturn.jpg"><img alt="Planet" src="Images/saturn.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/uranus.jpg"><img alt="Planet" src="Images/uranus.jpg" /></a> 
 </div> 
 <div class="microgallery-element"> 
  <a href="Images/neptun.jpg"><img alt="Planet" src="Images/neptun.jpg" /></a> 
 </div> 
</div> 

The JavaScript

$('.microgallery-bg').microGallery({
    view: 'body'
});

$('.microgallery').microGallery({
    view: '#microgallery-view',
    defaultSelected: 2
});

Look at the demo for css samples :-).


Download
Source code
Packed for deployment