https://github.com/bloomscorp/bmx-zoomify
Angular library to zoom / magnify images on hover.
https://github.com/bloomscorp/bmx-zoomify
angular angularlibrary bmx-zoomify hover-effects typescript zoom-images
Last synced: 10 days ago
JSON representation
Angular library to zoom / magnify images on hover.
- Host: GitHub
- URL: https://github.com/bloomscorp/bmx-zoomify
- Owner: bloomscorp
- Created: 2023-04-30T07:02:30.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T14:00:40.000Z (about 1 year ago)
- Last Synced: 2025-10-25T08:44:59.251Z (3 months ago)
- Topics: angular, angularlibrary, bmx-zoomify, hover-effects, typescript, zoom-images
- Language: TypeScript
- Homepage:
- Size: 412 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bmx-zoomify
The `bmx-zoomify` package is a simple and lightweight npm package that enables magnifying images on hover. It can be easily integrated into any angular application.
## Installation
To install the `bmx-zoomify` package, you can use npm:
```bash
npm i bmx-zoomify
```
or
```bash
npm i bmx-zoomify --force
```
## Usage
To use the `bmx-zoomify` package, you need to add the `bmx-zoomify` tag your HTML document:
```html
```
## src Input
The `bmx-zoomify` package comes with some default interfaces. You need provide the src to render the image.
Note: `width` and `height` attributes are optional
```typescript
import {BmxZoomifyImage} from "./bmx-zoomify-image";
let src: BmxZoomifyImage = {
url: 'image.jpg', //image url from assets folder or CDN
altText: '' //alt Text for SEO
};
```
or
```typescript
import {BmxZoomifyImage} from "./bmx-zoomify-image";
let src: BmxZoomifyImage = {
url: 'image.jpg', //image url from assets folder or CDN
altText: '', //alt Text for SEO
width: '500',
height: '500' //provide height and width for image optimisation
};
```
You can customize the image size by providing your own CSS styles or Tailwind.
```html
```
or
```html
```
or
```html
```
```css
.zoom-style {
width: 330px;
height: 250px;
}
```
## Compatibility
The `bmx-zoomify` package works in all modern browsers, including Chrome, Firefox, Safari, and Edge. It may not work in older browsers that do not support CSS variables or CSS transforms.
## License
The `bmx-zoomify` package is released under the MIT License.