{"id":13547897,"url":"https://github.com/davidecalignano/MediumLightbox","last_synced_at":"2025-04-02T20:31:07.456Z","repository":{"id":28304226,"uuid":"31816887","full_name":"davidecalignano/MediumLightbox","owner":"davidecalignano","description":"Nice and elegant way to add zooming functionality for images, inspired by medium.com","archived":false,"fork":false,"pushed_at":"2019-06-05T12:40:21.000Z","size":1993,"stargazers_count":661,"open_issues_count":4,"forks_count":67,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-07T23:51:37.840Z","etag":null,"topics":["image","javascript","lightbox","modal","plugin","zoom"],"latest_commit_sha":null,"homepage":null,"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/davidecalignano.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-03-07T15:47:38.000Z","updated_at":"2025-01-28T09:55:33.000Z","dependencies_parsed_at":"2022-08-31T00:00:57.956Z","dependency_job_id":null,"html_url":"https://github.com/davidecalignano/MediumLightbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidecalignano%2FMediumLightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidecalignano%2FMediumLightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidecalignano%2FMediumLightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidecalignano%2FMediumLightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidecalignano","download_url":"https://codeload.github.com/davidecalignano/MediumLightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246887914,"owners_count":20850163,"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":["image","javascript","lightbox","modal","plugin","zoom"],"created_at":"2024-08-01T12:01:02.843Z","updated_at":"2025-04-02T20:31:02.441Z","avatar_url":"https://github.com/davidecalignano.png","language":"HTML","readme":"MediumLightbox\n=============\n\n#### Nice and elegant way to add zooming functionality for images, inspired by medium.com\n\nThis plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.\n* **It works on mobile**, unlike [Medium](https:/medium.com).\n* **It's simple**, unlike [Fluidbox](http://terrymun.github.io/Fluidbox/).\n\n##### Key features\nWritten in pure javascript for better performance, lightweight and simple. [View demo](http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html).\n##### Use\n\n**Include**\n\n    \u003clink href=\"style.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"mediumLightbox.js\" \u003e\u003c/script\u003e\n**Style.css** has some extra style for demo purposes. Pick just what you need.\n\n**html**\n\n    \u003cfigure class=\"half left zoom-effect\"\u003e\n        \u003cdiv class=\"aspectRatioPlaceholder\" \u003e\n            \u003cdiv class=\"aspect-ratio-fill\" style=\"padding-bottom: 50%;\"\u003e\u003c/div\u003e\n            \u003cimg class=\"img\" data-width=\"900\" data-height=\"450\" src=\"image.jpg\"\u003e\n        \u003c/div\u003e\n    \u003c/figure\u003e\n    \nTo do some calculations some attributes are necessary:\n* **data-width**: the real width of the image.\n* **data-height**: the real height of the image.\n* To the div with **aspect-ratio-fill** class is applied a padding-bottom that is the aspect ratio of the image. \nThe aspect ratio percentage is found with [(height/width)*100] formula.\n\n**Initialize plugin**\n\n\tMediumLightbox('figure.zoom-effect');\n#### Option\n\n    MediumLightbox('figure.zoom-effect', {\n        margin:40\n    });\n* **Margin** - default: 20 - Margin in px applied to the image in zoomed view.\n\n\n#### Preview | [Live demo](http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html)\n![alt text](http://davidecalignano.it/project/files/medium-lightbox/medium-lightbox-demo.gif \"Demo\")\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidecalignano%2FMediumLightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidecalignano%2FMediumLightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidecalignano%2FMediumLightbox/lists"}