<section>

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#pages/gallery">Gallery</h3>
		<!-- #section:pages/gallery -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				For slideshow <a href="#plugins/misc.colorbox" class="help-more">Colorbox plugin</a> is used.
				<br />
				For more info about gallery page see:
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>gallery.mustache</code>
			</li>

			<li>
				Thumbnails are inside <code>ul.ace-thumbnails</code>:
<pre data-language="html">
 <ul class="ace-thumbnails clearfix">
   <li>
     ....
   </li>
 </ul>
</pre>
			</li>
			
			<li>
<pre data-language="html">
<li>
 <a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
   <img src="path/to/thumb-1.jpg" alt="150x150" />
   <!-- optional tags here -->
   <!-- optional caption here -->
 </a>
 <!-- optional tags here -->
 <!-- optional caption here -->
 <!-- optional tools -->
</li>
</pre>			
			</li>
			
			<li>
				<!-- #section:pages/gallery.tags -->
				Tags are bootstrap <a href="#elements.label" class="help-more">labels</a>
				inside a <code>.tags</code> container, wrapped inside <code>.label-holder</code>:
<pre data-language="html">
<div class="tags">
  <span class="label-holder">
    <span class="label label-info">tag1</span>
  </span>
  ...
</div>
</pre>
				<!-- /section:pages/gallery.tags -->
			</li>
			
			<li>
				<!-- #section:pages/gallery.tools -->
				Tools are inside <code>.tools</code> with 4 positions:
				<ol>
					<li><code>.tools</code></li>
					<li><code>.tools.tools-bottom</code></li>
					<li><code>.tools.tools-left</code></li>
					<li><code>.tools.tools-right</code></li>
				</ol>
				You can also add <code>.in</code> class to make it visible by default:
				
<pre data-language="html">
<a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
   <img src="path/to/thumb-1.jpg" alt="150x150" />
</a>
<div class="tools tools-bottom">
   <a href="#"><i class="ace-icon fa fa-link"></i></a>
   <a href="#"><i class="ace-icon fa fa-paperclip"></i></a>
</div>
</pre>
				<!-- /section:pages/gallery.tools -->
			</li>

			<li>
				<!-- #section:pages/gallery.caption -->
				Optional caption:
<pre data-language="html">
 <div class="text">
    <div class="inner">Sample Caption on Hover</div>
 </div>
</pre>
			with optional links:
<pre data-language="html">
<img src="path/to/thumb-1.jpg" alt="150x150" />
<div class="text">  
  <div class="inner">
     <span>Some Title!</span>
     <br />
     <a data-rel="colorbox" href="path/to/image-1.jpg"><i class="ace-icon fa fa-search-plus"></i></a>
     <a href="#" title="Share"><i class="ace-icon fa fa-share"></i></a>
  </div>
</div>
</pre>
				<!-- /section:pages/gallery.caption -->
			</li>
		
		 </ul>
		</div>
		<!-- /section:pages/gallery -->
	
	</div>
</section>