Simple gallery

<div class="wrapper" id="galleryfic_gallery">
		<div id="gallery" class="content">
		<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow"></div>
		</div>
		</div>
		<div id="thumbs" class="navigation">
		<ul class="thumbs noscript">
		<li><a class="thumb" href="images/big_pic1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
		<li><a class="thumb" href="images/big_pic2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>
		..........
		<li class="last"><a class="thumb" href="images/big_pic6.jpg"><img src="images/thumb6.jpg" alt="" /></a></li>
		</ul>
		</div>
		</div>
		
In order to create a gallery you will need:
  1. First we need to create HTML markup for the gallery. The elements represented here are optional. Each <div> element defines the following gallery parts:
    <div id="loading"></div>
    		<div id="slideshow"></div>
    		<div id="caption"></div>
    		<div id="thumbs">
    		...
    		</div>
    		
    #controls adds gallery navigation block;
    #loading adds a block that displays a spinner image till gallery images are being loaded;
    #slideshow adds big image block;
    #caption adds image description block;
    #thumbs thumbnail images block.
  2. Then we build HTML markup for the #thumbs block:
    <div id="thumbs">
    		<ul class="thumbs noscript">
    		<li>
    		<a class="thumb" name="name" href="path/to/slide" title="title">
    		<img src="path/to/thumbnail" alt="your image title" />
    		</a>
    		</li>
    		... (repeat for every image in the gallery)
    		</ul>
    		</div>
    		
  3. The link with .thumb class contains the path to the large image. Additionally you can add title and alt parameters.
  4. In order to add a gallery item you need to duplicated an existing <li> element (like what you see above).