jekyll-theme-prettydocs 0.0.6 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +5 -5
- data/LICENSE.txt +0 -0
- data/README.md +59 -178
- data/_includes/footer.html +6 -6
- data/_includes/home.html +122 -0
- data/_includes/promo-block.html +29 -86
- data/_layouts/home.html +36 -53
- data/_layouts/page.html +51 -5
- data/assets/.DS_Store +0 -0
- data/assets/css/.DS_Store +0 -0
- data/assets/css/styles.css +1373 -1267
- data/assets/images/.DS_Store +0 -0
- data/assets/images/demo/.DS_Store +0 -0
- data/assets/images/demo/fontawesome-icons.png +0 -0
- data/assets/images/demo/instance-promo.jpg +0 -0
- data/assets/images/demo/theme-atom.png +0 -0
- data/assets/images/demo/theme-decibel.png +0 -0
- data/assets/images/demo/theme-delta.png +0 -0
- data/assets/images/demo/theme-devstudio.png +0 -0
- data/assets/images/demo/theme-instance.png +0 -0
- data/assets/images/demo/theme-onboard.png +0 -0
- data/assets/images/demo/theme-orbit.png +0 -0
- data/assets/images/demo/theme-pillar.png +0 -0
- data/assets/images/demo/theme-sphere.png +0 -0
- data/assets/images/demo/theme-startupkit.png +0 -0
- data/assets/images/demo/theme-tempo.png +0 -0
- data/assets/images/demo/theme-trades.png +0 -0
- data/assets/images/empty.gif +0 -0
- data/assets/images/untitled folder/.DS_Store +0 -0
- data/assets/images/untitled folder/bootstrap-template-for-schools-academy.png +0 -0
- data/assets/images/untitled folder/crowdfunding-landing-page-onboard.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-portfolio-theme-for-developers.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-theme-appkit-landing.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-theme-for-developers-devaid.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-theme-for-develpers-prettydocs.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-theme-for-documentation-prettydedocs.png +0 -0
- data/assets/images/untitled folder/free-bootstrap-theme-for-startups-developers-appkit-landing.png +0 -0
- data/assets/images/untitled folder/html5-website-template-college-green.png +0 -0
- data/assets/images/untitled folder/html5-website-template-placeholder.png +0 -0
- data/assets/images/untitled folder/restaurant-landing-page-epicure.png +0 -0
- data/assets/images/untitled folder/wedding-invitation-landing-page-matrimony.png +0 -0
- data/assets/js/.DS_Store +0 -0
- data/assets/js/main.js +42 -46
- data/assets/plugins/.DS_Store +0 -0
- data/assets/plugins/bootstrap/css/bootstrap-grid.css +1912 -0
- data/assets/plugins/bootstrap/css/bootstrap-grid.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap-grid.min.css +7 -0
- data/assets/plugins/bootstrap/css/bootstrap-grid.min.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap-reboot.css +331 -0
- data/assets/plugins/bootstrap/css/bootstrap-reboot.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap-reboot.min.css +8 -0
- data/assets/plugins/bootstrap/css/bootstrap-reboot.min.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap.css +7946 -5683
- data/assets/plugins/bootstrap/css/bootstrap.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap.min.css +4 -3
- data/assets/plugins/bootstrap/css/bootstrap.min.css.map +0 -0
- data/assets/plugins/bootstrap/js/bootstrap.bundle.js +6461 -0
- data/assets/plugins/bootstrap/js/bootstrap.bundle.js.map +0 -0
- data/assets/plugins/bootstrap/js/bootstrap.bundle.min.js +7 -0
- data/assets/plugins/bootstrap/js/bootstrap.bundle.min.js.map +0 -0
- data/assets/plugins/bootstrap/js/bootstrap.js +3448 -1867
- data/assets/plugins/bootstrap/js/bootstrap.js.map +0 -0
- data/assets/plugins/bootstrap/js/bootstrap.min.js +6 -6
- data/assets/plugins/bootstrap/js/bootstrap.min.js.map +0 -0
- data/assets/plugins/jquery-3.3.1.min.js +2 -0
- data/assets/plugins/lightbox/Gruntfile.js +84 -83
- data/assets/plugins/lightbox/ISSUE_TEMPLATE.md +9 -0
- data/assets/plugins/lightbox/LICENSE +21 -0
- data/assets/plugins/lightbox/README.md +15 -10
- data/assets/plugins/lightbox/bower.json +29 -38
- data/assets/plugins/lightbox/dist/ekko-lightbox.css +2 -62
- data/assets/plugins/lightbox/dist/ekko-lightbox.js +668 -400
- data/assets/plugins/lightbox/dist/ekko-lightbox.js.map +1 -0
- data/assets/plugins/lightbox/dist/ekko-lightbox.min.js +2 -7
- data/assets/plugins/lightbox/dist/ekko-lightbox.min.js.map +1 -0
- data/assets/plugins/lightbox/ekko-lightbox.js +671 -0
- data/assets/plugins/lightbox/ekko-lightbox.less +139 -64
- data/assets/plugins/lightbox/examples/bs3.html +596 -0
- data/assets/plugins/lightbox/index.html +659 -0
- data/assets/plugins/lightbox/package.json +57 -46
- data/assets/plugins/lightbox/webpack.config.js +89 -0
- data/assets/plugins/lightbox/yarn.lock +6683 -0
- data/assets/plugins/prism/min/prism-min.js +0 -0
- data/assets/plugins/stickyfill/.editorconfig +9 -0
- data/assets/plugins/stickyfill/.gitignore +1 -0
- data/assets/plugins/stickyfill/Gruntfile.js +106 -0
- data/assets/plugins/stickyfill/LICENSE +21 -0
- data/assets/plugins/stickyfill/README.md +229 -0
- data/assets/plugins/stickyfill/dist/stickyfill.es6.js +507 -0
- data/assets/plugins/stickyfill/dist/stickyfill.js +520 -0
- data/assets/plugins/stickyfill/dist/stickyfill.min.js +7 -0
- data/assets/plugins/stickyfill/package-lock.json +2109 -0
- data/assets/plugins/stickyfill/package.json +32 -0
- data/assets/plugins/stickyfill/src/stickyfill.js +500 -0
- data/assets/plugins/stickyfill/test/index.html +941 -0
- data/assets/plugins/stickyfill/test/js/jquery-3.1.1.min.js +4 -0
- data/assets/plugins/stickyfill/types/index.d.ts +17 -0
- data/assets/plugins/stickyfill/yarn.lock +1475 -0
- data/assets/scss/.DS_Store +0 -0
- data/assets/{less/base.less → scss/_base.scss} +283 -307
- data/assets/{less/doc.less → scss/_doc.scss} +747 -747
- data/assets/{less/landing.less → scss/_landing.scss} +231 -244
- data/assets/scss/_mixins.scss +175 -0
- data/assets/scss/config.codekit3 +2243 -0
- data/assets/scss/styles.scss +45 -0
- metadata +76 -96
- data/_includes/blue-doc-wrapper.html +0 -293
- data/_includes/blue-header.html +0 -17
- data/_includes/card-charts.html +0 -10
- data/_includes/card-components.html +0 -10
- data/_includes/card-faqs.html +0 -10
- data/_includes/card-license.html +0 -10
- data/_includes/card-quick.html +0 -10
- data/_includes/card-showcase.html +0 -10
- data/_includes/cards-section.html +0 -47
- data/_includes/doc-wrapper.html +0 -170
- data/_includes/fb-root.html +0 -9
- data/_includes/green-doc-wrapper.html +0 -484
- data/_includes/green-header.html +0 -17
- data/_includes/header-home.html +0 -21
- data/_includes/header.html +0 -70
- data/_includes/icon-github.html +0 -1
- data/_includes/landing-header.html +0 -22
- data/_includes/orange-doc-wrapper.html +0 -65
- data/_includes/orange-header.html +0 -17
- data/_includes/pink-doc-wrapper.html +0 -281
- data/_includes/pink-header.html +0 -17
- data/_includes/purple-doc-wrapper.html +0 -138
- data/_includes/purple-header.html +0 -17
- data/_layouts/blue.html +0 -53
- data/_layouts/default.html +0 -53
- data/_layouts/green.html +0 -53
- data/_layouts/orange.html +0 -53
- data/_layouts/pink.html +0 -53
- data/_layouts/post.html +0 -5
- data/_layouts/purple.html +0 -53
- data/assets/images/demo/a-complete-example-of-page.png +0 -0
- data/assets/less/mixins.less +0 -185
- data/assets/less/styles.less +0 -13
- data/assets/less/theme-default.less +0 -115
- data/assets/plugins/bootstrap/css/bootstrap-theme.css +0 -587
- data/assets/plugins/bootstrap/css/bootstrap-theme.css.map +0 -0
- data/assets/plugins/bootstrap/css/bootstrap-theme.min.css +0 -6
- data/assets/plugins/bootstrap/css/bootstrap-theme.min.css.map +0 -0
- data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
- data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.svg +0 -288
- data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
- data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
- data/assets/plugins/bootstrap/fonts/glyphicons-halflings-regular.woff2 +0 -0
- data/assets/plugins/bootstrap/js/npm.js +0 -13
- data/assets/plugins/font-awesome/HELP-US-OUT.txt +0 -7
- data/assets/plugins/font-awesome/css/font-awesome.css +0 -2199
- data/assets/plugins/font-awesome/css/font-awesome.min.css +0 -4
- data/assets/plugins/font-awesome/fonts/FontAwesome.otf +0 -0
- data/assets/plugins/font-awesome/fonts/fontawesome-webfont.eot +0 -0
- data/assets/plugins/font-awesome/fonts/fontawesome-webfont.svg +0 -685
- data/assets/plugins/font-awesome/fonts/fontawesome-webfont.ttf +0 -0
- data/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff +0 -0
- data/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/assets/plugins/font-awesome/less/animated.less +0 -34
- data/assets/plugins/font-awesome/less/bordered-pulled.less +0 -25
- data/assets/plugins/font-awesome/less/core.less +0 -12
- data/assets/plugins/font-awesome/less/fixed-width.less +0 -6
- data/assets/plugins/font-awesome/less/font-awesome.less +0 -18
- data/assets/plugins/font-awesome/less/icons.less +0 -733
- data/assets/plugins/font-awesome/less/larger.less +0 -13
- data/assets/plugins/font-awesome/less/list.less +0 -19
- data/assets/plugins/font-awesome/less/mixins.less +0 -60
- data/assets/plugins/font-awesome/less/path.less +0 -15
- data/assets/plugins/font-awesome/less/rotated-flipped.less +0 -20
- data/assets/plugins/font-awesome/less/screen-reader.less +0 -5
- data/assets/plugins/font-awesome/less/stacked.less +0 -20
- data/assets/plugins/font-awesome/less/variables.less +0 -744
- data/assets/plugins/font-awesome/scss/_animated.scss +0 -34
- data/assets/plugins/font-awesome/scss/_bordered-pulled.scss +0 -25
- data/assets/plugins/font-awesome/scss/_core.scss +0 -12
- data/assets/plugins/font-awesome/scss/_fixed-width.scss +0 -6
- data/assets/plugins/font-awesome/scss/_icons.scss +0 -733
- data/assets/plugins/font-awesome/scss/_larger.scss +0 -13
- data/assets/plugins/font-awesome/scss/_list.scss +0 -19
- data/assets/plugins/font-awesome/scss/_mixins.scss +0 -60
- data/assets/plugins/font-awesome/scss/_path.scss +0 -15
- data/assets/plugins/font-awesome/scss/_rotated-flipped.scss +0 -20
- data/assets/plugins/font-awesome/scss/_screen-reader.scss +0 -5
- data/assets/plugins/font-awesome/scss/_stacked.scss +0 -20
- data/assets/plugins/font-awesome/scss/_variables.scss +0 -744
- data/assets/plugins/font-awesome/scss/font-awesome.scss +0 -18
- data/assets/plugins/jquery-1.12.3.min.js +0 -5
- data/assets/plugins/lightbox/LICENSE.txt +0 -339
- data/assets/plugins/lightbox/dist/ekko-lightbox.min.css +0 -6
- data/assets/plugins/lightbox/ekko-lightbox.coffee +0 -353
- data/assets/plugins/lightbox/examples/index.html +0 -559
- data/assets/plugins/lightbox/examples/remote/page1.html +0 -9
- data/assets/plugins/lightbox/examples/remote/page2.html +0 -9
- data/assets/plugins/lightbox/examples/remote/readme.md +0 -1
|
@@ -1,559 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Bootstrap 3 Lightbox</title>
|
|
5
|
-
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
|
|
8
|
-
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
|
|
9
|
-
<link href="../dist/ekko-lightbox.css" rel="stylesheet">
|
|
10
|
-
|
|
11
|
-
<style type="text/css">
|
|
12
|
-
/* i like padding - you can ignore this css. see the actual css / less files in the repository for styling the gallery navigation */
|
|
13
|
-
div.row > div > div.row {
|
|
14
|
-
margin-bottom: 15px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
body {
|
|
18
|
-
padding-bottom: 50px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
div.top-header {
|
|
22
|
-
margin-bottom:100px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
h3.page-header {
|
|
26
|
-
margin-top: 50px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
figure {
|
|
30
|
-
position: relative;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
figure figcaption {
|
|
34
|
-
font-size: 22px;
|
|
35
|
-
color: #fff;
|
|
36
|
-
text-decoration: none;
|
|
37
|
-
bottom: 10px;
|
|
38
|
-
right: 20px;
|
|
39
|
-
position: absolute;
|
|
40
|
-
background-color: #000;
|
|
41
|
-
}
|
|
42
|
-
code {
|
|
43
|
-
white-space: pre-wrap; /* css-3 */
|
|
44
|
-
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
45
|
-
white-space: -pre-wrap; /* Opera 4-6 */
|
|
46
|
-
white-space: -o-pre-wrap; /* Opera 7 */
|
|
47
|
-
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
48
|
-
}
|
|
49
|
-
</style>
|
|
50
|
-
</head>
|
|
51
|
-
<body>
|
|
52
|
-
<div class="container">
|
|
53
|
-
<div class="row">
|
|
54
|
-
<div class="col-md-10 col-md-offset-1">
|
|
55
|
-
|
|
56
|
-
<div class="top-header">
|
|
57
|
-
<h1 class="page-header">Lightbox for Bootstrap 3</h1>
|
|
58
|
-
<p class="lead">Utilizes Bootstraps modal plugin to implement a lightbox gallery - <a href="https://github.com/ashleydw/lightbox">GitHub</a></p>
|
|
59
|
-
<div class="text-center">
|
|
60
|
-
<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100 " height="20"></iframe>
|
|
61
|
-
<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
62
|
-
<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="160" height="20"></iframe>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<div class="top-header">
|
|
67
|
-
<h2>Usage</h2>
|
|
68
|
-
<h3>Via data attributes</h3>
|
|
69
|
-
<pre><a href="someurl" data-toggle="lightbox">Launch modal</a></pre>
|
|
70
|
-
<h3>Via Javascript</h3>
|
|
71
|
-
<pre><a href="someurl" id="mylink">Open lightbox</a><br/>$('#mylink').ekkoLightbox(options);</pre>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
<div class="top-header">
|
|
75
|
-
<h2>Implementation</h2>
|
|
76
|
-
<p>Obviously, you need the modal component that comes with Bootstrap, and jQuery. The delegate function used on this page is:</p>
|
|
77
|
-
<code style="white-space: pre-wrap">$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
|
|
78
|
-
event.preventDefault();
|
|
79
|
-
$(this).ekkoLightbox();
|
|
80
|
-
});</code>
|
|
81
|
-
<br /><br />
|
|
82
|
-
<p>If you plan on having galleries, be sure to include the LESS / CSS files.</p>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div class="top-header">
|
|
86
|
-
<h2>Options</h2>
|
|
87
|
-
<p>Options are passed down to the modal object so you can also use any of the <a href="http://getbootstrap.com/javascript/#modals-usage">original modal options</a>.</p>
|
|
88
|
-
<p>Pass the options to the calling function as an object, or set defaults using <code>$.fn.ekkoLightbox.defaults</code> (excluding modal default options, notable: title, footer, remote)</p>
|
|
89
|
-
<div class="table-responsive">
|
|
90
|
-
<table class="table table-bordered">
|
|
91
|
-
<thead>
|
|
92
|
-
<tr>
|
|
93
|
-
<th>Name</th>
|
|
94
|
-
<th>type</th>
|
|
95
|
-
<th>default</th>
|
|
96
|
-
<th>description</th>
|
|
97
|
-
<th>data-*</th>
|
|
98
|
-
</tr>
|
|
99
|
-
</thead>
|
|
100
|
-
<tbody>
|
|
101
|
-
<tr>
|
|
102
|
-
<td>remote</td>
|
|
103
|
-
<td>string</td>
|
|
104
|
-
<td></td>
|
|
105
|
-
<td>If you can't/don't want to set the href property of an element</td>
|
|
106
|
-
<td><code>data-remote="http://www...."</code></td>
|
|
107
|
-
</tr>
|
|
108
|
-
<tr>
|
|
109
|
-
<td>gallery</td>
|
|
110
|
-
<td>string</td>
|
|
111
|
-
<td></td>
|
|
112
|
-
<td>For grouping elements</td>
|
|
113
|
-
<td><code>data-gallery="galleryname"</code></td>
|
|
114
|
-
</tr>
|
|
115
|
-
<tr>
|
|
116
|
-
<td>gallery_parent_selector</td>
|
|
117
|
-
<td>string</td>
|
|
118
|
-
<td><code>document.body</code></td>
|
|
119
|
-
<td>If you have multiple galleries per page, this will restrict the gallery items to the parent that matches this selector.</td>
|
|
120
|
-
<td><code>data-parent="any valid selector"</code></td>
|
|
121
|
-
</tr>
|
|
122
|
-
<tr>
|
|
123
|
-
<td>left_arrow_class</td>
|
|
124
|
-
<td>string</td>
|
|
125
|
-
<td><code>.glyphicon .glyphicon-chevron-left</code></td>
|
|
126
|
-
<td>The css classes to give to the left arrow</td>
|
|
127
|
-
<td></td>
|
|
128
|
-
</tr>
|
|
129
|
-
<tr>
|
|
130
|
-
<td>right_arrow_class</td>
|
|
131
|
-
<td>string</td>
|
|
132
|
-
<td><code>.glyphicon .glyphicon-chevron-right</code></td>
|
|
133
|
-
<td>The css classes to give to the right arrow</td>
|
|
134
|
-
<td></td>
|
|
135
|
-
</tr>
|
|
136
|
-
<tr>
|
|
137
|
-
<td>type</td>
|
|
138
|
-
<td>string</td>
|
|
139
|
-
<td></td>
|
|
140
|
-
<td>Force the lightbox into image/YouTube mode.</td>
|
|
141
|
-
<td><code>data-type="(image|youtube|vimeo)"</code></td>
|
|
142
|
-
</tr>
|
|
143
|
-
<tr>
|
|
144
|
-
<td>width (videos only; height is calculated by ratio)</td>
|
|
145
|
-
<td>integer</td>
|
|
146
|
-
<td></td>
|
|
147
|
-
<td>Force the width</td>
|
|
148
|
-
<td><code>data-width="[0-9]+"</code></td>
|
|
149
|
-
</tr>
|
|
150
|
-
<tr>
|
|
151
|
-
<td>always_show_close</td>
|
|
152
|
-
<td>boolean</td>
|
|
153
|
-
<td><code>true</code></td>
|
|
154
|
-
<td>Always show the close button, even if no title is present</td>
|
|
155
|
-
<td></td>
|
|
156
|
-
</tr>
|
|
157
|
-
<tr>
|
|
158
|
-
<td>onNavigate</td>
|
|
159
|
-
<td>callable</td>
|
|
160
|
-
<td><code>false</code></td>
|
|
161
|
-
<td>Function call when navigate right or left. First argument is the direction</td>
|
|
162
|
-
<td></td>
|
|
163
|
-
</tr>
|
|
164
|
-
<tr>
|
|
165
|
-
<td>loadingMessage</td>
|
|
166
|
-
<td>string</td>
|
|
167
|
-
<td><code>Loading...</code></td>
|
|
168
|
-
<td>Message injected for loading</td>
|
|
169
|
-
<td></td>
|
|
170
|
-
</tr>
|
|
171
|
-
</tbody>
|
|
172
|
-
</table>
|
|
173
|
-
</div>
|
|
174
|
-
</div>
|
|
175
|
-
|
|
176
|
-
<h1 class="page-header">Themes</h1>
|
|
177
|
-
<p>Some quick themes to show how customisation is possible.</p>
|
|
178
|
-
<ul>
|
|
179
|
-
<li><a href="dark.html">Dark, full screen</a></li>
|
|
180
|
-
<li><a href="nyan.html">Nyan</a></li>
|
|
181
|
-
</ul>
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<h1 class="page-header">Examples</h1>
|
|
185
|
-
<p>Images from Instagrams <a href="http://blog.instagram.com/post/58570728864/twoi92">"The Week on Instagram | 92"</a></p>
|
|
186
|
-
<ul>
|
|
187
|
-
<li><a href="#single-image">Example #1: Single Image</a></li>
|
|
188
|
-
<li><a href="#image-gallery">Example #2: Gallery of Images</a></li>
|
|
189
|
-
<li><a href="#single-youtube">Example #3: Single YouTube & Vimeo Video. Forced width</a></li>
|
|
190
|
-
<li><a href="#youtube-gallery">Example #4: Gallery of YouTube / Vimeo Videos</a></li>
|
|
191
|
-
<li><a href="#mixed-gallery">Example #5: Mixed gallery</a></li>
|
|
192
|
-
<li><a href="#programatically-call">Example #6: Programatically call</a></li>
|
|
193
|
-
<li><a href="#data-remote">Example #7: Via <code>data-remote</code></a></li>
|
|
194
|
-
<li><a href="#different-sizes">Example #8: Gallery of different sized images</a></li>
|
|
195
|
-
<li><a href="#too-large">Example #9: Images too wide for display</a></li>
|
|
196
|
-
<li><a href="#wrappers">Example #11: Column wrappers</a></li>
|
|
197
|
-
<li><a href="#global-galleries">Example #12: Global galleries</a></li>
|
|
198
|
-
<li><a href="#check-is-image">Example #13: No-extension images / presume everything is an image</a></li>
|
|
199
|
-
<li><a href="#on-navigate">Example #14: On navigate event example</a></li>
|
|
200
|
-
<li><a href="#hidden-elements">Example #15: Hidden elements</a></li>
|
|
201
|
-
<li><a href="#remote-content">Example #16: Remote content</a></li>
|
|
202
|
-
<li><a href="#navigateTo">Example #17: navigateTo</a></li>
|
|
203
|
-
</ul>
|
|
204
|
-
|
|
205
|
-
<h3 class="page-header" id="single-image">Example #1: Single Image</h3>
|
|
206
|
-
<p>Note: uses modal plugin title option via <code>data-title</code>, and the custom footer tag using <code>data-footer</code></p>
|
|
207
|
-
<div class="row">
|
|
208
|
-
<div class="col-sm-offset-4 col-sm-3">
|
|
209
|
-
<a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text">
|
|
210
|
-
<img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
|
|
211
|
-
</a>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
|
|
216
|
-
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
|
|
217
|
-
<p>A custom selector for the parent can be used, see <a href="#wrappers">example #11</a>. Note how the final image is not in the gallery intentionally.</p>
|
|
218
|
-
<div class="row">
|
|
219
|
-
<div class="col-md-offset-2 col-md-8">
|
|
220
|
-
<div class="row">
|
|
221
|
-
<a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
|
|
222
|
-
<img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
|
|
223
|
-
</a>
|
|
224
|
-
<a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
|
|
225
|
-
<img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
|
|
226
|
-
</a>
|
|
227
|
-
<a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
|
|
228
|
-
<img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
|
|
229
|
-
</a>
|
|
230
|
-
</div>
|
|
231
|
-
<div class="row">
|
|
232
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-footer="Big ass waterfall- using footer instead of title" class="col-sm-4">
|
|
233
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
234
|
-
</a>
|
|
235
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Cool bottle" data-footer="Now fill it with whiskey" class="col-sm-4">
|
|
236
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
237
|
-
</a>
|
|
238
|
-
<a href="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-toggle="lightbox" class="col-sm-4">
|
|
239
|
-
<img src="//36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="img-responsive">
|
|
240
|
-
</a>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
</div>
|
|
244
|
-
|
|
245
|
-
<h3 class="page-header" id="single-youtube">Example #3: Single YouTube / Vimeo Video</h3>
|
|
246
|
-
<h4>YouTube</h4>
|
|
247
|
-
<p>You can use various YouTube URL formats, the regex used is: <code>/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/</code></p>
|
|
248
|
-
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home</a></p>
|
|
249
|
-
<p><a href="http://youtu.be/b0jqPvpn3sY" data-toggle="lightbox">Tame Impala - Elephant (using youtu.be link)</a></p>
|
|
250
|
-
<br />
|
|
251
|
-
<h4>Vimeo</h4>
|
|
252
|
-
<p>You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>
|
|
253
|
-
<p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p>
|
|
254
|
-
<p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>
|
|
255
|
-
<br />
|
|
256
|
-
<h4>Instagram</h4>
|
|
257
|
-
<p></p>
|
|
258
|
-
<p><a href="http://instagram.com/p/pZfG1fPfuX/" data-toggle="lightbox" data-title="Plug for our new service">GOtags.co.uk</a></p>
|
|
259
|
-
<p>This also works with photos: <a href="https://instagram.com/p/0wbypvPfmQ/" data-toggle="lightbox">GOtags.co.uk</a></p>
|
|
260
|
-
<br />
|
|
261
|
-
<h4>Forcing width</h4>
|
|
262
|
-
<p>Set the width of the video</p>
|
|
263
|
-
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home (standard)</a></p>
|
|
264
|
-
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="640">Ghostpoet - Cash and Carry Me Home (640 x 360)</a></p>
|
|
265
|
-
<p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="1280">Ghostpoet - Cash and Carry Me Home (1280 x 780)</a></p>
|
|
266
|
-
|
|
267
|
-
<h3 class="page-header" id="youtube-gallery">Example #4: Gallery of YouTube Videos</h3>
|
|
268
|
-
<div class="row">
|
|
269
|
-
<div class="col-md-offset-1 col-md-10">
|
|
270
|
-
<div class="row">
|
|
271
|
-
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
|
|
272
|
-
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
|
|
273
|
-
</a>
|
|
274
|
-
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
|
|
275
|
-
<img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
|
|
276
|
-
</a>
|
|
277
|
-
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
|
|
278
|
-
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
|
|
279
|
-
</a>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
|
|
284
|
-
<h3 class="page-header" id="mixed-gallery">Example #5: Mixed gallery</h3>
|
|
285
|
-
<div class="row">
|
|
286
|
-
<div class="col-md-offset-1 col-md-10">
|
|
287
|
-
<div class="row">
|
|
288
|
-
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
|
|
289
|
-
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
|
|
290
|
-
</a>
|
|
291
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
|
|
292
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
293
|
-
</a>
|
|
294
|
-
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
|
|
295
|
-
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
|
|
296
|
-
</a>
|
|
297
|
-
</div>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
|
|
301
|
-
<h3 class="page-header" id="programatically-call">Example #6: Programatically call</h3>
|
|
302
|
-
<p>These two examples are opened via the JavaScript at the bottom of the source.</p>
|
|
303
|
-
<div class="row">
|
|
304
|
-
<div class="col-md-offset-1 col-md-10">
|
|
305
|
-
<div class="row">
|
|
306
|
-
<a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" id="open-image" class="col-sm-4">
|
|
307
|
-
<img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
|
|
308
|
-
</a>
|
|
309
|
-
<a href="http://youtu.be/iQ4D273C7Ac" id="open-youtube" class="col-sm-4">
|
|
310
|
-
<img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
|
|
311
|
-
</a>
|
|
312
|
-
</div>
|
|
313
|
-
</div>
|
|
314
|
-
</div>
|
|
315
|
-
|
|
316
|
-
<h3 class="page-header" id="data-remote">Example #7: Via <code>data-remote</code></h3>
|
|
317
|
-
<div class="row">
|
|
318
|
-
<div class="col-md-offset-1 col-md-10">
|
|
319
|
-
<div class="row">
|
|
320
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive col-sm-4">
|
|
321
|
-
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" class="img-responsive col-sm-4">
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
</div>
|
|
325
|
-
|
|
326
|
-
<h3 class="page-header" id="different-sizes">Example #8: Gallery of different sized images</h3>
|
|
327
|
-
<div class="row">
|
|
328
|
-
<div class="col-md-offset-1 col-md-10">
|
|
329
|
-
<div class="row">
|
|
330
|
-
<a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
|
|
331
|
-
<img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s128/tilt%20shift%20baseball.jpg" class="img-responsive">
|
|
332
|
-
</a>
|
|
333
|
-
<a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
|
|
334
|
-
<img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s128/IMG_1193%20-%20original.jpg" class="img-responsive">
|
|
335
|
-
</a>
|
|
336
|
-
<a href="https://lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s912/P1010046%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
|
|
337
|
-
<img src="//lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s128/P1010046%20-%20original.jpg" class="img-responsive">
|
|
338
|
-
</a>
|
|
339
|
-
<a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
|
|
340
|
-
<img src="//lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s128/IMG_0736%20-%20original.jpg" class="img-responsive">
|
|
341
|
-
</a>
|
|
342
|
-
</div>
|
|
343
|
-
</div>
|
|
344
|
-
</div>
|
|
345
|
-
|
|
346
|
-
<h3 class="page-header" id="too-large">Example #9: Images too wide for display</h3>
|
|
347
|
-
<p>All examples on this page are this example. Too high images don't count, scrolling works fine with the original modal.</p>
|
|
348
|
-
|
|
349
|
-
<h3 class="page-header" id="semantic">Example #10: Semantic code</h3>
|
|
350
|
-
<p>So you want to use <code><figure></code></p>
|
|
351
|
-
<div class="row">
|
|
352
|
-
<a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="col-sm-3" data-toggle="lightbox">
|
|
353
|
-
<figure>
|
|
354
|
-
<img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
|
|
355
|
-
<figcaption>@gregfoster</figcaption>
|
|
356
|
-
</figure>
|
|
357
|
-
</a>
|
|
358
|
-
</div>
|
|
359
|
-
|
|
360
|
-
<h3 class="page-header" id="wrappers">Example #11: Column wrappers</h3>
|
|
361
|
-
<p>This shows that the images do not need to be columns as per the other examples. Use <code>data-parent</code> on the gallery item, or set it via the options.</p>
|
|
362
|
-
<div class="row wrapper-parent">
|
|
363
|
-
<div class="col-sm-3">
|
|
364
|
-
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
|
|
365
|
-
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
|
|
366
|
-
</a>
|
|
367
|
-
</div>
|
|
368
|
-
<div class="col-sm-3">
|
|
369
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
|
|
370
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
371
|
-
</a>
|
|
372
|
-
</div>
|
|
373
|
-
<div class="col-sm-3">
|
|
374
|
-
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
|
|
375
|
-
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
|
|
376
|
-
</a>
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
|
|
380
|
-
<h3 class="page-header" id="global-galleries">Example #12: Global galleries</h3>
|
|
381
|
-
<p>If you're gallery images have different parents you may wish to have all images with the same gallery tag to open regardless of their parent. To do this, set <code>data-parent</code> to the highest element you know of - on this page it is the <code>div.container</code>.</p>
|
|
382
|
-
<p>You can also leave the <code>data-parent</code> attribute empty, and it will default to <code>document.body</code>. This example uses a combination of the two.</p>
|
|
383
|
-
<div class="row">
|
|
384
|
-
<div class="col-sm-4">
|
|
385
|
-
<a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox">
|
|
386
|
-
<figure>
|
|
387
|
-
<img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
|
|
388
|
-
<figcaption>@gregfoster</figcaption>
|
|
389
|
-
</figure>
|
|
390
|
-
</a>
|
|
391
|
-
</div>
|
|
392
|
-
<div class="col-sm-4">
|
|
393
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent="">
|
|
394
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
395
|
-
</a>
|
|
396
|
-
</div>
|
|
397
|
-
<div class="col-sm-4">
|
|
398
|
-
<a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent=".container">
|
|
399
|
-
<img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" class="img-responsive">
|
|
400
|
-
</a>
|
|
401
|
-
</div>
|
|
402
|
-
</div>
|
|
403
|
-
<div class="row">
|
|
404
|
-
<div class="col-sm-4">
|
|
405
|
-
</div>
|
|
406
|
-
<div class="col-sm-4">
|
|
407
|
-
<a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent=".container">
|
|
408
|
-
<img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" class="img-responsive">
|
|
409
|
-
</a>
|
|
410
|
-
</div>
|
|
411
|
-
<div class="col-sm-4">
|
|
412
|
-
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="global-gallery" data-parent="">
|
|
413
|
-
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
|
|
414
|
-
</a>
|
|
415
|
-
</div>
|
|
416
|
-
</div>
|
|
417
|
-
|
|
418
|
-
<h3 class="page-header" id="check-is-image">Example #13: No-extension images / presume everything is an image</h3>
|
|
419
|
-
<p>If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what <code>data-type</code> it is.</p>
|
|
420
|
-
<p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-title="Force image display" data-footer="The remote of this modal has no extension: http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox" data-type="image">Click here for an image, but with no extension.</a></p>
|
|
421
|
-
<p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox">This link is missing the type attribute, and will not work.</a></p>
|
|
422
|
-
<p><a href="http://www.youtube.com/watch?v=b0jqPvpn3sY" data-toggle="lightbox" data-type="image">This link is linking to a YouTube video, but forcing an image.</a></p>
|
|
423
|
-
|
|
424
|
-
<h3 class="page-header" id="on-navigate">Example #14: On navigate event example</h3>
|
|
425
|
-
<p>The argument given is the direction of navigation. Open your developer console and use any gallery example.</p>
|
|
426
|
-
|
|
427
|
-
<h3 class="page-header" id="hidden-elements">Example #15: Hidden elements</h3>
|
|
428
|
-
<p>Facebook style, only show a few images but have a large gallery</p>
|
|
429
|
-
<div class="row">
|
|
430
|
-
<div class="col-md-offset-2 col-md-8">
|
|
431
|
-
<div class="row">
|
|
432
|
-
<a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="People walking down stairs" class="col-sm-4">
|
|
433
|
-
<img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
|
|
434
|
-
</a>
|
|
435
|
-
<a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Man getting wet" class="col-sm-4">
|
|
436
|
-
<img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
|
|
437
|
-
</a>
|
|
438
|
-
<a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Someone lost their dress" class="col-sm-4">
|
|
439
|
-
<img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
|
|
440
|
-
</a>
|
|
441
|
-
<!-- elements not showing, use data-remote -->
|
|
442
|
-
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 1"></div>
|
|
443
|
-
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
|
|
444
|
-
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 3"></div>
|
|
445
|
-
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 4"></div>
|
|
446
|
-
<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-title="Hidden item 5"></div>
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
</div>
|
|
450
|
-
|
|
451
|
-
<h3 class="page-header" id="remote-content">Example #16: Remote content</h3>
|
|
452
|
-
<p>The Bootstrap modal originally allowed for remote loading, but this is to be removed in v4; this functionality demonstrates the work around.</p>
|
|
453
|
-
<p>Given a URL, that is not an image or video (including unforced types [see example 13]), load the content using jQuery load(). An image and video is given below as proof gallery.</p>
|
|
454
|
-
<div class="row">
|
|
455
|
-
<div class="col-md-offset-1 col-md-10">
|
|
456
|
-
<div class="row">
|
|
457
|
-
<p class="col-sm-3"><a href="./remote/page1.html" data-title="Page 1" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 1</a></p>
|
|
458
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-parent="" data-toggle="lightbox" data-gallery="remoteload" class="col-sm-3">
|
|
459
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
460
|
-
</a>
|
|
461
|
-
<p class="col-sm-3"><a href="./remote/page2.html" data-title="Page 2" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 2</a></p>
|
|
462
|
-
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
|
|
463
|
-
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
|
|
464
|
-
</a>
|
|
465
|
-
</div>
|
|
466
|
-
<div class="row">
|
|
467
|
-
<p class="col-sm-3"><a href="http://news.bbc.co.uk" data-title="BBC News - not responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up BBC news</a></p>
|
|
468
|
-
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
|
|
469
|
-
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
|
|
470
|
-
</a>
|
|
471
|
-
<p class="col-sm-3"><a href="http://getbootstrap.com" data-title="Bootstrap - Responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up Bootstrap</a></p>
|
|
472
|
-
<a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
|
|
473
|
-
<img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
|
|
474
|
-
</a>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
477
|
-
</div>
|
|
478
|
-
|
|
479
|
-
<h3 class="page-header" id="navigateTo">Example #17: navigateTo</h3>
|
|
480
|
-
<p>Must be setup programatically to run the setup (view the source of this page)</p>
|
|
481
|
-
<div class="row">
|
|
482
|
-
<div class="col-md-offset-2 col-md-8">
|
|
483
|
-
<div class="row">
|
|
484
|
-
<a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" data-footer="Click <a href='#'>here</a> to jump to image 3" class="col-sm-4">
|
|
485
|
-
<img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
|
|
486
|
-
</a>
|
|
487
|
-
<a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4">
|
|
488
|
-
<img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
|
|
489
|
-
</a>
|
|
490
|
-
<a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4">
|
|
491
|
-
<img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
|
|
492
|
-
</a>
|
|
493
|
-
</div>
|
|
494
|
-
</div>
|
|
495
|
-
</div>
|
|
496
|
-
|
|
497
|
-
</div>
|
|
498
|
-
</div>
|
|
499
|
-
</div>
|
|
500
|
-
|
|
501
|
-
<script src="//code.jquery.com/jquery.js"></script>
|
|
502
|
-
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
503
|
-
<script src="../dist/ekko-lightbox.js"></script>
|
|
504
|
-
|
|
505
|
-
<script type="text/javascript">
|
|
506
|
-
$(document).ready(function ($) {
|
|
507
|
-
// delegate calls to data-toggle="lightbox"
|
|
508
|
-
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
|
|
509
|
-
event.preventDefault();
|
|
510
|
-
return $(this).ekkoLightbox({
|
|
511
|
-
onShown: function() {
|
|
512
|
-
if (window.console) {
|
|
513
|
-
return console.log('Checking our the events huh?');
|
|
514
|
-
}
|
|
515
|
-
},
|
|
516
|
-
onNavigate: function(direction, itemIndex) {
|
|
517
|
-
if (window.console) {
|
|
518
|
-
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
});
|
|
522
|
-
});
|
|
523
|
-
|
|
524
|
-
//Programatically call
|
|
525
|
-
$('#open-image').click(function (e) {
|
|
526
|
-
e.preventDefault();
|
|
527
|
-
$(this).ekkoLightbox();
|
|
528
|
-
});
|
|
529
|
-
$('#open-youtube').click(function (e) {
|
|
530
|
-
e.preventDefault();
|
|
531
|
-
$(this).ekkoLightbox();
|
|
532
|
-
});
|
|
533
|
-
|
|
534
|
-
// navigateTo
|
|
535
|
-
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
|
|
536
|
-
event.preventDefault();
|
|
537
|
-
|
|
538
|
-
var lb;
|
|
539
|
-
return $(this).ekkoLightbox({
|
|
540
|
-
onShown: function() {
|
|
541
|
-
|
|
542
|
-
lb = this;
|
|
543
|
-
|
|
544
|
-
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
|
|
545
|
-
|
|
546
|
-
e.preventDefault();
|
|
547
|
-
lb.navigateTo(2);
|
|
548
|
-
|
|
549
|
-
});
|
|
550
|
-
|
|
551
|
-
}
|
|
552
|
-
});
|
|
553
|
-
});
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
});
|
|
557
|
-
</script>
|
|
558
|
-
</body>
|
|
559
|
-
</html>
|