1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# " vocab="http://ogp.me/ns" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>galleries | ck - the config keeper</title>
<link href="../assets/css/rst.css" rel="stylesheet" type="text/css">
<link href="../assets/css/code.css" rel="stylesheet" type="text/css">
<link href="../assets/css/dark.css" rel="stylesheet" type="text/css">
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet" type="text/css">
<meta name="theme-color" content="#5670d4">
<meta name="generator" content="Nikola (getnikola.com)">
<link rel="canonical" href="https://gramanas.github.io/ck/galleries/">
<!--[if lt IE 9]><script src="../assets/js/html5.js"></script><![endif]--><link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
.image-block {
display: inline-block;
}
.flowr_row {
width: 100%;
}
</style>
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
</head>
<body class="hack dark">
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
<header id="header"><h1 id="brand"><a href="https://gramanas.github.io/ck/" title="ck - the config keeper" rel="home">
<span id="blog-title">ck - the config keeper</span>
</a></h1>
<nav id="menu"><ul>
<li><a href="../manual/">user manual</a></li>
<li><a href="../ck-mode/">ck-mode</a></li>
</ul></nav></header><main id="content"><nav class="breadcrumbs"><ul class="breadcrumb">
<li>galleries</li>
</ul></nav><h1>galleries</h1>
<div id="gallery_container"></div>
</main><footer id="footer"><p>Contents © 2018 <a href="mailto:anastasis.gramm2@gmail.com">gramanas</a> - Powered by <a href="https://getnikola.com" rel="nofollow">Nikola</a> </p>
</footer>
</div>
<script src="../assets/js/flowr.js"></script><script>
jsonContent = [];
flowr(document.querySelectorAll("#gallery_container")[0], {
data : jsonContent,
height : 180*.6,
padding: 5,
rows: -1,
render : function(params) {
// Just return a div, string or a dom object, anything works fine
var img = document.createElement("img");
img.setAttribute('src', params.itemData.url_thumb);
img.setAttribute('width', params.width);
img.setAttribute('height', params.height);
img.setAttribute('alt', params.itemData.title);
img.style.maxWidth = '100%';
link = document.createElement("a");
link.setAttribute('href', params.itemData.url);
link.setAttribute('class', 'image-reference');
div = document.createElement("div");
div.setAttribute('class', 'image-block');
div.setAttribute('title', params.itemData.title);
div.setAttribute('data-toggle', "tooltip")
link.append(img);
div.append(link);
//div.hover(div.tooltip());
return div;
},
itemWidth : function(data) { return data.size.w; },
itemHeight : function(data) { return data.size.h; },
complete : function(params) {
if( jsonContent.length > params.renderedItems ) {
nextRenderList = jsonContent.slice( params.renderedItems );
}
}
});
baguetteBox.run('#gallery_container', {
captions: function(element) {
return element.getElementsByTagName('img')[0].alt;
}});
</script>
</body>
</html>
|
