owlsomely / angular-image-zoom Goto Github PK

View Code? Open in Web Editor NEW

40.0 3.0 23.0 3.7 MB

Native AngularJs Directive that provide image hover zoom feature

Home Page: http://owlsomely.github.io/angular-image-zoom/

License: MIT License

JavaScript 99.87% CSS 0.11% HTML 0.02%

angular-image-zoom's Introduction

Angular Image Zoom

A native angular.js diretive that provide basic image-hover-zoom feature like jQuery's CloudZoom

Created for http://owl.gift

Size

JS: min: 3,015 B
CSS: 650 B
Template: 148 B

Demo

http://owlsomely.github.io/angular-image-zoom/

Usage

include the image-zoom as a dependency for your app.
```
angular.module('myApp', ['ImageZoom']);
```
include the supplied CSS file (or create your own).
add image-zoom element

<div image-src="./Pevensey_castle-09.jpg" image-zoom></div>

Alternate Template URL

<div image-src="./Pevensey_castle-09.jpg" image-zoom data-template-url="/assets/my-image-template.html"></div>

configuration attributes

zoom-factor (defaults to 1.5): Sets how much zoom will be applied to the image. It’s a multiplier for image display size.
Example:
```
<div image-src="./Pevensey_castle-09.jpg" image-zoom zoom-factor="2">
```
background-color (defaults to 'transparent'): Sets the background color for the magnifying glass.
Example:

<div image-src="./Pevensey_castle-09.jpg" image-zoom background-color="'#FFFFFF'">

max-width and max-height: If at least one of the two values is set, image size will be calculated to fit maintaining its aspect ratio. If only one of the two is set, the other will be set with image’s natural width/height. Example:
```
<div image-src="./Pevensey_castle-09.jpg" image-zoom max-width="300" max-height="250">
```
position-absolute: If attribute is set to true, magnifying glass position will take page scrolling in account. This feature is intended for using the plugin within an absolute positioned element. Example:
```
<div image-src="./Pevensey_castle-09.jpg" image-zoom position-absolute="true">
```

optional Switch Images (refer to the demo):

<body ng-app="ImageZoomExample" ng-controller="ExampleCtrl">
  <div class="container">
    <h1>Angular Image Zoom Demo</h1>
    <div class="thumbnail" style="width: 400px;">
      <div image-src="./Pevensey_castle-09.jpg" image-zoom>
      </div>
      </div>
      <h2>Switch Images</h2>
      <div class="row thumbnails">
        <div class="col-xs-4">
          <a ng-click="switchImage('Pevensey_castle-09.jpg')" class="thumbnail product-image">
            <img src="320px-Pevensey_castle-09.jpg" alt="wooops" />
          </a>
        </div>
        <div class="col-xs-4">
          <a ng-click="switchImage('Pevensey_Castle_exterior.jpg')" class="thumbnail product-image">
            <img src="320px-Pevensey_Castle_exterior.jpg" alt="woops" />
          </a>
        </div>
      </div>
  </div>
</body>

Contributing

npm install

Run Local Server

grunt dev

Build

grunt build

Authors

Chen Liang

and contributors

References:

Inspired by https://github.com/jotielim/ng-magnify

License:

Licensed under the MIT license

angular-image-zoom's People

Contributors

Stargazers

Watchers

angular-image-zoom's Issues

Demo is broken on chrome windows

can't view the demo

Toggle enabling feature

Is there any way this supports toggling the imagezoom enable/disable?

Bower Requires release tag, move template inside directive file

Hello There!

It would be great if you could add a git tag for this project following semver conventions (v$MAJOR_RELEASE_NUMBER.$MINOR_REALSE_NUMBER.$PATCH_NUMBER).

Something as simple as

git tag -a v0.1.0 -m "Initial release"
git push origin v0.1.0

Would suffice. However, one thing you'd likely want to change is the templateUrl reference in your directive, as most folks won't probably want to serve the template from their server root.

I would probably just include the template in the directive since its reasonably small, and not have it in its own file

  template: ['<div class="image-zoom">',
      '<div class="image-zoom-lens" data-ng-style="getLensStyle()"></div>',
      '<img class="image" ng-src="{{ imageSrc }}"/>',
    '</div>'].join('');

I'd be happy to submit a pull request if you like for the directive change, but the tagging you'd have to do yourself as the repo owner

Thanks very much! Hope finishing the bower publishing will help the success of your library :)

Zoom is not working on http://owlsomely.github.io/angular-image-zoom/

Root cause appears to be this ,

Refused to execute script from 'https://raw.githubusercontent.com/owlsomely/angular-image-zoom/master/dist/image-zoom.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Can we support mobile?

This zoom feature only works on mouse hover. Is there a way to make this support on mouse drag so it can work with mobile devices?

offsetLeft and offsetTop are incorrectly calculated

Please change the line 236 in the file image-zoom.js

from this
if (el) {
to this
while (el) {

to correct the issue,

thanks in advance and sorry for my bad english

Just a spell detail in the readme

on Usage change:

angular.module('myApp', ['ImageZoom']);

angular.module('myApp', ['imageZoom']);

Add the feature to dynamically provide zoom level

I'm working on a project where we have the requirement to allow user to provide zoom level - for example 2x, 4x... etc. I think it would be interesting addition to this directive.

jQuery issue

We see a jquery issue while using the maginify code -

jQuery.extend.style @ jquery.js:6153
(anonymous function) @ jquery.js:6315
access @ jquery.js:3628
access @ jquery.js:3599
jQuery.fn.extend.css @ jquery.js:6298
(anonymous function) @ magnify.js:56
jQuery.event.dispatch @ jquery.js:4737
jQuery.event.add.elemData.handle @ jquery.js:4549

Not sure if this is easy to tell why this is happening, but if there is anything known about this, it will be helpful.

Thanks!