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 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>
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">
    #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">
    		<a class="thumb" name="name" href="path/to/slide" title="title">
    		<img src="path/to/thumbnail" alt="your image title" />
    		... (repeat for every image in the gallery)
  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).