RealEstate Priceless housing at the lowest price

<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/slide-1.jpg"><img src="images/thumbs/thumb1.jpg" alt=""></a></li>
      <li><a class="thumb" href="images/slide-2.jpg"><img src="images/thumbs/thumb2.jpg" alt=""></a></li>
      ..........
      <li><a class="thumb" href="iimages/slide-12.jpg"><img src="images/thumbs/thumb12.jpg" alt=""></a></li>
    </ul>
  </div>
</div>

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).