{"id":19145728,"url":"https://github.com/xremix/xgallerify","last_synced_at":"2025-10-07T03:04:59.352Z","repository":{"id":57401368,"uuid":"47139521","full_name":"xremix/xGallerify","owner":"xremix","description":"A lightweight, responsive, smart gallery based on jQuery","archived":false,"fork":false,"pushed_at":"2020-08-31T09:42:21.000Z","size":96,"stargazers_count":54,"open_issues_count":2,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-17T04:22:53.501Z","etag":null,"topics":["css","gallery","html","image","javascript","javascript-library","jquery","jquery-plugin","js","photo","responsive","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/xremix.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-11-30T18:59:52.000Z","updated_at":"2025-02-16T16:45:19.000Z","dependencies_parsed_at":"2022-08-30T20:01:26.807Z","dependency_job_id":null,"html_url":"https://github.com/xremix/xGallerify","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/xremix/xGallerify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xremix%2FxGallerify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xremix%2FxGallerify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xremix%2FxGallerify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xremix%2FxGallerify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xremix","download_url":"https://codeload.github.com/xremix/xGallerify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xremix%2FxGallerify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278712711,"owners_count":26032742,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"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","gallery","html","image","javascript","javascript-library","jquery","jquery-plugin","js","photo","responsive","web"],"created_at":"2024-11-09T07:42:13.880Z","updated_at":"2025-10-07T03:04:59.333Z","avatar_url":"https://github.com/xremix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xGallerify\n[![npm version](https://badge.fury.io/js/xgallerify.svg)](https://badge.fury.io/js/xgallerify)\n[![Bower version](https://badge.fury.io/bo/xGallerify.svg)](https://badge.fury.io/bo/xGallerify)\n[![](https://data.jsdelivr.com/v1/package/npm/xgallerify/badge)](https://www.jsdelivr.com/package/npm/xgallerify)\n[![Status Deprecated](https://img.shields.io/badge/Status-Deprecated-dd741f.svg)](https://github.com/xremix/ng-xGallerify)\n\n\n**!!!!There is a new version of this project, based on angular!!!!**\n\n**Please check [xremix/ng-xGallerify](https://github.com/xremix/ng-xGallerify) for the latest version of this project. This project will still be maintained with bug fixes.**\n\n\nA lightweight, responsive, smart gallery based on jQuery.\n\n- Responsive\n- Simple to use\n- Customizable and custom styling\n- Only 3kb file size\n- [AngularJS directive available](https://github.com/JohnnyTheTank/angular-xGallerify)\n\n## Demo\n\nCheck out the [Demo](https://rawgit.com/xremix/xGallerify/master/Demo.html) or try it yourself with [CodePen](http://codepen.io/xremix/pen/QyqJzQ)\n\nTo see a real-live sample see the [Flickr Demo](https://rawgit.com/xremix/xGallerify/master/Demo-Flickr.html) or try it yourself with the [CodePen Sample](http://codepen.io/xremix/pen/OMxarm)\n\n## Usage\n\n```JS\n$('.photos').gallerify({\n\tmargin:10,\n\tmode:'default'\n});\n```\n\nIn this sample `.photos` is a `\u003cdiv\u003e` containing the images. xGallerify will resize the images in a pleasant way for you.\n\n#### Custom Styling\nImages can be put inside of div's and styled on your own.\nCheck out the full [CodePen Demo](http://codepen.io/xremix/pen/QyqJzQ) including all settings, for a sample with a custom styled div.\n\n\n### CDN [jsDelivr](https://www.jsdelivr.com/package/npm/xgallerify)\n\nThe official CDN for xGallerify is hosted on [jsDelivr](https://www.jsdelivr.com/package/npm/xgallerify) and will support the latest version (served from NPM).\n\n```HTML\n\u003c!-- Latest Version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/xgallerify@latest/dist/jquery.xgallerify.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/xgallerify@latest/dist/jquery.xgallerify.js\"\u003e\u003c/script\u003e\n\n\n\u003c!-- Specific Version --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/xgallerify@0.1.5/dist/jquery.xgallerify.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/xgallerify@0.1.5/dist/jquery.xgallerify.js\"\u003e\u003c/script\u003e\n```\n\n#### Alternate CDN (rawgit)\nSpecific branch versions directly from github.com are hosted at the [rawgit CDN](https://rawgit.com).\n\n```HTML\n\n\u003c!-- Master Branch --\u003e\n\u003cscript src=\"https://rawgit.com/xremix/xGallerify/master/dist/jquery.xgallerify.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Develop Branch --\u003e\n\u003cscript src=\"https://rawgit.com/xremix/xGallerify/develop/dist/jquery.xgallerify.js\"\u003e\u003c/script\u003e\n\n```\n\n## Parameters\n\n| Name | Default / Options | Type | Description |\n|---|---|---|---|\n| `margin` | e.g. `10`  | `int` | Value in pixels of the margin of each image on each side  |\n| `galleryMargin` | e.g. `17`  | `int` | Value in pixels of the margin outside of the gallery. **This is set to 17px default because of some rendering issue on macOS Safari**  |\n| `mode` | `default`, `bootstrap`, `bootstrapv4`, `flickr`, `small` or custom object  | `string` or `object` | The style mode wich defines how the gallery should be displayed and how many images fit in a row. See description in the mode section. |\n| `lastRow` | `adjust`, `fullwidth` or `hidden` | `string` | Set the last row to the full width, hide it or find a good adjustment. *NOTE:* I personally prefer `adjust`, wich is also the default. |\n| `jsSetup` | `true` or `false` | `bool` | Sets some default CSS values to the elements like `dislay:inline-block` and for each image inside of a container `width:100%`. This can be disabled if you want to have your own floating or style this in plain CSS. |\n| `debounceTime` | `0` | `int` | This functionality waits `x ms` before rendering a new loaded image to boost the performance on older machines. |\n| `width` | `800` | `int` | Width of the gallery in `px` - **Work in Progress!** It is recommended to use an outer div with a specific width to controll the width of the Gallery. |\n\n\n### Modes\n\nThe modes property defines **how many** images do show at what **container width**\n\n*NOTE* If you want to have another mode you are welcome to contribute or open an [issue](https://github.com/xremix/xGallerify/issues).  \nThe maximal image height helps to show multiple images in a row, if the images do have a very high ratio like 3:9.\n\n#### Predefined Modes\n\n| Mode| Breakpoint | Images per row |\n| ---------------- | ---------------- | ---------------- |\n| **default mode** | Container width \u003e 1800 | 4 |\n|  | Container width \u003e 1200 | 3 |\n|  | Container width \u003e 768 | 2 |\n|  | Container width \u003c 768 | 1 |\n|  | Maximal image height | Screen Height * 0.5 |\n| **bootstrap mode** | Container width \u003e 1170 | 4 |\n|  | Container width \u003e 970 | 3 |\n|  | Container width \u003e 750 | 2 |\n|  | Container width \u003c 750 | 1 |\n|  | Maximal image height | Screen Height * 0.5 |\n| **bootstrapv4 mode** | Container width \u003e 1200 | 4 |\n|  | Container width \u003e 992 | 3 |\n|  | Container width \u003e 768 | 2 |\n|  | Container width \u003c 768 | 1 |\n|  | Maximal image height | Screen Height * 0.5 |\n| **flickr mode** | Container width \u003e 1800 | 4 |\n|  | Container width \u003e 1300 | 3 |\n|  | Container width \u003e 610 | 2 |\n|  | Container width \u003c 610 | 1 |\n|  | Maximal image height | Screen Height * 0.4 |\n| **small mode** | Container width \u003e 1800 | 14 |\n|  | Container width \u003e 1300 | 10 |\n|  | Container width \u003e 610 | 6 |\n|  | Container width \u003c 610 | 4 |\n|  | Maximal image height | Screen Height * 0.4 |\n\n#### Custom Modes\n\nThe mode parameter can also be an object that defnies the breakpoints and max height of an image.  \nCheck out the [Codepen](http://codepen.io/xremix/pen/QyqJzQ) demo or the following sample object:\n\n```JS\nvar gallery = $('.photos').gallerify({\n\tmargin:5,\n\tmode:{\n\t\tmaxHeight: screen.height * 0.5,\n\t\tbreakPoints:[\n\t\t\t{\n\t\t\t\tminWidth: 1170,\n\t\t\t\tcolumns: 10,\n\t\t\t},{\n\t\t\t\tminWidth: 970,\n\t\t\t\tcolumns: 6,\n\t\t\t},{\n\t\t\t\tminWidth: 750,\n\t\t\t\tcolumns: 3,\n\t\t\t},{\n\t\t\t\tmaxWidth: 750,\n\t\t\t\tcolumns: 2,\n\t\t\t}\n\t\t]\n\t},\n\tlastRow:'adjust'\n});\n```\n\n## Functions\n\n### Render\nIf new images are added or loaded you can call `render` to reinitialize the gallery.\nThis will only resize the images to fit again.\n```JS\n$('.photos').gallerify();\n//...\n$(window).on('load', function() { // Eventlistener that fires when all images are loaded\n    $('.photos').gallerify.render();\n});\n```\n\n### Render Async Images\nAutomatically renders every time an image has been loaded. This needs to get called everytime you add a new image to `.photos` after calling `gallerify()`, if you don't have your own *image loaded* event listener like described in the Render function documentation.\n\n```JS\n$('.photos').gallerify();\n\n$('.photos').append('\u003cimg src=\"sample-image.jpg\"\u003e');\n$('.photos').append('\u003cimg src=\"sample-image2.jpg\"\u003e');\n$('.photos').append('\u003cimg src=\"sample-image3.jpg\"\u003e');\n\n$('.photos').gallerify.renderAsyncImages();\n```\n\n## Community\n\nxGallerify AngularJS directive: [JohnnyTheTank/angular-xGallerify](https://github.com/JohnnyTheTank/angular-xGallerify)\nxGallerify Angular component: [xremix/ng-xGallerify](https://github.com/xremix/ng-xGallerify)\n\n\nThanks everyone for contributing. Suggestions are always welcome.  \nAlso I'm happy to hear in which projects you've used the library.\n\n[![Analytics](https://ga-beacon.appspot.com/UA-40522413-9/xGallerify/readme)](https://github.com/xremix/xGallerify)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxremix%2Fxgallerify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxremix%2Fxgallerify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxremix%2Fxgallerify/lists"}