← Back to all products
$19
Photography Template
Photography portfolio template with lightbox gallery, lazy loading, and fullscreen mode.
JavaScriptMarkdownJSON
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 7 files
photography-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
Photography Template
A photography portfolio template for photographers and visual artists. Showcase your work with a gallery, service packages, and a booking form.
Price
$19 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with full-width featured image
- Photo gallery with category filters and lightbox
- About the photographer
- Services and pricing packages
- Client testimonials
- Booking / contact form
- Footer with social links and copyright
What's Included
photography-template/
├── index.html # Full portfolio — hero, gallery, about, pricing, contact
├── style.css # All styles with CSS custom properties & dark mode
├── script.js # Theme toggle, scroll reveal, mobile nav, filter, lightbox
├── assets/
│ └── README.md # Guide for adding your own photographs
├── manifest.json # Product file manifest
├── README.md # This file
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your photos and info
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/* ==========================================================================
LUMIÈRE — Photography Portfolio JavaScript
Theme toggle, scroll reveal, mobile nav, smooth scroll,
gallery filter, lightbox with keyboard navigation & focus trap.
========================================================================== */
(function () {
'use strict';
/* -----------------------------------------------------------------------
1. THEME TOGGLE
Persists to localStorage; respects prefers-color-scheme as default.
----------------------------------------------------------------------- */
var themeToggle = document.getElementById('theme-toggle');
var root = document.documentElement;
function getPreferredTheme() {
var stored = localStorage.getItem('theme');
if (stored) return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function applyTheme(theme) {
root.setAttribute('data-theme', theme);
if (themeToggle) {
var isDark = theme === 'dark';
themeToggle.setAttribute('aria-pressed', String(isDark));
themeToggle.setAttribute('aria-label',
isDark ? 'Switch to light theme' : 'Switch to dark theme'
);
}
}
applyTheme(getPreferredTheme());
if (themeToggle) {
themeToggle.addEventListener('click', function () {
var current = root.getAttribute('data-theme');
var next = current === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', next);
applyTheme(next);
});
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
});
# ... 293 more lines ...