Skip to content
This repository has been archived by the owner. It is now read-only.

oliverschwendener/lumos

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

lumos

What is lumos?

Lumos is a simple javascript library to add an image overlay to your website.

Why use it?

  • easy to set up
  • customizable
  • lightweight (total 3KB)
  • responsive
  • no dependencies

Demo

Check out the official website.

Usage

  1. Add lumos.css to your HTML
    <link rel="stylesheet" href="lumos.css">
    <link rel="stylesheet" href="your-stylesheet.css">
  2. Add lumos-min.js to your HTML
    <script src="lumos-min.js"></script>
    <script src="your-scripts.js"></script>
  3. Add the data-action="lumos" tag to your images
    <img data-action="lumos" src="image.jpg">
  4. Optional: If you want to have small images on your website and display a high resolution image only if the user clicks on it: add the data-lumos-src tag to your images with an url to your high resolution image
    <img data-action="lumos" src="small-image.jpg" data-lumos-src="big-image.jpg">
  5. Et voilà, you are ready to go

Customization

You can modify the look of the lumos overlay with your own stylesheets.

License

Licensed under the MIT license.

About

Javascript Library to overlay Images

Resources

License

Stars

Watchers

Forks

Packages

No packages published