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