Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/workarea-commerce/workarea-jquery-zoom
https://github.com/workarea-commerce/workarea-jquery-zoom
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/workarea-commerce/workarea-jquery-zoom
- Owner: workarea-commerce
- License: other
- Created: 2019-11-12T20:24:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:52:47.000Z (almost 2 years ago)
- Last Synced: 2024-10-09T09:26:30.305Z (3 months ago)
- Language: Ruby
- Size: 804 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Workarea Jquery Zoom
================================================================================
Note: This work is in progress and part of the workarea-zoom plugin.
About
--------------------------------------------------------------------------------
Jquery Zoom add image zoom capabilities on touch enabled devices and is a great candidate for phone/tablet devices.
Getting Started
--------------------------------------------------------------------------------
Add the gem to your application's Gemfile:
# ...
gem 'workarea-jquery_zoom'
# ...
Example
--------------------------------------------------------------------------------
```html
```
```css
.zoom {
width: 320px;
}
.zoom__container {
position: relative;
}
.zoom__image {
display: block;
width: 100%;
min-width: 100%;
}
```
```javascript
$(document).ready(function() {
$('.zoom__container').zoom();
});
```
Options
--------------------------------------------------------------------------------
You have the ability to pass your options like this:
```javascript
$('.zoom__container').zoom({
lazyLoad: true,
deltaScale: 0.05,
url: null
});
```
Different options are available:
Name | Default | Description
------------- | ------------- | -------------
lazyLoad | ```true``` | If set to true, jquery.zoom will lazy load the zoom image when the user clicks for the first time on the container
deltaScale |``` 0.05``` | What is the increment scale you want to use when scale up/down
url | ```null``` | The url of the zoom image, if not defined, jquery.zoom will fetch the attribute ```data-zoom-src```given.
Events
--------------------------------------------------------------------------------
You can destroy the widget for the instance given, it's helpful when you want to go back to a clean state.
```javascript
// Create instance
$('.zoom__container').zoom();
// Remove instance
$('.zoom__container').trigger('zoom.destroy');
```
Workarea Commerce Documentation
--------------------------------------------------------------------------------
See [https://developer.workarea.com](https://developer.workarea.com) for Workarea Commerce documentation.
License
--------------------------------------------------------------------------------
Workarea Styled Selects is released under the [Business Software License](LICENSE)