static-gallery-generator/gallery/index.html

89 lines
3.2 KiB
HTML

<!DOCTYPE html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<!-- This CSS file is just here to make this example page look presentable. -->
<link href="index.css" rel="stylesheet"/>
<!--
This is the first important part.
These are always required to load the general nanogallery2 code:
-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>
<!--
And this is the gallery.js file generated by the second script.
It contains the settings and gallery items for your own personal gallery:
-->
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<header>
<!--
This header navigation thing is just an example.
You probably have your own page layout already.
-->
<span id="title">Example Page</span>
<nav>
<ul>
<li><a href="/">Home</a></li> <!-- Links to the top level of your website -->
<li><a href="">Gallery</a></li> <!-- Links to itself / just reloads the page -->
<li><a href="feed.xml">RSS Feed</a></li> <!-- Links to the feed.xml in the same folder -->
</ul>
</nav>
</header>
<main>
<h2>Gallery</h2>
<!--
This is the second important part.
It's the placeholder that the script looks for,
and then automatically replaces with the actual gallery:
-->
<div id="gallery"/>
<!-- And that's all you really need in your HTML file. -->
</main>
<footer>
<p>
This is just a barebones example page for the gallery generator.
Do with it whatever you want!
</p>
<p>
The only important parts are the scripts linked
inside the <code>&lt;head&gt;</code> tag, and the
<code>&lt;div id="gallery"/&gt;</code> placeholder.<br>
If you already have your own website, and you only
want to include the gallery inside it, those two things
are all you'll need to put in your HTML!<br>
<small>
Don't forget the actual image folders ("media" and "thumbs"),
and the "gallery.js" file generated by the second script!
Put those on your site, too!
</small>
</p>
<p>
If you run into any problems setting this thing up, please either
<a href="https://gitea.treehouse.systems/Nekkowe/static-gallery-generator/issues">
leave an issue on the bug tracker</a>
or email me about it at
<a href="mailto:nekkowe+gallery@posteo.com">
nekkowe+gallery@posteo.com</a>.
Even if the instructions just aren't clear enough!
Especially then, actually…!
</p>
<p>
My own gallery, blog & links to accounts
on other websites can be found at <a href="https://nekkowe.com">nekkowe.com</a>.<br>
Follow my <a href="https://nekkowe.com/blog/feed/feed.xml">RSS feed</a> for updates on this & other projects!
</p>
<p>
- Nekkowe 👁️‍🗨️✨
</p>
</footer>
</body>