Skip to content

Commit

Permalink
(docs) Format the demo page code
Browse files Browse the repository at this point in the history
  • Loading branch information
@feimosi
feimosi committed Mar 11, 2017
1 parent a24dd4d commit 8613150
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 27 deletions.
10 changes: 7 additions & 3 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
module.exports = {
"env": {
env: {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
globals: {
baguetteBox: true,
hljs: true
},
extends: "eslint:recommended",
rules: {
"indent": [
"error",
4
Expand Down
90 changes: 66 additions & 24 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>baguetteBox.js | Demo</title>
<link rel="stylesheet" href="css/baguetteBox.css">
Expand Down Expand Up @@ -105,14 +105,30 @@ <h2>Sample gallery</h2>
<pre><code class="js">baguetteBox.run('.baguetteBoxOne');</code></pre>

<div class="baguetteBoxOne gallery">
<a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg" alt="Golden Gate Bridge"></a>
<a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg" alt="Midnight City"></a>
<a href="img/1-3.jpg"><img src="img/thumbs/1-3.jpg" alt="Image 1.3"></a>
<a href="img/1-4.jpg"><img src="img/thumbs/1-4.jpg" alt="Image 1.4"></a>
<a href="img/1-5.jpg"><img src="img/thumbs/1-5.jpg" alt="Image 1.5"></a>
<a href="img/1-6.jpg"><img src="img/thumbs/1-6.jpg" alt="Image 1.6"></a>
<a href="img/1-7.jpg"><img src="img/thumbs/1-7.jpg" alt="Image 1.7"></a>
<a href="img/1-8.jpg"><img src="img/thumbs/1-8.jpg" alt="Image 1.8"></a>
<a href="img/1-1.jpg" data-caption="Golden Gate Bridge">
<img src="img/thumbs/1-1.jpg" alt="Golden Gate Bridge">
</a>
<a href="img/1-2.jpg" title="Midnight City">
<img src="img/thumbs/1-2.jpg" alt="Midnight City">
</a>
<a href="img/1-3.jpg">
<img src="img/thumbs/1-3.jpg" alt="">
</a>
<a href="img/1-4.jpg">
<img src="img/thumbs/1-4.jpg" alt="">
</a>
<a href="img/1-5.jpg">
<img src="img/thumbs/1-5.jpg" alt="">
</a>
<a href="img/1-6.jpg">
<img src="img/thumbs/1-6.jpg" alt="">
</a>
<a href="img/1-7.jpg">
<img src="img/thumbs/1-7.jpg" alt="">
</a>
<a href="img/1-8.jpg">
<img src="img/thumbs/1-8.jpg" alt="">
</a>
</div>

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

<div class="baguetteBoxTwo gallery">
<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>
<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>
<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>
<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>
<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="">
</a>
<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="">
</a>
<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="">
</a>
<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="">
</a>
</div>

<h2>FadeIn animation</h2>
Expand All @@ -141,10 +165,18 @@ <h2>FadeIn animation</h2>
});</code></pre>

<div class="baguetteBoxThree gallery">
<a href="img/3-1.jpg"><img src="img/thumbs/3-1.jpg" alt="Image 3.1"></a>
<a href="img/3-2.jpg"><img src="img/thumbs/3-2.jpg" alt="Image 3.2"></a>
<a href="img/3-3.jpg"><img src="img/thumbs/3-3.jpg" alt="Image 3.3"></a>
<a href="img/3-4.jpg"><img src="img/thumbs/3-4.jpg" alt="Image 3.4"></a>
<a href="img/3-1.jpg">
<img src="img/thumbs/3-1.jpg" alt="">
</a>
<a href="img/3-2.jpg">
<img src="img/thumbs/3-2.jpg" alt="">
</a>
<a href="img/3-3.jpg">
<img src="img/thumbs/3-3.jpg" alt="">
</a>
<a href="img/3-4.jpg">
<img src="img/thumbs/3-4.jpg" alt="">
</a>
</div>

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

<div class="baguetteBoxFour gallery">
<a href="img/small/4-1.jpg" data-caption="Balloon trip"><img src="img/thumbs/4-1.jpg" alt="Balloon trip"></a>
<a href="img/small/4-2.jpg" data-caption="Road to nowhere"><img src="img/thumbs/4-2.jpg" alt="Road to nowhere"></a>
<a href="img/small/4-3.jpg" data-caption="Misty landscape"><img src="img/thumbs/4-3.jpg" alt="Misty landscape"></a>
<a href="img/small/4-4.jpg" data-caption="Forest"><img src="img/thumbs/4-4.jpg" alt="Forest"></a>
<a href="img/small/4-1.jpg" data-caption="Balloon trip">
<img src="img/thumbs/4-1.jpg" alt="Balloon trip">
</a>
<a href="img/small/4-2.jpg" data-caption="Road to nowhere">
<img src="img/thumbs/4-2.jpg" alt="Road to nowhere">
</a>
<a href="img/small/4-3.jpg" data-caption="Misty landscape">
<img src="img/thumbs/4-3.jpg" alt="Misty landscape">
</a>
<a href="img/small/4-4.jpg" data-caption="Forest">
<img src="img/thumbs/4-4.jpg" alt="Forest">
</a>
</div>

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

<div class="baguetteBoxFive gallery">
<a href="img/5-1.jpg"><img src="img/thumbs/5-1.jpg" alt="A caption in the alt attribute"></a>
<a href="img/5-1.jpg">
<img src="img/thumbs/5-1.jpg" alt="A caption in the alt attribute">
</a>
</div>

<h3>Usage instructions and source code can be found on
<a href="https://github.com/feimosi/baguetteBox.js">GitHub</a></h3>
</div>
<footer>
<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>
<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>
<p>Copyright &copy; 2016 <a href="https://github.com/feimosi/">feimosi</a></p>
</footer>
<script src="js/baguetteBox.js" async></script>
Expand Down

0 comments on commit 8613150

Please sign in to comment.