Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/workarea-commerce/workarea-jquery-magnify
https://github.com/workarea-commerce/workarea-jquery-magnify
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/workarea-commerce/workarea-jquery-magnify
- Owner: workarea-commerce
- License: other
- Created: 2019-11-12T21:19:47.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-03T16:50:41.000Z (almost 5 years ago)
- Last Synced: 2024-10-18T18:59:42.674Z (2 months ago)
- Language: Ruby
- Size: 88.9 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
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 Magnify
================================================================================
Note: This work is in progress and part of the workarea-zoom plugin.
About
--------------------------------------------------------------------------------
Jquery Magnify let your user enlarge images on mouseover, it's a great candidate for non-touch enabled devices with a small support for touch-enabled devices.
If you are looking for a better experience on touch-enabled devices, you should check out: https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-zoom/browse.
Getting Started
--------------------------------------------------------------------------------
Add the gem to your application's Gemfile:
# ...
gem 'workarea-jquery_magnify'
# ...
This Gem will mount the jquery.magnify asset in your application.
Example
--------------------------------------------------------------------------------
```html
```
```css
.magnify {
width: 320px;
}
.magnify__container {
position: relative;
}
.magnify__image{
display: block;
width: 100%;
min-width: 100%;
}
```
```javascript
$(document).ready(function() {
$('.magnify__container').magnify();
});
```
Options
--------------------------------------------------------------------------------
You have the ability to pass your options like this:
```javascript
$('.magnify').magnify({
url: null,
touchSupport: false
});
```
Different options are available:
Name | Default | Description
------------- | ------------- | -------------
touchSupport | ```false``` | Enable/Disable finger gestures on touch-enabled devices
url | ```null``` | The url of the big magnify image, if not defined, jquery.magnify will fetch the attribute ```data-magnify-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
$('.magnify__container').magnify();
// Remove instance
$('.magnify__container').trigger('magnify.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)