Skip to content

Commit 8613150

Browse files
feimosifeimosi
committed
(docs) Format the demo page code
1 parent a24dd4d commit 8613150

2 files changed

Lines changed: 73 additions & 27 deletions

File tree

‎.eslintrc.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
module.exports = {
2-
"env": {
2+
env: {
33
"browser": true
44
},
5-
"extends": "eslint:recommended",
6-
"rules": {
5+
globals: {
6+
baguetteBox: true,
7+
hljs: true
8+
},
9+
extends: "eslint:recommended",
10+
rules: {
711
"indent": [
812
"error",
913
4

‎demo/index.html‎

Lines changed: 66 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<title>baguetteBox.js | Demo</title>
88
<link rel="stylesheet" href="css/baguetteBox.css">
@@ -105,14 +105,30 @@ <h2>Sample gallery</h2>
105105
<pre><code class="js">baguetteBox.run('.baguetteBoxOne');</code></pre>
106106

107107
<div class="baguetteBoxOne gallery">
108-
<a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg" alt="Golden Gate Bridge"></a>
109-
<a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg" alt="Midnight City"></a>
110-
<a href="img/1-3.jpg"><img src="img/thumbs/1-3.jpg" alt="Image 1.3"></a>
111-
<a href="img/1-4.jpg"><img src="img/thumbs/1-4.jpg" alt="Image 1.4"></a>
112-
<a href="img/1-5.jpg"><img src="img/thumbs/1-5.jpg" alt="Image 1.5"></a>
113-
<a href="img/1-6.jpg"><img src="img/thumbs/1-6.jpg" alt="Image 1.6"></a>
114-
<a href="img/1-7.jpg"><img src="img/thumbs/1-7.jpg" alt="Image 1.7"></a>
115-
<a href="img/1-8.jpg"><img src="img/thumbs/1-8.jpg" alt="Image 1.8"></a>
108+
<a href="img/1-1.jpg" data-caption="Golden Gate Bridge">
109+
<img src="img/thumbs/1-1.jpg" alt="Golden Gate Bridge">
110+
</a>
111+
<a href="img/1-2.jpg" title="Midnight City">
112+
<img src="img/thumbs/1-2.jpg" alt="Midnight City">
113+
</a>
114+
<a href="img/1-3.jpg">
115+
<img src="img/thumbs/1-3.jpg" alt="">
116+
</a>
117+
<a href="img/1-4.jpg">
118+
<img src="img/thumbs/1-4.jpg" alt="">
119+
</a>
120+
<a href="img/1-5.jpg">
121+
<img src="img/thumbs/1-5.jpg" alt="">
122+
</a>
123+
<a href="img/1-6.jpg">
124+
<img src="img/thumbs/1-6.jpg" alt="">
125+
</a>
126+
<a href="img/1-7.jpg">
127+
<img src="img/thumbs/1-7.jpg" alt="">
128+
</a>
129+
<a href="img/1-8.jpg">
130+
<img src="img/thumbs/1-8.jpg" alt="">
131+
</a>
116132
</div>
117133

118134
<h2>Responsive images</h2>
@@ -127,10 +143,18 @@ <h2>Responsive images</h2>
127143
&lt;/a&gt;</code></pre>
128144

129145
<div class="baguetteBoxTwo gallery">
130-
<a href="img/2-1.jpg" data-at-450="img/thumbs/2-1.jpg" data-at-800="img/small/2-1.jpg" data-at-1366="img/medium/2-1.jpg" data-at-1920="img/big/2-1.jpg"><img src="img/thumbs/2-1.jpg" alt="Image 2.1"></a>
131-
<a href="img/2-2.jpg" data-at-450="img/thumbs/2-2.jpg" data-at-800="img/small/2-2.jpg" data-at-1366="img/medium/2-2.jpg" data-at-1920="img/big/2-2.jpg"><img src="img/thumbs/2-2.jpg" alt="Image 2.2"></a>
132-
<a href="img/2-3.jpg" data-at-450="img/thumbs/2-3.jpg" data-at-800="img/small/2-3.jpg" data-at-1366="img/medium/2-3.jpg" data-at-1920="img/big/2-3.jpg"><img src="img/thumbs/2-3.jpg" alt="Image 2.3"></a>
133-
<a href="img/2-4.jpg" data-at-450="img/thumbs/2-4.jpg" data-at-800="img/small/2-4.jpg" data-at-1366="img/medium/2-4.jpg" data-at-1920="img/big/2-4.jpg"><img src="img/thumbs/2-4.jpg" alt="Image 2.4"></a>
146+
<a href="img/2-1.jpg" data-at-450="img/thumbs/2-1.jpg" data-at-800="img/small/2-1.jpg" data-at-1366="img/medium/2-1.jpg" data-at-1920="img/big/2-1.jpg">
147+
<img src="img/thumbs/2-1.jpg" alt="">
148+
</a>
149+
<a href="img/2-2.jpg" data-at-450="img/thumbs/2-2.jpg" data-at-800="img/small/2-2.jpg" data-at-1366="img/medium/2-2.jpg" data-at-1920="img/big/2-2.jpg">
150+
<img src="img/thumbs/2-2.jpg" alt="">
151+
</a>
152+
<a href="img/2-3.jpg" data-at-450="img/thumbs/2-3.jpg" data-at-800="img/small/2-3.jpg" data-at-1366="img/medium/2-3.jpg" data-at-1920="img/big/2-3.jpg">
153+
<img src="img/thumbs/2-3.jpg" alt="">
154+
</a>
155+
<a href="img/2-4.jpg" data-at-450="img/thumbs/2-4.jpg" data-at-800="img/small/2-4.jpg" data-at-1366="img/medium/2-4.jpg" data-at-1920="img/big/2-4.jpg">
156+
<img src="img/thumbs/2-4.jpg" alt="">
157+
</a>
134158
</div>
135159

136160
<h2>FadeIn animation</h2>
@@ -141,10 +165,18 @@ <h2>FadeIn animation</h2>
141165
});</code></pre>
142166

143167
<div class="baguetteBoxThree gallery">
144-
<a href="img/3-1.jpg"><img src="img/thumbs/3-1.jpg" alt="Image 3.1"></a>
145-
<a href="img/3-2.jpg"><img src="img/thumbs/3-2.jpg" alt="Image 3.2"></a>
146-
<a href="img/3-3.jpg"><img src="img/thumbs/3-3.jpg" alt="Image 3.3"></a>
147-
<a href="img/3-4.jpg"><img src="img/thumbs/3-4.jpg" alt="Image 3.4"></a>
168+
<a href="img/3-1.jpg">
169+
<img src="img/thumbs/3-1.jpg" alt="">
170+
</a>
171+
<a href="img/3-2.jpg">
172+
<img src="img/thumbs/3-2.jpg" alt="">
173+
</a>
174+
<a href="img/3-3.jpg">
175+
<img src="img/thumbs/3-3.jpg" alt="">
176+
</a>
177+
<a href="img/3-4.jpg">
178+
<img src="img/thumbs/3-4.jpg" alt="">
179+
</a>
148180
</div>
149181

150182
<h2>Small images, buttons disabled (use arrows or swipe gesture)</h2>
@@ -154,10 +186,18 @@ <h2>Small images, buttons disabled (use arrows or swipe gesture)</h2>
154186
});</code></pre>
155187

156188
<div class="baguetteBoxFour gallery">
157-
<a href="img/small/4-1.jpg" data-caption="Balloon trip"><img src="img/thumbs/4-1.jpg" alt="Balloon trip"></a>
158-
<a href="img/small/4-2.jpg" data-caption="Road to nowhere"><img src="img/thumbs/4-2.jpg" alt="Road to nowhere"></a>
159-
<a href="img/small/4-3.jpg" data-caption="Misty landscape"><img src="img/thumbs/4-3.jpg" alt="Misty landscape"></a>
160-
<a href="img/small/4-4.jpg" data-caption="Forest"><img src="img/thumbs/4-4.jpg" alt="Forest"></a>
189+
<a href="img/small/4-1.jpg" data-caption="Balloon trip">
190+
<img src="img/thumbs/4-1.jpg" alt="Balloon trip">
191+
</a>
192+
<a href="img/small/4-2.jpg" data-caption="Road to nowhere">
193+
<img src="img/thumbs/4-2.jpg" alt="Road to nowhere">
194+
</a>
195+
<a href="img/small/4-3.jpg" data-caption="Misty landscape">
196+
<img src="img/thumbs/4-3.jpg" alt="Misty landscape">
197+
</a>
198+
<a href="img/small/4-4.jpg" data-caption="Forest">
199+
<img src="img/thumbs/4-4.jpg" alt="Forest">
200+
</a>
161201
</div>
162202

163203
<h2>Single image (buttons hidden by default, custom caption function)</h2>
@@ -169,14 +209,16 @@ <h2>Single image (buttons hidden by default, custom caption function)</h2>
169209
});</code></pre>
170210

171211
<div class="baguetteBoxFive gallery">
172-
<a href="img/5-1.jpg"><img src="img/thumbs/5-1.jpg" alt="A caption in the alt attribute"></a>
212+
<a href="img/5-1.jpg">
213+
<img src="img/thumbs/5-1.jpg" alt="A caption in the alt attribute">
214+
</a>
173215
</div>
174216

175217
<h3>Usage instructions and source code can be found on
176218
<a href="https://github.com/feimosi/baguetteBox.js">GitHub</a></h3>
177219
</div>
178220
<footer>
179-
<p>Images have been downloaded from: <a href="http://unsplash.com/">unsplash.com</a> and <a href="http://www.gratisography.com/">gratisography.com</a></p>
221+
<p>Images have been downloaded from: <a href="https://unsplash.com/">unsplash.com</a> and <a href="http://www.gratisography.com/">gratisography.com</a></p>
180222
<p>Copyright &copy; 2016 <a href="https://github.com/feimosi/">feimosi</a></p>
181223
</footer>
182224
<script src="js/baguetteBox.js" async></script>

0 commit comments

Comments
 (0)