{"id":13401351,"url":"https://github.com/jsor/lity","last_synced_at":"2025-05-15T00:12:38.121Z","repository":{"id":27774840,"uuid":"31263366","full_name":"jsor/lity","owner":"jsor","description":"Lightweight, accessible and responsive lightbox.","archived":false,"fork":false,"pushed_at":"2023-07-28T23:01:02.000Z","size":2756,"stargazers_count":1161,"open_issues_count":85,"forks_count":194,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-04-06T17:08:22.198Z","etag":null,"topics":["accessibility","accessible","javascript","lightbox","lightweight","lity","modal","responsive"],"latest_commit_sha":null,"homepage":"https://sorgalla.com/lity/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-02-24T14:20:53.000Z","updated_at":"2025-04-01T21:49:10.000Z","dependencies_parsed_at":"2024-01-16T10:09:48.581Z","dependency_job_id":null,"html_url":"https://github.com/jsor/lity","commit_stats":{"total_commits":202,"total_committers":9,"mean_commits":"22.444444444444443","dds":0.09405940594059403,"last_synced_commit":"06d481fbb9bdbd928e06d978ba5d9b1e480e2201"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsor%2Flity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsor%2Flity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsor%2Flity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsor%2Flity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsor","download_url":"https://codeload.github.com/jsor/lity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247959797,"owners_count":21024842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["accessibility","accessible","javascript","lightbox","lightweight","lity","modal","responsive"],"created_at":"2024-07-30T19:01:01.844Z","updated_at":"2025-04-13T20:44:17.667Z","avatar_url":"https://github.com/jsor.png","language":"HTML","readme":"Lity\n====\n\nLity is a ultra-lightweight, accessible and responsive lightbox plugin which\nsupports images, iframes and inline content out of the box.\n\nMinified and gzipped, its total footprint weights about 3kB.\n\nIt requires [jQuery](https://jquery.com) or [Zepto](http://zeptojs.com)\n(with the [callbacks](https://github.com/madrobby/zepto/blob/master/src/callbacks.js), \n[data](https://github.com/madrobby/zepto/blob/master/src/data.js), \n[deferred](https://github.com/madrobby/zepto/blob/master/src/deferred.js) and \n[event](https://github.com/madrobby/zepto/blob/master/src/event.js) modules).\n\nInstallation\n------------\n\nAll ready-to-use files are located in the [`dist/`](dist/) directory.\n\nInclude the Lity javascript and css files and its dependencies in your HTML\ndocument:\n\n```html\n\u003clink href=\"dist/lity.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"vendor/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/lity.js\"\u003e\u003c/script\u003e\n```\n\nLity can also be installed via Bower or [npm](https://www.npmjs.com/package/lity).\n\nUsage\n-----\n\n### Declarative\n\nAdd the `data-lity` attribute to `\u003ca\u003e` elements for which you want the links to\nbe opened in a lightbox:\n\n```html\n\u003ca href=\"https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg\" data-lity\u003eImage\u003c/a\u003e\n\u003ca href=\"#inline\" data-lity\u003eInline\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=XSGBVzeBUbk\" data-lity\u003eiFrame Youtube\u003c/a\u003e\n\u003ca href=\"https://vimeo.com/1084537\" data-lity\u003eiFrame Vimeo\u003c/a\u003e\n\u003ca href=\"https://maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA\" data-lity\u003eGoogle Maps\u003c/a\u003e\n\n\u003cdiv id=\"inline\" style=\"background:#fff\" class=\"lity-hide\"\u003e\n    Inline content\n\u003c/div\u003e\n```\n\nIf you want to open another URI than defined in the `href` attribute, just add\na `data-lity-target` with the URI:\n\n```html\n\u003ca href=\"/image.html\" data-lity data-lity-target=\"/image-preview.jpg\"\u003eImage\u003c/a\u003e\n```\n\n### Programmatic\n\nThe `lity` function can be either used directly to open URLs (or HTML) in a\nlightbox or as an event handler.\n\n```\nLity lity(string target, [Object options, [, HTMLElement|$ opener]])\n```\n\n#### Arguments\n\n* `target`: The URL or HTML to open.\n* `options`: Options as an object of key-value pairs.\n* `opener`: The element which triggered opening the lightbox (if used as a event\n   handler, this is automatically set to the element which triggered the event).\n\n#### Return value\n\nA [`Lity`](#the-lity-instance) instance.\n\n#### Example\n\n```javascript\n// Open a URL or HTML in a lightbox\nlity('https://www.youtube.com/watch?v=XSGBVzeBUbk');\nlity('\u003cp\u003eSome content to show...\u003c/p\u003e');\n\n// Bind as an event handler\n$(document).on('click', '[data-my-lightbox]', lity);\n```\n\nThe Lity instance\n-----------------\n\nIf you open a lightbox programmatically, the `lity` function returns a `Lity`\ninstance you can use to interact with the lightbox.\n\nThe `Lity` instance is also passed as the second argument to the \n[event handlers](#events).\n\n```javascript\nvar instance = lity('https://www.youtube.com/watch?v=XSGBVzeBUbk');\n```\n\n### API\n\n* [Lity.close](#lityclose)\n* [Lity.element](#lityelement)\n* [Lity.opener](#lityopener)\n* [Lity.content](#litycontent)\n* [Lity.options](#lityoptions)\n\n#### Lity.close\n\nCloses the lightbox and returns a promise which resolves once the closing\nanimation is finished.\n\n```javascript\ninstance.close().then(function() {\n    console.log('Lightbox closed');\n});\n```\n\n#### Lity.element\n\nReturns the root HTML element.\n\n```javascript\nvar element = instance.element();\n```\n\n#### Lity.opener\n\nReturns the HTML element which triggered opening the lightbox.\n\n```javascript\nvar opener = instance.opener();\n```\n\n**Note**: The value might be undefined if the lightbox has been opened\nprogrammatically and not by a click event handler and no opener argument was\nprovided.\n\n#### Lity.content\n\nReturns the content HTML element.\n\n```javascript\nvar content = instance.content();\n```\n\n**Note**: The value is undefined while the content is loading.\n\n#### Lity.options\n\nSets or returns options of the instance.\n\n```javascript\nvar allOptions = instance.options();\n\nvar template = instance.options('template');\ninstance.options('template', '\u003cdiv\u003e...\u003c/div\u003e');\n\nvar closeOnEsc = instance.options('esc');\ninstance.options('esc', false);\n```\n\nEvents\n------\n\nAll events receive the [`Lity`](#the-lity-instance) instance as the second\nargument.\n\n### Available events\n\n* [lity:open](#lityopen)\n* [lity:ready](#lityready)\n* [lity:close](#lityclose)\n* [lity:remove](#lityremove)\n* [lity:resize](#lityresize)\n\n#### lity:open\n\nTriggered before the lightbox is opened.\n\n```javascript\n$(document).on('lity:open', function(event, instance) {\n    console.log('Lightbox opened');\n});\n```\n\n#### lity:ready\n\nTriggered when the lightbox is ready.\n\n```javascript\n$(document).on('lity:ready', function(event, instance) {\n    console.log('Lightbox ready');\n});\n```\n\n#### lity:close\n\nTriggered before the lightbox is closed.\n\n```javascript\n$(document).on('lity:close', function(event, instance) {\n    console.log('Lightbox closed');\n});\n```\n\n#### lity:remove\n\nTriggered when the closing animation is finished and just before the lightbox\nis removed from the DOM.\n\n```javascript\n$(document).on('lity:remove', function(event, instance) {\n    console.log('Lightbox removed');\n});\n```\n\n#### lity:resize\n\nTriggered when the instance is resized, usually when the user resizes the\nwindow.\n\n```javascript\n$(document).on('lity:resize', function(event, instance) {\n    console.log('Lightbox resized');\n});\n```\n\nLicense\n-------\n\nCopyright (c) 2015-2020 Jan Sorgalla.\nReleased under the [MIT](LICENSE?raw=1) license.\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsor%2Flity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsor%2Flity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsor%2Flity/lists"}