{"id":20812484,"url":"https://github.com/payalord/xzoom","last_synced_at":"2025-04-05T14:09:12.199Z","repository":{"id":41162047,"uuid":"85008691","full_name":"payalord/xZoom","owner":"payalord","description":"jQuery Zoom Gallery plugin","archived":false,"fork":false,"pushed_at":"2021-05-08T21:17:19.000Z","size":1718,"stargazers_count":166,"open_issues_count":3,"forks_count":64,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-29T13:07:15.935Z","etag":null,"topics":["gallery","image","jquery","jquery-plugin","zoom"],"latest_commit_sha":null,"homepage":"https://payalord.github.io/xZoom/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/payalord.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":"2017-03-14T23:50:43.000Z","updated_at":"2025-02-17T02:28:50.000Z","dependencies_parsed_at":"2022-08-30T18:21:53.088Z","dependency_job_id":null,"html_url":"https://github.com/payalord/xZoom","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payalord%2FxZoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payalord%2FxZoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payalord%2FxZoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/payalord%2FxZoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/payalord","download_url":"https://codeload.github.com/payalord/xZoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345854,"owners_count":20924102,"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":["gallery","image","jquery","jquery-plugin","zoom"],"created_at":"2024-11-17T20:54:44.041Z","updated_at":"2025-04-05T14:09:12.176Z","avatar_url":"https://github.com/payalord.png","language":"JavaScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=ASVGPLVSMYY6U"],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/payalord/xZoom.svg?branch=master)](https://travis-ci.org/payalord/xZoom) [![npm](https://img.shields.io/npm/v/xzoom.svg)](https://www.npmjs.com/package/xzoom) [![GitHub license](https://img.shields.io/badge/license-Apache%202-blue.svg)](https://raw.githubusercontent.com/payalord/xZoom/master/LICENSE) [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=ASVGPLVSMYY6U) [![Donate Bitcoin](https://img.shields.io/badge/Donate-Bitcoin-orange.svg)](https://payalord.github.io/xZoom/donate-bitcoin/?amount=5\u0026currency=USD)\n\n# xZoom\n\njQuery Zoom Gallery plugin.\n* Supports jQuery starting from version 1.2.6.\n* A lof of options, effects and easy to use and customize\n* Lightweight ~14kb minified version.\n* You can load low and high res images separately.\n* Supports IE6+, Chrome, FireFox, Opera, Safari, Android, iOS\n* Supports Responsive output.\n* Have an API to integrate with other useful plugins like [FancyBox](http://www.fancyapps.com/fancybox/), [Magnific PopUp](http://dimsemenov.com/plugins/magnific-popup/) and [HammerJS](http://hammerjs.github.io/).\n\n# Installation\n\nUse one of the following methods:\n* `git clone git@github.com:payalord/xZoom.git`\n* `git clone https://github.com/payalord/xZoom.git`\n* `npm install xzoom`\n* `bower install xzoom`\n* [Download zip](https://github.com/payalord/xZoom/archive/master.zip)\n* Use CDN:\n  * `https://unpkg.com/xzoom/dist/xzoom.min.js`\n  * `https://unpkg.com/xzoom/dist/xzoom.css`\n\n# Quick Start\n\n### Step 1:\n1. Copy `xzoom.min.js` or `xzoom.js` file into your javascript folder.\n2. Copy `xzoom.css` file into your css folder, or copy the content of the `xzoom.css` file into your site style sheet.\n3. Copy `example/images/xloading.gif` to your images folder.\n\n### Step 2:\nThis goes into your site's Header Section:\n```javascript\n\u003c!-- get jQuery from the google apis or use your own --\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- CSS STYLE--\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/xzoom.css\" media=\"all\" /\u003e\n\n\u003c!-- XZOOM JQUERY PLUGIN  --\u003e\n\u003cscript type=\"text/javascript\" src=\"js/xzoom.min.js\"\u003e\u003c/script\u003e\n```\n\n### Step 3:\nAdd xZoom markup into your HTML:\n```javascript\n\u003cimg class=\"xzoom\" src=\"path/to/preview_image_01.jpg\" xoriginal=\"path/to/original_image_01.jpg\" /\u003e\n\n\u003cdiv class=\"xzoom-thumbs\"\u003e\n  \u003ca href=\"path/to/original_image_01.jpg\"\u003e\n    \u003cimg class=\"xzoom-gallery\" width=\"80\" src=\"path/to/thumbs_image_01.jpg\"  xpreview=\"path/to/preview_image_01.jpg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"path/to/original_image_02.jpg\"\u003e\n    \u003cimg class=\"xzoom-gallery\" width=\"80\" src=\"path/to/preview_image_02.jpg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"path/to/original_image_03.jpg\"\u003e\n    \u003cimg class=\"xzoom-gallery\" width=\"80\" src=\"path/to/preview_image_03.jpg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"path/to/original_image_04.jpg\"\u003e\n    \u003cimg class=\"xzoom-gallery\" width=\"80\" src=\"path/to/preview_image_04.jpg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\n\n### Step 4:\nInitialize the plugin in \"document ready\" section of your javascript or at the end before `\u003c/body\u003e`:\n```javascript\n/* calling script */\n$(\".xzoom, .xzoom-gallery\").xzoom({tint: '#333', Xoffset: 15});\n```\n\nEnjoy xZoom experience!\n\n# Documentation\nFor full list of options and how to setup, customize and work with xZoom plugin please read the [manual](doc/manual.md).\n\n# More Examples\nFor more examples please check [xZoom Sandbox](https://github.com/payalord/xzoom-sandbox)\n\n# Donate\nIf you liked the plugin and want to say thanks or want to help us make it better - feel free to make a donation ;)  \n\n### PayPal:\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=ASVGPLVSMYY6U)\n### Bitcoin:\n[![Donate Bitcoin](https://payalord.github.io/xZoom/donate-bitcoin/btc-donate-button.png)](https://payalord.github.io/xZoom/donate-bitcoin/?amount=5\u0026currency=USD)\n\n# License\n[Apache License 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpayalord%2Fxzoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpayalord%2Fxzoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpayalord%2Fxzoom/lists"}