Skip to content

Commit be9c396

Browse files
i-like-robotsi-like-robots
committed
Create table for documented options and improve doc styles
1 parent 013f72a commit be9c396

File tree

3 files changed

+120
-115
lines changed

3 files changed

+120
-115
lines changed

‎css/example.css

+41-15
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ html, body {
55
}
66

77
body {
8-
line-height: 1.5;
9-
font-family: Arial, sans-serif;
8+
font: normal 16px/1.5 Arial, sans-serif;
109
color: #111;
1110
background: #eee;
1211
}
@@ -22,15 +21,18 @@ h1 {
2221
letter-spacing: -.075em;
2322
}
2423

25-
h2, header > p {
24+
h2, h1 + p {
2625
margin: 0 0 .5em;
27-
font-weight: normal;
2826
font-size: 1.5em;
2927
}
3028

3129
h3, h4 {
3230
margin: 0 0 .5em;
33-
font-size: 1em;
31+
font-size: 1.25em;
32+
}
33+
34+
* + h3 {
35+
margin-top: 1em;
3436
}
3537

3638
header > h1 {
@@ -84,24 +86,46 @@ figure {
8486
margin: 0;
8587
}
8688

87-
pre, code, var, kbd {
88-
font: normal 1em/1 Consolas, "Lucida Console", Monaco, monospace;
89+
pre, code, var, tt {
90+
font-size: 15px;
91+
font-style: normal;
92+
font-family: Consolas, "Lucida Console", Monaco, monospace;
8993
}
9094

9195
pre {
9296
overflow: auto;
9397
padding: 1em .5em;
9498
border: 1px solid #333;
99+
line-height: 1.25;
95100
text-align: left;
96101
border-radius: 5px;
97102
}
98103

99-
hr {
100-
height: 1px;
101-
padding: 0;
102-
margin: 0 0 1.5em;
103-
border: 0;
104-
background: #ccc;
104+
table {
105+
border: 1px solid #ddd;
106+
border-collapse: collapse;
107+
}
108+
109+
tr > * {
110+
border-right: 1px solid #ddd;
111+
}
112+
113+
tr > :last-child {
114+
border-right: 0;
115+
}
116+
117+
th, td {
118+
padding: 5px;
119+
text-align: left;
120+
min-width: 150px;
121+
}
122+
123+
th {
124+
background: #fafafa;
125+
}
126+
127+
td {
128+
border-top: 1px solid #ddd;
105129
}
106130

107131
.container {
@@ -112,8 +136,10 @@ hr {
112136
box-shadow: 0 0 5em rgba(0, 0, 0, .1);
113137
}
114138

115-
.container * + h2 {
116-
margin-top: 1em;
139+
.container section + section {
140+
margin-top: 3em;
141+
border-top: 1px solid #ccc;
142+
padding-top: 1em;
117143
}
118144

119145
.thumbnails {

‎index.html

+78-99
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,7 @@ <h1>
4242
</header>
4343

4444
<p>
45-
EasyZoom is an elegant, highly optimised <a href="http://www.jquery.com">jQuery</a> image zoom and
46-
panning plugin based on the <a href="http://cssglobe.com/lab/easyzoom/easyzoom.html">original work</a>
47-
by <a href="http://grakalic.com/">Alen Grakalic</a>. EasyZoom supports touch-enabled devices and is
48-
easily customisable with CSS.
45+
EasyZoom is an elegant, highly optimised <a href="http://www.jquery.com">jQuery</a> image zoom and panning plugin based on the <a href="http://cssglobe.com/lab/easyzoom/easyzoom.html">original work</a> by <a href="http://grakalic.com/">Alen Grakalic</a>. EasyZoom supports touch-enabled devices and is easily customisable with CSS.
4946
</p>
5047

5148
<p style="text-align:center;">
@@ -55,32 +52,30 @@ <h1>
5552

5653
</section>
5754

58-
<hr />
59-
6055
<!-- Example -->
6156
<section id="example">
6257

63-
<h1>
58+
<h2>
6459
Examples
65-
</h1>
60+
</h2>
6661

67-
<p>
62+
<p style="text-align: center;">
6863
Use your mouse cursor or finger to zoom and pan the images below.
6964
</p>
7065

71-
<h2>
66+
<h3>
7267
Overlay
73-
</h2>
68+
</h3>
7469

7570
<div class="easyzoom easyzoom--overlay">
7671
<a href="example-images/1_zoom.jpg">
7772
<img src="example-images/1_standard.jpg" alt="" width="640" height="360" />
7873
</a>
7974
</div>
8075

81-
<h2>
76+
<h3>
8277
Adjacent
83-
</h2>
78+
</h3>
8479

8580
<!-- Placeholder for demo purposes only -->
8681
<div style="float: right; width: 310px; height: 400px; background: #EEE;"></div>
@@ -91,9 +86,9 @@ <h2>
9186
</a>
9287
</div>
9388

94-
<h2>
89+
<h3>
9590
With thumbnail images
96-
</h2>
91+
</h3>
9792

9893
<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
9994
<a href="example-images/3_zoom_1.jpg">
@@ -124,9 +119,9 @@ <h2>
124119
</li>
125120
</ul>
126121

127-
<h2>
122+
<h3>
128123
Active/Inactive toggle
129-
</h2>
124+
</h3>
130125

131126
<div class="easyzoom easyzoom--overlay easyzoom--with-toggle">
132127
<a href="example-images/3_zoom_1.jpg">
@@ -141,24 +136,19 @@ <h2>
141136

142137
</section>
143138

144-
<hr />
145-
146139
<!-- Setup -->
147140
<section id="setup">
148141

149-
<h1>
142+
<h2>
150143
Setup
151-
</h1>
144+
</h2>
152145

153-
<h2>
146+
<h3>
154147
HTML
155-
</h2>
148+
</h3>
156149

157150
<p>
158-
EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target
159-
element (<code>&lt;div class="easyzoom"&gt;</code>) only contains a link to the large image and the
160-
smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements
161-
that are positioned absolutely.
151+
EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target element (<code>&lt;div class="easyzoom"&gt;</code>) only contains a link to the large image and the smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements that are positioned absolutely.
162152
</p>
163153

164154
<figure>
@@ -169,17 +159,12 @@ <h2>
169159
<span class="nt">&lt;/div&gt;</span></pre>
170160
</figure>
171161

172-
<h2>
162+
<h3>
173163
CSS
174-
</h2>
164+
</h3>
175165

176166
<p>
177-
The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by
178-
<a href="http://www.w3.org/TR/CSS2/visudet.html#shrink-to-fit-float">floating</a> it or by displaying
179-
it as an <a href="http://www.w3.org/TR/CSS2/visudet.html#inlineblock-width">inline block</a>. Extra
180-
white space below the image (usually caused by the
181-
<a href="http://www.w3.org/TR/CSS2/visuren.html#line-box">line box</a> the image sits within) can be
182-
removed either by displaying it at block level or changing its position within the line box.
167+
The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by <a href="http://www.w3.org/TR/CSS2/visudet.html#shrink-to-fit-float">floating</a> it or by displaying it as an <a href="http://www.w3.org/TR/CSS2/visudet.html#inlineblock-width">inline block</a>. Extra white space below the image (usually caused by the <a href="http://www.w3.org/TR/CSS2/visuren.html#line-box">line box</a> the image sits within) can be removed either by displaying it at block level or changing its position within the line box.
183168
</p>
184169

185170
<p>
@@ -205,13 +190,12 @@ <h2>
205190
<span class="p">}</span></pre>
206191
</figure>
207192

208-
<h2>
193+
<h3>
209194
JavaScript
210-
</h2>
195+
</h3>
211196

212197
<p>
213-
The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via
214-
element data. EasyZoom is also AMD and CommonJS compatible.
198+
The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via element data. EasyZoom is also AMD and CommonJS compatible.
215199
</p>
216200

217201
<figure>
@@ -224,78 +208,74 @@ <h2>
224208

225209
</section>
226210

227-
<hr />
228-
229211
<!-- Options -->
230212
<section id="options">
231213

232-
<h1>
214+
<h2>
233215
Options
234-
</h1>
216+
</h2>
235217

236218
<p>
237-
Global options can be specified via the standard jQuery plugin interface or as data attributes on
238-
individual EasyZoom elements. Remember that <tt>camelCase</tt> options should be written as hyphen-separated
239-
attributes, for example the <code>preventClicks</code> option would be defined on the element with the
240-
<code>data-prevent-clicks</code> attribute.
219+
Global options can be specified via the standard jQuery plugin interface or as data attributes on individual EasyZoom elements. Remember that <tt>camelCase</tt> options should be written as hyphen-separated attributes, for example the <code>preventClicks</code> option would be defined on the element with the <code>data-prevent-clicks</code> attribute.
241220
</p>
242221

243-
<dl>
244-
<dt>
245-
<var>loadingNotice</var>
246-
</dt>
247-
<dd>
248-
The text to display within the notice box while loading the zoom image. Default: <code>"Loading image"</code>.
249-
</dd>
250-
<dt>
251-
<var>errorNotice</var>
252-
</dt>
253-
<dd>
254-
The text to display within the notice box if an error occurs loading the zoom image. Default:
255-
<code>"The image could not be loaded"</code>.
256-
</dd>
257-
<dt>
258-
<var>errorDuration</var>
259-
</dt>
260-
<dd>
261-
The time (in milliseconds) to display the error notice. Default: <code>2500</code>.
262-
</dd>
263-
<dt>
264-
<var>preventClicks</var>
265-
</dt>
266-
<dd>
267-
Prevent clicks on the zoom image link. Default: <code>true</code>.
268-
</dd>
269-
<dt>
270-
<var>onShow</var>
271-
</dt>
272-
<dd>
273-
Callback function to execute when the flyout is displayed. Default: <code>undefined</code>
274-
</dd>
275-
<dt>
276-
<var>onHide</var>
277-
</dt>
278-
<dd>
279-
Callback function to execute when the flyout is removed. Default: <code>undefined</code>
280-
</dd>
281-
<dt>
282-
<var>onMove</var>
283-
</dt>
284-
<dd>
285-
Callback function to execute when the cursor is moved while over the image. Default: <code>undefined</code>
286-
</dd>
287-
</dl>
222+
<table>
223+
<thead>
224+
<tr>
225+
<th>Option</th>
226+
<th>Default value</th>
227+
<th>Description</th>
228+
</tr>
229+
</thead>
230+
<tbody>
231+
<tr>
232+
<td><var>loadingNotice</var></td>
233+
<td><code>"Loading image"</code></td>
234+
<td>
235+
The text to display within the notice box while loading the zoom image.
236+
</td>
237+
</tr>
238+
<tr>
239+
<td><var>errorNotice</var></td>
240+
<td><code>"The image could not be loaded"</code></td>
241+
<td>The text to display within the notice box if an error occurs when loading the zoom image.</td>
242+
</tr>
243+
<tr>
244+
<td><var>errorDuration</var></td>
245+
<td><code>2500</code></td>
246+
<td>The time (in milliseconds) to display the error notice</td>
247+
</tr>
248+
<tr>
249+
<td><var>preventClicks</var></td>
250+
<td><code>true</code></td>
251+
<td>Prevent clicks on the zoom image link.</td>
252+
</tr>
253+
<tr>
254+
<td><var>onShow</var></td>
255+
<td><code>$.noop</code></td>
256+
<td>Callback function to execute when the flyout is displayed.</td>
257+
</tr>
258+
<tr>
259+
<td><var>onMove</var></td>
260+
<td><code>$.noop</code></td>
261+
<td>Callback function to execute when the cursor is moved while over the image.</td>
262+
</tr>
263+
<tr>
264+
<td><var>onHide</var></td>
265+
<td><code>$.noop</code></td>
266+
<td>Callback function to execute when the flyout is removed.</td>
267+
</tr>
268+
</tbody>
269+
</table>
288270

289271
</section>
290272

291-
<hr />
292-
293273
<!-- API -->
294274
<section id="api">
295275

296-
<h1>
276+
<h2>
297277
API
298-
</h1>
278+
</h2>
299279

300280
<dl>
301281
<dt>
@@ -323,7 +303,7 @@ <h1>
323303
<code>.swap(<var>standardSrc</var>, <var>zoomSrc</var>, <var>[srcset]</var>)</code>
324304
</dt>
325305
<dd>
326-
Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional srcsetStringOrArray argument.
306+
Easily switch the standard and zoom image sources. To display retina images via the srcset attribute, use the optional <var>srcset</var> argument.
327307
</dd>
328308
</dl>
329309

@@ -341,10 +321,9 @@ <h1>
341321
// Instantiate EasyZoom instances
342322
var $easyzoom = $('.easyzoom').easyZoom();
343323

344-
// Get an instance API
324+
// Setup thumbnails example
345325
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
346326

347-
// Setup thumbnails example
348327
$('.thumbnails').on('click', 'a', function(e) {
349328
var $this = $(this);
350329

0 commit comments

Comments
 (0)