{"id":26821556,"url":"https://github.com/mattlean/lanternjs","last_synced_at":"2026-05-05T09:33:21.355Z","repository":{"id":36874544,"uuid":"41181523","full_name":"mattlean/lanternjs","owner":"mattlean","description":"Lightweight image lightbox library","archived":false,"fork":false,"pushed_at":"2019-02-24T01:09:03.000Z","size":14175,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-18T06:42:00.646Z","etag":null,"topics":["css","html","javascript","lanternjs","library","lightbox"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattlean.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-21T23:19:14.000Z","updated_at":"2020-07-07T00:41:36.000Z","dependencies_parsed_at":"2022-09-11T00:22:11.942Z","dependency_job_id":null,"html_url":"https://github.com/mattlean/lanternjs","commit_stats":null,"previous_names":["isaaclean/lanternjs"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mattlean/lanternjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlean%2Flanternjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlean%2Flanternjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlean%2Flanternjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlean%2Flanternjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattlean","download_url":"https://codeload.github.com/mattlean/lanternjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlean%2Flanternjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32643741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","lanternjs","library","lightbox"],"created_at":"2025-03-30T07:31:18.566Z","updated_at":"2026-05-05T09:33:21.333Z","avatar_url":"https://github.com/mattlean.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lantern.js\n*Version 0.2.2*\n\nA simple-to-use, lightweight, and customizable image lightbox.\n\n# Download\nChoose one of the following options:\n\n1. You can download an archived file from the [GitHub repository's releases page](https://github.com/IsaacLean/lanternjs/releases).\n\n2. You can download from npm with this command: `npm install lanternjs`\n\n3. You can download from Bower with this command: `bower install lanternjs`\n\n# Why Use Lantern.js?\nThere are a lot of other great lightbox solutions out there, but Lantern.js has some benefits over many of them:\n\n1. Lantern.js is extremely lightweight and doesn't require imports of external JavaScript libraries (ex. jQuery) unlike many other lightbox solutions because it is written purely in native JavaScript.\n2. Many lightbox solutions require statically placed lightbox HTML which may lead to unused HTML in some cases. Lantern.js eliminates this problem by appending lightbox HTML to the DOM dynamically.\n3. If the user is not browsing with JavaScript on, the image links will directly link to the full images instead, making the images still viewable.\n4. Because of the code's simplicity, it is easy to go through the source and customize it, making it a flexible lightbox solution as well as a great learning resource.\n\n# Getting Started\n## 1. Setup the Code\nThere are two versions of the JavaScript.\n\nThe development version can be found as: ```src/lantern.js```\n\nThe production version (which trades readability for smaller file size) can be found as: ```src/lantern.min.js```\n\nAll you need to do load this script somewhere within your HTML document.\n\nFor styling you can use the *Minimal* style, although it's recommended for you to create your own custom style to fit your page's style.\n\nThe development version can be found as: ```src/lantern-minimal.scss```\n\nThe production version can be found as: ```src/lantern-minimal.min.css```\n\nJust like the JavaScript, all you need to do is load the CSS somewhere within your HTML document.\n\n## 2. Create a Lantern Object\nIn your own JavaScript, create a new Lantern object:\n\n```javascript\nvar lantern = new Lantern();\n```\n\n## 3. Setup the Images\nFinally you need to select the images you want to display in the lightbox. Chances are your basic formatting for the images already look something like this:\n\n```html\n\u003ca href=\"full_img.jpg\"\u003e\u003cimg src=\"thumbnail_img.jpg\" alt=\"Image Description\"\u003e\u003c/a\u003e\n```\n\nAll your need to do is add the Lantern data attribute to the links like so...\n\n```html\n\u003ca href=\"full_img.jpg\" data-lantern\u003e\u003cimg src=\"thumbnail_img.jpg\" alt=\"Image Description\"\u003e\u003c/a\u003e\n```\n\n...and you're done!\n\n# Working with the Source\nThe following is used to maintain the codebase:\n* [npm](https://npmjs.com) and [Bower](http://bower.io) for package management\n* [Grunt](http://gruntjs.com) for compiling [SASS](http://sass-lang.com), linting JavaScript with [JSHint](https://github.com/gruntjs/grunt-contrib-jshint), and building production versions of the script with [UglifyJS](https://github.com/gruntjs/grunt-contrib-uglify)\n* [normalize.css](https://necolas.github.io/normalize.css) for CSS rendering consistency between browsers when testing\n\n## Grunt Tasks\n### Default\nCommand: ```grunt```\n\nActivates ```grunt watch``` which compiles SASS and lints with JSHint when it detects changes in ```src/lantern-minimal.scss``` and ```src/lantern.js```.\n\n### Build\nCommand: ```grunt build```\n\nUses SASS and UglifyJS to build the minified versions of the CSS and JavaScript for production. Places built files in ```dist/```.\n\n# Future Features\n* Automatic mode\n* Lightbox customization\n* Image groups \u0026 lightbox navigation\n* Lightbox gallery\n\n*Special thanks to [Pexels](http://pexels.com/) for the free, awesome stock photos used in testing. :)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlean%2Flanternjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattlean%2Flanternjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlean%2Flanternjs/lists"}