← Back to Home

Screenshot Gallery Examples

This page demonstrates all the different ways to use the screenshot gallery system. Copy and paste the patterns you need into your pages. Remember to replace placeholder images with actual screenshots from page_images/ folder.

Default Auto-fit Gallery

Automatically adjusts columns based on available space. Good for most use cases.

First screenshot with caption

Second screenshot with caption

Third screenshot with caption

Dual Column Layout

Fixed 2-column layout. Perfect for side-by-side comparisons.

Left side

Right side

Triple Column Layout

Fixed 3-column layout. Good for showing multiple features.

Feature 1

Feature 2

Feature 3

Single Column (Featured)

Large, centered screenshot. Perfect for hero images or main features.

Large featured screenshot showcasing main interface

Without Captions

Clean gallery without text captions. Add no-caption class.

With Badges

Add badges to highlight new features or versions.

NEW

Newly added feature

v2.0

Updated in version 2.0

Different Aspect Ratios

Use wide, square, or portrait classes on the wrapper.

16:9 Widescreen

1:1 Square

3:4 Portrait

Lazy Loading

Use data-src instead of src to lazy load images.

Lazy loaded image 1

Lazy loaded image 2

Before/After Comparison

Side-by-side comparison with labels.

Before

After

Mixed Gallery with Multiple Images

Gallery with multiple screenshots that opens in lightbox viewer.

Main home screen interface

Settings and configuration

NEW

Newly added dark mode

Navigation menu

Full reading view in widescreen

Book library organization

HTML Code Reference

Basic Structure

<div class="screenshot-gallery">
  <div class="screenshot-item">
    <div class="screenshot-img-wrapper">
      <img class="screenshot-img" src="page_images/example-1.jpg" alt="Description" />
    </div>
    <div class="screenshot-caption">Caption text here</div>
  </div>
</div>

Layout Classes

.screenshot-gallery - Default auto-fit
.screenshot-gallery.single - 1 column
.screenshot-gallery.dual - 2 columns
.screenshot-gallery.triple - 3 columns
.screenshot-gallery.quad - 4 columns
.screenshot-gallery.compact - Smaller thumbnails

Aspect Ratio Classes

.screenshot-img-wrapper - Default 3:2
.screenshot-img-wrapper.wide - 16:9
.screenshot-img-wrapper.square - 1:1
.screenshot-img-wrapper.portrait - 3:4

Additional Classes

.screenshot-item.no-caption - Hide caption
.screenshot-item.featured - Larger, featured item
.screenshot-badge - Badge overlay (NEW, v2.0, etc.)

Usage Instructions

1. Add JavaScript

Include the screenshot gallery script before closing </body> tag:

<script src="screenshots.js"></script>

2. Add Images to page_images Folder

Follow the naming convention: [page-name]-[number].jpg

koreader-1.jpg
koreader-2.jpg
2048-1.png

3. Insert Gallery HTML

Copy one of the patterns above and replace placeholder images with your actual images.

4. Features

✅ Click any screenshot to open lightbox viewer
✅ Use arrow keys (← →) to navigate between images
✅ Press ESC to close viewer
✅ Fully responsive on all devices
✅ Dark/light theme support
✅ Lazy loading for better performance