5a739853
 patrick.he
commit
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<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>
|