Codes

All codes are made with love for the community and are free to use as long as the credit remains intact.

Do

  • Use it, love it, make it yours!
  • Customize it as much as you like.
  • Report bugs!

Don't

  • Remove the original credit.
  • Claim the code as your own.
  • Redistribute or use commercially.
filter:
Code L-003

Upsized Gallery + Lightboxes

When you have an image gallery, and don't want to link to separate html pages, you can try to use this popup/lightbox combo.

This is the upsized version for small (pixel) images.

What you'll need to do
  • Upload your original and upsized images to your website server.
  • Add the HTML and JavaScript to your HTML page.
  • Add the CSS to your stylesheet.
features
popups lightbox zoom drag
needs
HTML CSS JavaScript
mobile not friendly
preview →
live preview
live preview
Code L-003

Downsized Gallery + Lightboxes

When you have an image gallery, and don't want to link to separate html pages, you can try to use this popup/lightbox combo.

This is the downsize version for large images.

What you'll need to do
  • Upload your original images to your website server.
  • Add the HTML and JavaScript to your HTML page.
  • Add the CSS to your stylesheet.
features
popups lightbox zoom drag
needs
HTML CSS JavaScript
mobile not friendly
preview →
Code L-002

Downsized Image Lightbox

A lightbox for large photos, artwork, scans, and other images that are too large to display at their original size on a website. When you click an image, it opens in a full-screen viewer starting at 10% of its original size.

The viewer lets visitors switch between 10%, 25%, 50%, 75% and 100%. At 100%, the image is shown at its original dimensions and can be explored by scrolling or dragging. You only need the original image file. No separate resized versions are required.

What you'll need to do
  • Upload your original image to your website server.
  • Replace the image URL in the JavaScript.
  • Add the HTML and JavaScript to your HTML page.
  • Add the CSS to your stylesheet.
features
lightbox zoom/zoom out drag
needs
HTML CSS JavaScript
mobile not friendly
preview →
live preview
live preview
Code L-001

Lightbox

A lightbox I made specifically for pixel art because of its small size. When you click an artwork to open it in a full-screen viewer, you can switch between different image sizes using the buttons at the top.

Large images can be explored by scrolling or dragging, while pixelated rendering keeps the artwork crisp. For this lightbox you'll need your original image file as well as upsized versions at 200%, 400% and 600%.

What you'll need to do
  • Upload image files at 100%, 200%, 400% and 600% to your website server.
  • Add the HTML and JavaScript to your HTML page.
  • Add the CSS to your stylesheet.
features
lightbox zoom drag
needs
HTML CSS JavaScript
mobile not friendly
preview →
Code BG-001

Background + Bottom border

A simple repeating background paired with a fixed cloud border along the bottom of the page. The background repeats in every direction, while the clouds repeat horizontally across the bottom of the screen.

when you copy the code, make sure to get the corresponding css. so HTML + CSS or HTML2 + CSS2

Space version

Also available in a space version, with a purple starry background and a border of clouds!

What you'll need to do!
  • Upload the background and border images to your website.
  • Replace the two image URLs in the CSS with your own file paths.
features
background repeat fixed
needs
HTML CSS 2 images
mobile friendly
preview →
live preview
nothing found

There aren't any codes with this combination of features yet.