{"id":17290650,"url":"https://github.com/nzbin/magnify","last_synced_at":"2025-04-05T12:04:48.958Z","repository":{"id":27494286,"uuid":"111287948","full_name":"nzbin/magnify","owner":"nzbin","description":"🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!","archived":false,"fork":false,"pushed_at":"2023-12-20T08:34:12.000Z","size":1665,"stargazers_count":194,"open_issues_count":3,"forks_count":58,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-12-25T14:16:14.694Z","etag":null,"topics":["draggable","image-gallery","jquery","lightbox","magnify","modal","photoviewer","resizable","responsive","zoomable"],"latest_commit_sha":null,"homepage":"https://nzbin.github.io/magnify/","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/nzbin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":"magnify","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-11-19T11:14:58.000Z","updated_at":"2024-03-29T13:38:22.000Z","dependencies_parsed_at":"2023-12-28T00:26:52.253Z","dependency_job_id":null,"html_url":"https://github.com/nzbin/magnify","commit_stats":{"total_commits":277,"total_committers":4,"mean_commits":69.25,"dds":0.03971119133574008,"last_synced_commit":"44650c3ea0cdd33ba5696785d3468d94f98d9ec7"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fmagnify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fmagnify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fmagnify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fmagnify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nzbin","download_url":"https://codeload.github.com/nzbin/magnify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246174599,"owners_count":20735417,"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":["draggable","image-gallery","jquery","lightbox","magnify","modal","photoviewer","resizable","responsive","zoomable"],"created_at":"2024-10-15T10:38:45.990Z","updated_at":"2025-04-05T12:04:48.940Z","avatar_url":"https://github.com/nzbin.png","language":"JavaScript","readme":"\u003e [!WARNING]\n\u003e This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To improve the plugin's flexibility, I made another repository [PhotoViewer](https://github.com/nzbin/photoviewer) which is the enhanced version of Magnify.\n\n# Magnify\n\n[![Travis](https://img.shields.io/travis/nzbin/magnify.svg)](https://travis-ci.org/nzbin/magnify)\n[![npm](https://img.shields.io/npm/v/jquery.magnify.svg)](https://www.npmjs.com/package/jquery.magnify)\n[![Bower](https://img.shields.io/bower/v/jquery.magnify)](https://github.com/nzbin/magnify)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/nzbin/magnify/blob/master/LICENSE)\n[![Financial Contributors on Open Collective](https://opencollective.com/magnify/all/badge.svg?label=financial+contributors)](https://opencollective.com/magnify)\n\nMagnify is a jQuery plugin to view images just like in windows.\n\n[[ website ]](https://nzbin.github.io/magnify/)\n\n## Features\n\n- Modal draggable\n- Modal resizable\n- Modal maximizable\n- Image movable\n- Image zoomable\n- Image rotatable\n- Keyboard control\n- Fullscreen showing\n- Multiple instances\n- Browser support IE7+\n- RTL support\n\n## Installation\n\nYou can install the plugin via npm\n\n```sh\n$ npm install jquery.magnify --save\n```\n\nor via bower\n\n```sh\n$ bower install jquery.magnify --save\n```\n\n## Usage\n\n### 1.Include files\n\nThe usage of magnify is very simple.\n\n```html\n\u003clink href=\"/path/to/magnify.css\" rel=\"stylesheet\" /\u003e\n\n\u003cscript src=\"/path/to/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/jquery.magnify.js\"\u003e\u003c/script\u003e\n```\n\nThe icons in magnify use svg default, you can customize them in options.\n\n### 2.Html structure\n\nThe default structure as below:\n\n```html\n\u003ca data-magnify=\"gallery\" href=\"big-1.jpg\"\u003e\n  \u003cimg src=\"small-1.jpg\" /\u003e\n\u003c/a\u003e\n\u003ca data-magnify=\"gallery\" href=\"big-2.jpg\"\u003e\n  \u003cimg src=\"small-2jpg\" /\u003e\n\u003c/a\u003e\n\u003ca data-magnify=\"gallery\" href=\"big-3.jpg\"\u003e\n  \u003cimg src=\"small-3.jpg\" /\u003e\n\u003c/a\u003e\n```\n\nor\n\n```html\n\u003cimg data-magnify=\"gallery\" data-src=\"big-1.jpg\" src=\"small-1.jpg\" /\u003e\n\u003cimg data-magnify=\"gallery\" data-src=\"big-2.jpg\" src=\"small-2.jpg\" /\u003e\n\u003cimg data-magnify=\"gallery\" data-src=\"big-3.jpg\" src=\"small-3.jpg\" /\u003e\n```\n\nAll structures above have optional attributes as below:\n\n- Add a `data-src` attribute to link big image if you do not want to use a `\u003ca\u003e ` tag. If you use it in a `\u003ca\u003e` tag, it will override the image link in `href` attribute.\n- Add a `data-caption` attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the `title` option `true`.\n- Add a `data-group` attribute if you want to set the images in groups.\n\n### 3.Call plugin\n\nIf you add a `data-magnify` attribute, you can write none of js.\n\nOf course, you can use selector to call the plugin as following code:\n\n```js\n$(\"[data-magnify=gallery]\").magnify();\n```\n\n## Options\n\n- **draggable** `true`\n  \u003e If ture, it allow modal dragging.\n- **resizable** `true`\n  \u003e If ture, it allow modal resizing.\n- **movable** `true`\n  \u003e If ture, it allow image moving.\n- **keyboard** `true`\n\n  \u003e If ture, it allow keyboard control. It is similar to Windows photo viewer.\n\n  - \u003ckbd\u003e←\u003c/kbd\u003e prev image\n  - \u003ckbd\u003e→\u003c/kbd\u003e next image\n  - \u003ckbd\u003e+\u003c/kbd\u003e zoom in image\n  - \u003ckbd\u003e-\u003c/kbd\u003e zoom out image\n  - \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003e0\u003c/kbd\u003e image autual size\n  - \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003e,\u003c/kbd\u003e rotate image left\n  - \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003e.\u003c/kbd\u003e rotate image right\n  - \u003ckbd\u003eQ\u003c/kbd\u003e close the Magnify modal\n\n- **title** `true`\n\n  \u003e If ture, it will show image title on header.\n\n- **fixedModalSize** `false`\n\n  \u003e If false, the modal init size will fit to image size.\n  \u003e\n  \u003e If true, the modal init size will be set with `modalWidth` and `modalHeight`.\n\n- **modalWidth** `320`\n\n  \u003e The modal min width.\n\n- **modalHeight** `320`\n\n  \u003e The modal min height.\n\n- **gapThreshold** `0.02`\n\n  \u003e There will have a gap if modal too big to beyond the browser.\n\n- **ratioThreshold** `0.01`\n\n  \u003e Image zoom ratio threshold.\n\n- **minRatio** `0.05` (5%)\n\n  \u003e The min ratio to show image.\n\n- **maxRatio** `16` (1600%)\n\n  \u003e The max ratio to show image.\n\n- **icons**\n\n  \u003e You can customize the icons in following key.\n\n  - **minimize** `svg`\n\n  - **maximize** `svg`\n\n  - **close** `svg`\n\n  - **zoomIn** `svg`\n\n  - **zoomOut** `svg`\n\n  - **prev** `svg`\n\n  - **next** `svg`\n\n  - **fullscreen** `svg`\n\n  - **actualSize** `svg`\n\n  - **rotateLeft** `svg`\n\n  - **rotateRight** `svg`\n\n- **headerToolbar** `['maximize','close']`\n\n  \u003e The buttons display in header toolbar.\n\n- **footerToolbar** `['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']`\n\n  \u003e The buttons display in footer toolbar.\n\n- **fixedContent** `true`\n\n  \u003e If true, the content will be fixed.\n\n- **i18n**\n\n  \u003e You can customize the buttons title in following key.\n\n  - **minimize** `minimize`\n\n  - **maximize** `maximize`\n\n  - **close** `close`\n\n  - **zoomIn** `zoom-in`\n\n  - **zoomOut** `zoom-out`\n\n  - **prev** `prev`\n\n  - **next** `next`\n\n  - **fullscreen** `fullscreen`\n\n  - **actualSize** `actual-size`\n\n  - **rotateLeft** `rotate-left`\n\n  - **rotateRight** `rotate-right`\n\n- **initMaximized** `false`\n\n  \u003e If false, the modal size will be set of image size or what you set.\n  \u003e\n  \u003e If true, the modal size will be set maximized when init.\n\n- **multiInstances** `true`\n\n  \u003e If true, it allow multiple instances.\n\n- **initEvent** `click`\n\n  \u003e The event to init plugin. Another value is `dblclick`.\n\n- **initAnimation** `true`\n\n  \u003e If false, it will not have animation at plugin's init.\n\n- **fixedModalPos** `false`\n\n  \u003e if true, the modal position will be fixed when change images.\n\n- **zIndex** `1090`\n\n  \u003e The modal style of z-index, it is useful with multiple instances.\n\n- **dragHandle** ` `\n\n  \u003e The handle of draggable.\n\n- **progressiveLoading** `true`\n\n  \u003e If true, the image will be rendered progressively.\n\n- **customButtons** `{}`\n\n  ```js\n  $(\"[data-magnify=gallery]\").magnify({\n    footerToolbar: [...\"myCustomButton\"],\n    customButtons: {\n      myCustomButton: {\n        text: \"custom!\",\n        title: \"custom!\",\n        click: function (context, e) {\n          alert(\"clicked the custom button!\");\n        },\n      },\n    },\n  });\n  ```\n\n  Each `customButton` entry accepts the following properties:\n\n  - `text` - the text to be display on the button itself.\n\n  - `title` - the title to be display when hover the button.\n\n  - `click` - a callback function that is called when the button is clicked.\n\n## Events\n\nYou can define callbacks in `callbacks` option. In each callback you can get the `Magnify` instance with `this` or `context`.\n\n```js\n$(\"[data-magnify=gallery]\").magnify({\n  callbacks: {\n    beforeOpen: function (context) {\n      // Will fire before modal is opened\n    },\n    opened: function (context) {\n      // Will fire after modal is opened\n    },\n    beforeClose: function (context) {\n      // Will fire before modal is closed\n    },\n    closed: function (context) {\n      // Will fire after modal is closed\n    },\n    beforeChange: function (context, index) {\n      // Will fire before image is changed\n      // The argument index is the current image index of image group\n    },\n    changed: function (context, index) {\n      // Will fire after image is changed\n      // The argument index is the next image index of image group\n    },\n  },\n});\n```\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/nzbin/magnify/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/magnify/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/magnify/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/magnify\"\u003e\u003cimg src=\"https://opencollective.com/magnify/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/magnify/contribute)]\n\n\u003ca href=\"https://opencollective.com/magnify/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/magnify/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/magnify/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\nMIT License\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n","funding_links":["https://opencollective.com/magnify","https://opencollective.com/magnify/contribute","https://opencollective.com/magnify/organization/0/website","https://opencollective.com/magnify/organization/1/website","https://opencollective.com/magnify/organization/2/website","https://opencollective.com/magnify/organization/3/website","https://opencollective.com/magnify/organization/4/website","https://opencollective.com/magnify/organization/5/website","https://opencollective.com/magnify/organization/6/website","https://opencollective.com/magnify/organization/7/website","https://opencollective.com/magnify/organization/8/website","https://opencollective.com/magnify/organization/9/website"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzbin%2Fmagnify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnzbin%2Fmagnify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzbin%2Fmagnify/lists"}