rdrew
/
olivessdu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Olivero clone for SDU, Island Archives
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 Commits
1 Branch
0 Tags
6.5 MiB
 
 
 
 
 
Tree: b107124ce7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b107124ce7'
${ noResults }
olivessdu/junk_drawer/slick-lightbox/demo/index.html

235 lines
16 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slick-lightbox by mreq</title>
<link href="../gh-pages/stylesheets/bootstrap.css" rel="stylesheet">
<link href="../gh-pages/stylesheets/bootstrap-theme.css" rel="stylesheet">
<link href="../gh-pages/stylesheets/github-highlight.css" rel="stylesheet">
<link href="../gh-pages/bower_components/slick-carousel/slick/slick.css" rel="stylesheet">
<link href="../gh-pages/bower_components/slick-carousel/slick/slick-theme.css" rel="stylesheet">
<link href="../dist/slick-lightbox.css" rel="stylesheet">
<style>
.thumbnail img { width: 100%; display: block; }
h2 { margin-top: 30px; }
.container { max-width: 750px; }
</style>
<!--if lt IE 9
script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../gh-pages/javascripts/bootstrap.min.js"></script>
<script src="../gh-pages/bower_components/slick-carousel/slick/slick.js"></script>
<script src="../dist/slick-lightbox.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="/slick-lightbox/demo/" class="navbar-brand">Slick lightbox demo</a>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="../">Slick lightbox</a></li>
<li><a href="../docs/">Docs</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#default">Default</a></li>
<li><a href="#captions">Captions</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#slick">Slick</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Demo page</h1>
<p>This page contains various setups of slick lightbox.</p>
<h2 id="default">Default</h2>
<div class="row" id="default-demo">
<div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>
<script type="text/javascript">
$('#default-demo').slickLightbox();
</script>
<pre><code class="lang-html">&lt;div class=&quot;row&quot; id=&quot;default-demo&quot;&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1000/600&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/600&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1010/606&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/606&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1060/636&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/636&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#039;#default-demo&#039;).slickLightbox();
&lt;/script&gt;</code></pre>
<h2 id="captions">Captions and history API</h2>
<p>You can close the lightbox by navigating &quot;back&quot; in the browser.</p>
<div class="row" id="captions-demo">
<div class="col-xs-4"><a href="http://placekitten.com/1000/700" data-caption="Lorem ipsum 1000/700" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/700" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1010/706" data-caption="Lorem ipsum 1010/706" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/706" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1060/736" data-caption="Lorem ipsum 1060/736" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/736" alt=""></a></div>
</div>
<script type="text/javascript">
$('#captions-demo').slickLightbox({
caption: 'caption',
useHistoryApi: true
});
</script>
<pre><code class="lang-html">&lt;div class=&quot;row&quot; id=&quot;captions-demo&quot;&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1000/700&quot; data-caption=&quot;Lorem ipsum 1000/700&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/700&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1010/706&quot; data-caption=&quot;Lorem ipsum 1010/706&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/706&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1060/736&quot; data-caption=&quot;Lorem ipsum 1060/736&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/736&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#039;#captions-demo&#039;).slickLightbox({
caption: &#039;caption&#039;
useHistoryApi: &#039;true&#039;
});
&lt;/script&gt;</code></pre>
<h2 id="images">Array of images</h2>
<div class="row" id="images-demo">
<div class="col-xs-12" style="text-align: center; margin-bottom: 20px;"><a class="btn btn-primary" href="#">Open lightbox</a></div>
</div>
<script type="text/javascript">
$('#images-demo').slickLightbox({
images: ['http://placekitten.com/1000/600', 'http://placekitten.com/1010/606', 'http://placekitten.com/1060/636']
});
</script>
<pre><code class="lang-html">&lt;div class=&quot;row&quot; id=&quot;images-demo&quot;&gt;
&lt;div class=&quot;col-xs-12&quot; style=&quot;text-align: center; margin-bottom: 20px;&quot;&gt;&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot;&gt;Open lightbox&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#039;#images-demo&#039;).slickLightbox({
images: [&#039;http://placekitten.com/1000/600&#039;, &#039;http://placekitten.com/1010/606&#039;, &#039;http://placekitten.com/1060/636&#039;]
});
&lt;/script&gt;</code></pre>
<h2 id="slick">Existing slick</h2>
<div id="slick-demo">
<div class="item"><img src="http://placekitten.com/1000/600" alt="" width="480" height="300"></div>
<div class="item"><img src="http://placekitten.com/1010/606" alt="" width="480" height="300"></div>
<div class="item"><img src="http://placekitten.com/1060/636" alt="" width="480" height="300"></div>
</div>
<script type="text/javascript">
$('#slick-demo').slick();
$('#slick-demo').slickLightbox({
src: 'src',
itemSelector: '.item img'
});
</script>
<pre><code class="lang-html">&lt;div id=&quot;slick-demo&quot;&gt;
&lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/600&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;300&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/606&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;300&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/636&quot; alt=&quot;&quot; width=&quot;480&quot; height=&quot;300&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#039;#slick-demo&#039;).slick();
$(&#039;#slick-demo&#039;).slickLightbox({
src: &#039;src&#039;,
itemSelector: &#039;.item img&#039;
});
&lt;/script&gt;</code></pre>
<h2 id="custom-layout">Custom layout</h2>
<div id="custom-layout-demo" class="row">
<div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>
<script type="text/javascript">
$('#custom-layout-demo').slickLightbox({
layouts: {
closeButton: '<span style="position: absolute; top: 10px; right: 10px; color: red;">aww yeah</span>'
}
});
</script>
<pre><code class="lang-html">&lt;div id=&quot;custom-layout-demo&quot; class=&quot;row&quot;&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1000/600&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/600&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1010/606&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/606&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1060/636&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/636&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$('#custom-layout-demo').slickLightbox({
layouts: {
closeButton: '&lt;span style=&quot;position: absolute; top: 10px; right: 10px; color: red;&quot;&gt;aww yeah&lt;/span&gt;'
}
});
&lt;/script&gt;</code></pre>
<h2 id="prevent-opening">Prevent opening</h2>
<div id="prevent-opening-demo" class="row">
<div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail do-not-open" style="opacity: 0.5; cursor: not-allowed;"><img src="http://placekitten.com/1010/606" alt=""></a></div>
<div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>
<script type="text/javascript">
$('#prevent-opening-demo').slickLightbox({
shouldOpen: function(slickLightbox, $clickedElement){
if ($clickedElement.hasClass('do-not-open')) {
alert('Will not open on .do-not-open!');
return false;
} else {
return true;
}
}
});
</script>
<pre><code class="lang-html">&lt;div id=&quot;prevent-opening-demo&quot; class=&quot;row&quot;&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1000/600&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/600&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1010/606&quot; target=&quot;_blank&quot; class=&quot;thumbnail do-not-open&quot; style=&quot;opacity: 0.5; cursor: not-allowed;&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/606&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-4&quot;&gt;&lt;a href=&quot;http://placekitten.com/1060/636&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/636&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$('#prevent-opening-demo').slickLightbox({
shouldOpen: function(slickLightbox, $clickedElement){
if ($clickedElement.hasClass('do-not-open')) {
alert('Will not open on .do-not-open!');
return false;
} else {
return true;
}
}
});
&lt;/script&gt;</code></pre>
<h2 id="lazy">Lazyloading</h2>
<div id="lazy-demo" class="row">
<div class="col-xs-2"><a href="http://placekitten.com/1000/600?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
<div class="col-xs-2"><a href="http://placekitten.com/1010/606?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
<div class="col-xs-2"><a href="http://placekitten.com/1060/636?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
<div class="col-xs-2"><a href="http://placekitten.com/1080/600?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1080/600" alt=""></a></div>
<div class="col-xs-2"><a href="http://placekitten.com/1100/606?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1100/606" alt=""></a></div>
<div class="col-xs-2"><a href="http://placekitten.com/1200/636?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1200/636" alt=""></a></div>
</div>
<script type="text/javascript">
$('#lazy-demo').slickLightbox({
lazy: true
});
</script>
<pre><code class="lang-html">&lt;div id=&quot;lazy-demo&quot; class=&quot;row&quot;&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1000/600?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1000/600&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1010/606?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1010/606&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1060/636?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1060/636&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1080/600?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1080/600&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1100/606?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1100/606&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;col-xs-2&quot;&gt;&lt;a href=&quot;http://placekitten.com/1200/636?foo=bar&quot; target=&quot;_blank&quot; class=&quot;thumbnail&quot;&gt;&lt;img src=&quot;http://placekitten.com/1200/636&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(&#039;#lazy-demo&#039;).slickLightbox({
lazy: true
});
&lt;/script&gt;</code></pre>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>