-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
112 lines (112 loc) · 6.04 KB
/
index.html
File metadata and controls
112 lines (112 loc) · 6.04 KB
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
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:url" content="https://kostassliazas.github.io/k7/">
<meta property="og:type" content="K7 Images gallery free">
<meta property="og:title" content="K7 Images gallery JavaScript">
<meta property="og:description" content="Image gallery JavaScript + CSS">
<meta property="og:image" content="https://kostassliazas.github.io/K7/photos/photo16.webp">
<meta name="title" content="Simple image gallery JavaScript + CSS (full window) with play button">
<meta name="description" content="Simple image gallery without external libraries JavaScript(vanilla) + CSS">
<meta name="keywords" content="gallery,image,JavaScript,vanilla,photo,CSS,full,screen,play,auto,buttons">
<meta name="language" content="English">
<meta name="author" content="Kostas Šliažas">
<title>K7 Images gallery</title>
<link rel="canonical" href="https://kostassliazas.github.io/K7/">
<link rel="preload" href="css/style.page.min.css" as="style">
<link rel="stylesheet" href="css/style.page.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script defer src="src/k7.min.js?v=7"></script>
<script defer src="js/main.min.js?v=7"></script>
</head>
<body class="back">
<header>
<div class="header">
<h1>K7 Images Gallery — A Simple JavaScript Image Gallery</h1>
</div>
<nav class="nav" id="topnav">
<button id="menu">menu</button>
<ul id="nav">
<li><a href="#how-to">Installation</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#configuration">Configuration</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<div class="main">
<div class="wrp">
<div id="demo" class="center">
<h1>demo</h1>
<div class="images-container images">
<img src="wallpapers/tools.svg" alt="tools" loading="lazy">
<img src="wallpapers/cubes.webp" alt="cubes" loading="lazy">
<img src="wallpapers/antifailsylium.webp" alt="antifailsylium" loading="lazy">
<img src="wallpapers/earth.webp" alt="earth" loading="lazy">
<img src="wallpapers/keyboard.webp" alt="keyboard" loading="lazy">
<img src="wallpapers/sea.webp" alt="sea" loading="lazy">
<img src="wallpapers/grass.webp" alt="grass" loading="lazy">
</div>
</div>
</div>
<div id="how-to" class="wrp">
<h1>Include</h1>
<pre><code><script src="src/k7.min.js?v=7" defer></script></code></pre>
<p>add class "images" (optional) to container or every image will be selected</p>
</div>
<div class="wrp" id="configuration">
<h1>Configuration</h1>
<p>This image gallery should ideally maintain image proportions, but it can be adjusted differently by setting, for example: #k7 img { width: 100%; height: 100%; }. Background colors can be modified by adding, for instance: :root{ --color1: #ee7; --color2: #777; }</p>
<p>Compiled with Google Closure: google-closure-compiler -O ADVANCED k7.js --js_output_file k7.min.js</p>
</div>
<div class="wrp" id="about">
<h1>About</h1>
<a href="https://github.com/KostasSliazas/K7" target="_blank">https://github.com/KostasSliazas/K7</a>
<p>This image gallery features a full-window mode and automatically hides buttons when the cursor moves out of the window. It includes a transparent, clickable background that disappears when clicked. The gallery supports autoplay and includes a download button for images, but these can be hidden if not needed. Built with vanilla JavaScript, it is lightweight, with a total size of approximately 7.7KB</p>
The images are available at the following link: <a href="https://vectors-images.myportfolio.com" target="_blank" rel="noopener">vectors + images</a>
</div>
<div class="grid-container samebg">
<div class="a1">
<div class="wrpko">
<div class="korta">
<div class="sele galas">
<p>A collection of visually stunning wallpapers created through experiments with
<a href="https://www.blender.org/" target="_blank" rel="nofollow noopener noreferrer">Blender 3D</a> and/or
<a href="https://inkscape.org/" target="_blank" rel="nofollow noopener noreferrer">Inkscape</a>.
Each design explores unique shapes, lighting, and textures, blending creativity and technology to produce mesmerizing visuals perfect for desktops and backgrounds.
</p>
</div>
<div class="sele priekis">
<img src="wallpapers/tools.svg" alt="tools"><span>WALLPAPERS</span>
<div class="rbtn"></div>
</div>
</div>
</div>
</div>
<div class="a2">
<div class="wrpko">
<div class="korta">
<div class="sele galas">
<p>A diverse collection of random photos captured in various locations, showcasing spontaneous moments, natural beauty, and everyday scenes. These images highlight the art of finding visual interest in unexpected places and celebrating the charm of ordinary life.</p>
</div>
<div class="sele priekis">
<img src="wallpapers/large/grass.jpg" alt="grass"><span>PHOTOS</span>
<div class="rbtn"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>2025 by Kostas Šliažas</p>
</footer>
</body>
</html>