Advanced gallery

<div id="galleryfic_gallery">
	<div id="gallery" class="content advanced_gallery">
		<div class="slideshow-container">
			<div id="loading" class="loader"></div>
			<div id="slideshow" class="slideshow noborder"></div>
		</div>
		<div id="caption" class="caption-container"></div>
	</div>
	<div id="thumbs" class="navigation">
		<ul class="thumbs noscript">
			<li><a class="thumb" href="images/big_pic1.jpg"><img alt="" src="images/thumb1.jpg" /></a>
				<div class="caption">
					<h2>Flawless photography</h2>
					<p class="p1">Lorem ipsum dolor sit amet, .....</p>
					<a href="#"><strong>More</strong></a>
				</div>
			</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>
   			<div class="caption">
   				(Any html can go here)
   			</div>
   		</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 your image description you will need to insert description text to the <div> with caption class.
5. In order to add a gallery item you need to duplicated an existing <li> element (like what you see above).