mirror of
https://github.com/thumbsup/thumbsup
synced 2024-11-17 15:25:50 +00:00
77 lines
2.1 KiB
Handlebars
77 lines
2.1 KiB
Handlebars
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>{{gallery.name}}</title>
|
||
<link rel="stylesheet" href="public/reset.css" />
|
||
<link rel="stylesheet" href="public/theme.css" />
|
||
<link rel="stylesheet" href="public/blueimp/css/blueimp-gallery.min.css">
|
||
<link rel="stylesheet" href="public/blueimp/css/blueimp-gallery-video.css">
|
||
<link rel="stylesheet" href="public/blueimp/css/blueimp-gallery-indicator.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
<h1>Photo</h1>
|
||
<h2>gallery</h2>
|
||
</header>
|
||
|
||
<nav>
|
||
<ul>
|
||
{{#each links}}
|
||
<li {{#if active}}class="active"{{/if}}>
|
||
<a href="{{url}}">{{name}}</a>
|
||
</li>
|
||
{{/each}}
|
||
</ul>
|
||
</nav>
|
||
|
||
<ul id="gallery">
|
||
{{#each gallery.media}}<li>
|
||
{{#if video}}
|
||
<a href="{{url}}"
|
||
type="video/mp4"
|
||
data-poster="{{poster}}">
|
||
<img src="{{thumbnail}}"
|
||
alt="{{name}}" />
|
||
</a>
|
||
{{else}}
|
||
<a href="{{url}}">
|
||
<img src="{{thumbnail}}"
|
||
alt="{{name}}" />
|
||
</a>
|
||
{{/if}}
|
||
</li>{{/each}}
|
||
</ul>
|
||
|
||
<div id="blueimp-gallery" class="blueimp-gallery">
|
||
<div class="slides"></div>
|
||
<h3 class="title"></h3>
|
||
<a class="prev">‹</a>
|
||
<a class="next">›</a>
|
||
<a class="close">×</a>
|
||
<a class="play-pause"></a>
|
||
<ol class="indicator"></ol>
|
||
</div>
|
||
|
||
<script src="public/blueimp/js/blueimp-gallery.min.js"></script>
|
||
<script src="public/blueimp/js/blueimp-gallery-video.js"></script>
|
||
<script src="public/blueimp/js/blueimp-gallery-indicator.js"></script>
|
||
|
||
<script>
|
||
document.getElementById('gallery').onclick = function(event) {
|
||
event = event || window.event;
|
||
var target = event.target || event.srcElement,
|
||
link = target.src ? target.parentNode : target,
|
||
options = {index: link, event: event},
|
||
links = this.getElementsByTagName('a');
|
||
blueimp.Gallery(links, options);
|
||
};
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|