[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10065":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":43,"readmeContent":44,"aiSummary":45,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":46,"discoverSource":47},10065,"lightGallery","sachinchoolur\u002FlightGallery","sachinchoolur","A customizable, modular, responsive, lightbox gallery plugin. ","https:\u002F\u002Fwww.lightgalleryjs.com\u002F",null,"TypeScript",7027,1304,135,55,0,4,22,2,40.35,"Other",false,"master",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"angular","angular-gallery","css-animations","html5-video","image-gallery","lightbox","lightbox-gallery-plugin","lit-element","react","react-gallery","thumbnails","video","video-gallery","vimeo","vue","vue-gallery","youtube","2026-06-12 02:02:16","![commit](https:\u002F\u002Fbadgen.net\u002Fgithub\u002Flast-commit\u002Fsachinchoolur\u002FlightGallery\u002Fmaster)\n![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Flightgallery.svg?color=red)\n![npm-tag](https:\u002F\u002Fbadgen.net\u002Fgithub\u002Ftag\u002Fsachinchoolur\u002Flightgallery)\n![size](https:\u002F\u002Fbadgen.net\u002Fbundlephobia\u002Fminzip\u002Flightgallery?color=cyan)\n![tree-shaking](https:\u002F\u002Fbadgen.net\u002Fbundlephobia\u002Ftree-shaking\u002Flightgallery?color=purple)\n![types](https:\u002F\u002Fbadgen.net\u002Fnpm\u002Ftypes\u002Flightgallery?color=blue)\n![hits](https:\u002F\u002Fbadgen.net\u002Fjsdelivr\u002Fhits\u002Fnpm\u002Flightgallery?color=pink)\n\n# lightGallery\n\nA customizable, modular, responsive, lightbox gallery plugin. No dependencies.\\\\\nAvailable for React.js, Angular, Vue.js, and typescript.\n\n![lightgallery](https:\u002F\u002Fwww.lightgalleryjs.com\u002Flightgallery-demo.png)\n\n## Core features\n\n-   Fully responsive.\n-   Modular architecture with built in plugins.\n-   Highly optimized for touch devices.\n-   Mouse drag supports for desktops.\n-   Double-click\u002FDouble-tap to see actual size of the image.\n-   Animated thumbnails.\n-   Social sharing.\n-   YouTube Vimeo Wistia and html5 videos Support.\n-   20+ Hardware-Accelerated CSS3 transitions.\n-   Dynamic mode.\n-   Inline gallery.\n-   Full screen support.\n-   Zoom in\u002Fout, Pinch to zoom.\n-   Swipe\u002FDrag up\u002Fdown support to close gallery.\n-   Browser history API(deep linking).\n-   Responsive images.\n-   HTML iframe support.\n-   Multiple instances on one page.\n-   Easily customizable via CSS (SCSS) and Settings.\n-   Smart image preloading and code optimization.\n-   Keyboard Navigation for desktop.\n-   SVG icons.\n-   Accessibility support.\n-   Rotate, flip images.\n-   And many more.\n\n## Documentation\n\n-   [Getting started](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fgetting-started\u002F)\n-   [Settings](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fsettings\u002F)\n-   [React](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Freact\u002F)\n-   [Vue.js](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fvue\u002F)\n-   [Angular](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fangular\u002F)\n-   [Demos](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdemos\u002Fthumbnails\u002F)\n-   [CodePen](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FBNNjpR)\n\n## Installation\n\nlightGallery is available on NPM, Yarn, Bower, CDNs, and GitHub. You can use any\nof the following method to download lightGallery.\n\n-   [NPM](https:\u002F\u002Fwww.npmjs.com\u002F) - NPM is a package manager for the JavaScript\n    programming language. You can install `lightgallery` using the following\n    command\n\n    ```sh\n    npm install lightgallery\n    ```\n\n-   [YARN](https:\u002F\u002Fyarnpkg.com\u002F) - Yarn is another popular package manager for\n    the JavaScript programming language. If you prefer you can use Yarn instead\n    of NPM\n\n    ```sh\n    yarn add lightgallery\n    ```\n\n-   [Bower](http:\u002F\u002Fbower.io) - You can find lightGallery on Bower package\n    manager as well\n\n    ```sh\n    bower install lightgallery --save\n    ```\n\n-   [GitHub](https:\u002F\u002Fgithub.com\u002Fsachinchoolur\u002FlightGallery\u002Farchive\u002Fmaster.zip) -\n    You can also directly download lightgallery from GitHub\n\n-   CDN - If you prefer to use a CDN, you can load files via\n    [jsdelivr](https:\u002F\u002Fwww.jsdelivr.com\u002Fprojects\u002Flightgallery),\n    [cdnjs](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Flightgallery) or\n    [unpkg](https:\u002F\u002Funpkg.com\u002Fbrowse\u002Flightgallery@latest\u002F)\n\n#### Include CSS and Javascript files\n\nFirst of all, include lightgallery.css in the <head> of the document. If\nyou want include any lightGallery plugin such as thumbnails or zoom, you need to\ninclude respective css files as well.\n\nAlternatively you can include `lightgallery-bundle.css` which contains\nlightGallery and all plugin styles instead of separate stylesheets.\n\nIf you like you can also import scss files instead of css files from the `scss`\nfolder.\n\n```HTML\n\u003Chead>\n    \u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"css\u002Flightgallery.css\" \u002F>\n\n    \u003C!-- lightgallery plugins -->\n    \u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"css\u002Flg-zoom.css\" \u002F>\n    \u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"css\u002Flg-thumbnail.css\" \u002F>\n\n\n    \u003C!-- OR -->\n\n    \u003Clink type=\"text\u002Fcss\" rel=\"stylesheet\" href=\"css\u002Flightgallery-bundle.css\" \u002F>\n\u003C\u002Fhead>\n```\n\nThen include lightgallery.umd.js into your document. If you want to include any\nlightgallery plugin you can include it after lightgallery.umd.js.\n\n```HTML\n\u003Cbody>\n    ....\n\n    \u003Cscript src=\"js\u002Flightgallery.umd.js\">\u003C\u002Fscript>\n\n    \u003C!-- lightgallery plugins -->\n    \u003Cscript src=\"js\u002Fplugins\u002Flg-thumbnail.umd.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"js\u002Fplugins\u002Flg-zoom.umd.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n```\n\nlightGallery supports AMD, CommonJS and ES6 modules too.\n\n```JavaScript\nimport lightGallery from 'lightgallery';\n\n\u002F\u002F Plugins\nimport lgThumbnail from 'lightgallery\u002Fplugins\u002Fthumbnail'\nimport lgZoom from 'lightgallery\u002Fplugins\u002Fzoom'\n\n```\n\n#### The markup\n\nlightgallery does not force you to use any kind of markup. you can use whatever\nmarkup you want.\n\u003Ca href=\"https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdemos\u002Fhtml-markup\u002F\">Here\u003C\u002Fa> can find\ndetailed examples of different kinds of markups.\n\nIf you know the original size of the media, you can pass it via\n`data-lg-size=\"${width}-${height}\"` attribute for the initial\n[zoom](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fsettings\u002F#zoomFromOrigin) animation.\nBut, this is completely optional.\n\n```HTML\n\u003Cdiv id=\"lightgallery\">\n    \u003Ca href=\"img\u002Fimg1.jpg\" data-lg-size=\"1600-2400\">\n        \u003Cimg alt=\"..\" src=\"img\u002Fthumb1.jpg\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"img\u002Fimg2.jpg\" data-lg-size=\"1024-800\">\n        \u003Cimg alt=\"..\" src=\"img\u002Fthumb2.jpg\" \u002F>\n    \u003C\u002Fa>\n    ...\n\u003C\u002Fdiv>\n```\n\n#### Initialize lightGallery\n\nFinally, you need to initiate the gallery by adding the following code.\n\n```javascript\n\u003Cscript type=\"text\u002Fjavascript\">\n    lightGallery(document.getElementById('lightgallery'), {\n        plugins: [lgZoom, lgThumbnail],\n        speed: 500,\n        licenseKey: 'your_license_key'\n        ... other settings\n    });\n\u003C\u002Fscript>\n```\n\n[CodePen Demos](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FBNNjpR)\n\n#### License Key\n\nYou'll receive a license key via email one you purchase a license [More info](https:\u002F\u002Fwww.lightgalleryjs.com\u002Fdocs\u002Fsettings\u002F#licenseKey)\n\n#### Plugins\n\nAs shown above, you need to pass the plugins via settings if you want to use any\nlightGallery plugins.\n\nIf you are including lightGallery files via script tag, please use the same\nplugins names as follows.\n\n`lgZoom`, `lgAutoplay`, ` lgComment`, `lgFullscreen `, `lgHash`, `lgPager`,\n`lgRotate`, `lgShare`, `lgThumbnail`, `lgVideo`, `lgMediumZoom`\n\n## Browser support\n\nlightGallery supports all major browsers including IE 10 and above.\n\n## License\n\n#### Commercial license\n\nIf you want to use lightGallery to develop commercial sites, themes, projects,\nand applications, the Commercial license is the appropriate license. With this\noption, your source code is kept proprietary.\n[Read more about the commercial license](https:\u002F\u002Fwww.lightgalleryjs.com\u002Flicense\u002F)\n\n#### Open source license\n\nIf you are creating an open source application under a license compatible with\nthe GNU GPL license v3, you may use this project under the terms of the GPLv3.\n\n## Support\n\nIf you have any questions, suggestions, feedback, please reach out to [contact@lightgalleryjs.com](mailto:contact@lightgalleryjs.com) or DM me on [twitter](https:\u002F\u002Ftwitter.com\u002FSachinNeravath)\n","lightGallery 是一个可自定义、模块化且响应式的灯箱图库插件。它支持触摸设备优化、鼠标拖拽操作、双击\u002F双击查看原图大小、动态缩略图展示、社交分享功能，以及YouTube、Vimeo等视频平台的支持。此外，该插件提供超过20种硬件加速的CSS3过渡效果，并具备全屏显示、缩放、键盘导航等功能。lightGallery适用于React.js、Angular、Vue.js和TypeScript框架，非常适合需要在网页上展示图片或视频集锦的应用场景，如个人作品集、新闻网站、电子商务平台等。其高度可定制性和强大的性能优化使其成为开发高质量多媒体展示项目的理想选择。","2026-06-11 03:26:21","top_topic"]