Requirements: PHP
- Put your images in the
img
folder - Open
http://example.com/photosheet.php
in your browser - Save as
index.html
or else
Or from the command-line:
php photosheet.php > index.html
- Images should be a reasonable size and compressed beforehand, as no thumbnails are generated
figure.landscape
andfigure.portrait
are available for styling- Navigate within the lightbox on tap/click, swipe/scroll, on focus with Tab, or with the ← → keys
Default variables in photosheet.php
:
$site_title = "Photographs of Roadside America";
$site_desc = "by John Margolies";
$site_style = "style.css";
$img_folder = "img/john-margolies";
$allowed_types = ["gif","jpg","jpeg","png","webp"];
Default variables in style.css
:
--textsize: 16px;
--textcolor: #eee;
--backcolor: #0e0e0f;
--margin: calc(0.8em + 1vw);
--thumbsize: 156px;
--slide-transition: auto;
Please check v0.1 for a simpler javascript-free version.
The CSS images slideshow alone is available here.