strawdynamics / drift Goto Github PK

Hi everybody,

it seems, that the api-functions provided by drift.js are not packed in the current drift.min.js (1.3.1)

            var trigger = document.querySelector('.my-selector');
            var drift = new Drift(trigger, {
                paneContainer: document.getElementById('zoom-area')
            });
            drift.destroy();

exception: drift.destroy is not a function

I installed through bower and also directly download the repository. The methods enable(), disable(), destroy(), setZoomImageURL() do not reside in the minified version 1.3.1.

What am I missing?

Thanks a lot and all the best from here.
Hube

There should be a way to have a visual bounding box on the image when hovering.

Hey there,

there is a problem with drift, if it is used inside a container wrapper with position:fixed, for example a modal dialog.

Problem appears on IE11.

I have created an isolated test case:

http://codepen.io/PhilippSchreiber/pen/ozrByw

Any idea, how to fix this?

Thanks for putting this out there. It is working really well for my clients.

Right now the zoomPane is triggered immediately on a mouseenter event. This can be a little disconcerting if the user is just moving past the trigger element and the mouse happens to touch it.

I would like to have an option to 'debounce' the zoom so that the mouse has to both enter and stay in the trigger element for a configurable time before the zoom pane is actually triggered.

currently I have only seen the option for disabling the trigger to show the zoom pane. The resulting behaviour is that even after the trigger is disabled the zoom pane does not disappear if active. So, one might need to programmatically hide/remove the zoom pane.
After going through your code I was able to do the same like this :

var drift = new Drift(document.querySelector("img"), {
  inlinePane : true,
  paneContainer: document.querySelector("p")
});
// disabling trigger and hiding/removing the zoom pane
drift.disable();
drift.zoomPane.hide();

Please let me know if there is a better way or we could expose the hide method in the drift instance in a proper way

Before you submit:

• [ ✔] Please search through the existing issues (both open AND closed) to see if your issue has been discussed before. Github issue search can be used for this: https://github.com/imgix/drift/issues?utf8=%E2%9C%93&q=is%3Aissue
• [✔ ] Please ensure the problem has been isolated and reduced. This link explains more: http://css-tricks.com/6263-reduced-test-cases/

Describe the bug
Using import Drift from 'drift-zoom'; works fine in nuxt.js.
Here is the complete code and a screenshot.

<script type="text/javascript">
import Drift from 'drift-zoom';
 export default{
 mounted(){
    	var demoTrigger = document.querySelectorAll('.demo-trigger');
  		var paneContainer = document.querySelector('.detail');

      	for (var i = 0, len = demoTrigger.length; i < len; i++) {

  		      	new Drift(demoTrigger[i], {
      				  paneContainer: paneContainer,
      				  inlinePane: false
      				});
  			}
  }
</script>

But when I used the

if (process.browser) {
  Drift = require.resolve('drift-zoom');
}

This is the result..

The problem in nuxt.js is when you reload it will give first window or document undefined?. Reference for adding nuxt.js https://nuxtjs.org/faq/window-document-undefined/

Here is the screenshot when reload.

Below is the code to implement.

let Drift;
if (process.browser) {
  Drift = require.resolve('drift-zoom');
}

I search it here #39 but it seems it doesn't work.

let Drift;
if (process.browser) {
  Drift = require('drift-zoom/dist/Drift.min.js')
}

I can't demonstrate it in the codepen because it's a Server Side Rendering.

Steps to reproduce the behaviour:

Expected behaviour
Using import Drift from 'drift-zoom'; works fine but when reload it will give you document is undefined...
Using Drift = require.resolve('drift-zoom'); doesn't work as it gives you error Drift is not a constructor

Information:

• drift version: [e.g. v1.3.0]
  -Nuxt.js 1.4.0

I try zoom with aspect ratio, but have - http://i.imgur.com/ZKwIr3w.png
Then I can move the zoom in height only.

How do I do that the image has been full width?

Hi! Is there any option for disabling Drift on say a mobile device or smaller screen? Thanks in advance!

Problem
At first moment when zoomer appears, zoomed image inside has wrong position or invisible. When cursor moves along, zoomer works fine.

Reproduce

1. Go to https://juliapomoshko.com/en/store/coat-grey-long-with-belt
2. Hover your cursor over image with a fast move and stop.

Additional context
I use drift-zoom inside of vue.js component. Version with the issue is 1.3. And 1.2 works fine (but has iOS bug, so I can't use it instead).

Hi,

I am getting the below error in console while using drift in my page while getting this error hide and show opertion not performed successfully, can you please say the reason why I am getting this error? and I have fixed this temporarily using some code's in Drift.js file, I have mention that fixed code at end of the page.

Drift.js?a306:63 
Uncaught TypeError: Cannot read property 'appendChild' of null
    at BoundingBox.show (eval at <anonymous> (app.js:1656), <anonymous>:63:32)
    at Trigger._show (eval at <anonymous> (app.js:1656), <anonymous>:412:27)
    at HTMLImageElement._handleEntry (eval at <anonymous> (app.js:1656), <anonymous>:393:13)
show @ Drift.js?a306:63
_show @ Drift.js?a306:412
_handleEntry @ Drift.js?a306:393

Drift.js?a306:74 
Uncaught TypeError: Cannot read property 'removeChild' of null
    at BoundingBox.hide (eval at <anonymous> (app.js:1656), <anonymous>:74:34)
    at HTMLImageElement._hide (eval at <anonymous> (app.js:1656), <anonymous>:429:25)

Fixed code:

key: 'show',
    value: function show(zoomPaneWidth, zoomPaneHeight) {
      this.isShowing = true;

      if (this.settings.containerEl != null) {     // I added this condition for check containerEl value
        this.settings.containerEl.appendChild(this.el);
      }

      var style = this.el.style;
      style.width = Math.round(zoomPaneWidth / this.settings.zoomFactor) + 'px';
      style.height = Math.round(zoomPaneHeight / this.settings.zoomFactor) + 'px';
      (0, _dom.addClasses)(this.el, this.openClasses);

key: 'hide',
    value: function hide() {

      if (this.isShowing && this.settings.containerEl != null) {
        this.settings.containerEl.removeChild(this.el);
      }

      this.isShowing = false;
      (0, _dom.removeClasses)(this.el, this.openClasses);
    }

And I have added $('.drift-zoom-pane').show() in mouseOver event call and $('.drift-zoom-pane').hide() mouseLeave event call for manually show and hide the

Is there any way to have the Drift image "grow" from the original, like the way http://fat.github.io/zoom.js/ does?

I have some issues with Safari 8. I found out, that Safari 8 will not support this.imgEl.style.transform = 'translate(${left}px, ${top}px)';. I fixed it with the corresponding this.imgEl.style.webkitTransform = 'translate(${left}px, ${top}px)';.

Also the zoomed pane is not removed after onHide. I haven't found the solution for this though.

Are you interested in support for Safari 8?

Hi,

I recently installed drift-zoom with npm and noticed the module contained 108k+ files. can you move the dependencies to devDependencies or was something else overlooked here?

I noticed that the repo doesn't have a .npmignore file. Maybe including one would solve this issue? Any help or suggestions are appreciated. And if creating a .npmignore is what is needed, I'll be happy to create a PR for it!

The library is awesome, by the way! Very cool and simple to use. Perfect for my project's use-case, but we are trying to move away from bower and unfortunately I'll have to find another library to use if we can't trim down the size of the npm installation.

Thanks.

Is there a way to trigger the zoom for desktop on click instead of on hover?

Hi,

there's an issue of the plugin not being able to properly position the zoom pane on IE 11, because the computation required to assign the top and left values returns NaN.

This can be fixed using window.pageXOffset and window.pageYOffset instead of window.scrollX and window.scrollY. As you can see here, using window.pageXOffset is better for cross-browser compat.

Check out this files: dist/Drift.js and dist/Drift.min.js
As you can see in this diff, something went wrong and contributor @frederickfogerty
commit content of dist/Drift.min.js to dist/Drift.js

Hi there,

I am trying to enable zooming on click, but so far did not succeed. Once I add it to a click event it has to trigger to 'mouseenter' event but when I try to do this using $('.image').trigger('mouseenter'); nothing seems to happen.

I also tried:

drifter = new Drift( this, {
        paneContainer: document.querySelector('.product-images')
});

drifter.trigger._show();
drifter.trigger._handleMovement();

But this gives weird behavior and the destroy() function does not remove the zoom screen anymore.

Any clues how this could be achieved?

Thanks a bunch for a great plugin by the way, have been using it on a lot of projects already!

Please can you update your package.json to point to the distribution transpiled file. This is causing issues when used as an npm package.

-package.json
"main": "dist/Drift.js",

The current 1.3.2 release has the exact same (minified) file for both the minified and non-minified versions:

/dist/drift.js 10.9k
/dist/drift.min.js 10.9k

There is no non-minified version in the dist folder.

I receive the following error when trying to call Drifty's destroy function:

Uncaught TypeError: _this._unbindEvents is not a function

Shouldn't destroy be:

_this.trigger._unbindEvents()

?

I can open a pull request if that is suppose to be the intended function

I get this error when installing drift through bower.

I'm trying to get Drift to work with Ember and am having some success. Since there aren't any page reloads I want to be sure that I am cleaning up all remnants of Drift on transition out of the route that uses it.

Right now I'm doing this:

let drift = New Drift(...);
...
destroyMethod() {
    drift.destroy();
    window.Drift = null;
    drift = null;
}

And that seems to work, but is there anything else I need to address? Perhaps some DOM elements that could potentially be left hanging around?

Thanks for this plugin - I love it!

Hi! I am trying to use this package with Browserify, but I can't really make it work.

The command I am running looks like:
browserify --noparse=drift-zoom example/index.js -o example/build.js -dv

Doing a console.log in browserify shows noParse: [ 'drift-zoom' ].

The error I get looks like:

> browserify --noparse=drift-zoom example/index.js -o example/build.js -dv

Error: Cannot find module './util/dom' from 'c:\x\y\z\node_modules\drift-zoom\dist'
    at c:\x\y\z\node_modules\resolve\lib\async.js:55:21
    at load (c:\x\y\z\node_modules\resolve\lib\async.js:69:43)
    at onex (c:\x\y\z\node_modules\resolve\lib\async.js:92:31)
    at c:\x\y\z\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Any ideas?

I'm seeing the drift-opening and drift-closing classes stuck on the exposed <div class="drift-zoom-pane"/> after hovering out of the element on Safari 9.1 and IE11. Guessing the issue comes down to a non-prefixed animationend event?

With hoverBoundingBox and touchBoundingBox set to true, on hover with the latest version of Drift, I get these error messages, as well as the bounding box not appearing directly over the image:

[Error] TypeError: null is not an object (evaluating 'this.settings.containerEl.appendChild')
    show (app-2622524ee1.js:1927)
    _show (app-2622524ee1.js:2305)
    _handleEntry (app-2622524ee1.js:2290)
[Error] TypeError: null is not an object (evaluating 'this.settings.containerEl.removeChild')
    hide (app-2622524ee1.js:1939)
    _hide (app-2622524ee1.js:2322)

My current settings:

current_drift_instance = new Drift(document.querySelector('#photo-tab img'), {
    paneContainer: document.querySelector('.item-status'),
    inlinePane: 768,
    inlineOffsetY: -75,
    zoomFactor: 5,
    hoverBoundingBox: true,
    touchBoundingBox: true
});

Mac Version 10.11.5
Chrome Version 51.0.2704.84 (64-bit)

To reproduce:

• Browser is windowed
• Navigate to https://imgix.github.io/drift/
• Mouseover zoom pane (works)
• Go full screen
• Mouseover zoom pane (doesn't work)

Notes:

• Also works in reverse (starting full screen and going to windowed mode)
• I've attempted a workaround by destroying the drift instance and re-initializing it, but it only works within a setTimeout call.

Hi,

I get below error when I import/require Draft. Is it possible to run it with Webpack?

Hi Everyone, Firstly I speak little English, sorry....

I have a problem, İt 's work very nice on desktop, but My problem is on mobile.

It looks very small when you hold down the image . Example Link: https://hizliresim.com/VDRZBZ

Before you submit:

• Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/drift/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please take a moment to find out whether your idea fits with the scope and aims of the project

Is your feature request related to a problem? Please describe.
From #61

Can you use export in Drift.js? Mixing module formats causes issues when using webpack to convert modules. The old way didn't present an issue when we used Babel, but webpack appears to be more strict. We switched because webpack can "tree shake" unused modules.

Describe the solution you'd like
Use export default rather than module.exports. The problem with changing the usage right now is that it breaks the UMD build for direct browser sourcing (i.e. window.Drift). Another bundler will have to be used, such as Webpack, to support this.

Describe alternatives you've considered

• Browserify: this tool is currently used but doesn't seem to have a way to support export default in this way.

Checklist:

• I have checked stackoverflow for this bug and there are no answers or the question does not exist
• I have searched through the issue list for related bugs or issues

Describe the bug
When the high-resolution (i.e. image that shows up in the zoom pane) is a lower resolution than the dimensions of the detail pane, panning around the image is jumpy.

To Reproduce

https://codepen.io/imgix/pen/mKWZqq

Steps to reproduce the behaviour:

1. Hover over the top-left corner of the image.
2. Move cursor to the very top-right corner of the image

Expected behaviour
The zoom pane stays in a consistent position when panning around the image.

Screenshots
When cursor is over left side of image:

When cursor is over very right side of image:

Information:

• drift version: v1.2.0
• browser version: whatsmybrowser.org/b/SBFRP96

@athal7 is running into an issue using Drift with his JS build setup. Here's an overview of what he's trying to do, to help me set up a minimal replica:

Webpack compiles an index-style JS file with syntax equivalent to the following:

window.MyNamespace = {};
window.MyNamespace.Legacy = {};

import Drift from 'drift-zoom';

window.MyNamespace.Legacy.Drift = Drift;

This results in a strange object at window.MyNamespace.Legacy.Drift:

Hi everybody,

I need to use drift.js along with a image slider (it is a slick slider).
The current selected slide is shown in an seperate element that is used by drift.

In the slider there can be images with different resolutions. For getting the max zoom factor, I want to calculate the drift zoomFactor dynamically each time the slide changes and want drift to use that current zoomFactor.

I could not find a way to do so other than start a new drift instance every time as slide has changed.
This does not look like a good idea to me.
I am also having trouble with the hoverBoundingBox (each time an instance is created, a new bounding box is created) and updating the pane container (sometimes the pane container updates only, when I mouseout and mousover the trigger element ) ...

So:
Wouldn't it be great to have a method where a single drift instance can be called to reinitialize with a different set of options or a method where I can explicitly set an desired option?

I'll love it ... :-)

Thanks anyway and all the best from here!

Would be easier to find the demo if it were added to the description bar for the repository

Not sure if there is already a way to do this, but I am building an application where I am constantly changing the image that data-zoom is referring to. Essentially zooming on a video and using the screenshots as the zoom source.

Problem I am running into is that every time I have mouseover on the element (video), the zoom image is the screenshot from the time at the start of the mouseover. If I move off the element and come back, the image has been updated.

Setup:

<a data-zoom="image1.jpg" data-trigger="0"><img></a>

<img data-src="Image2.jpg" data-trigger="1">
<img data-src="Image3.jpg" data-trigger="0">
<img data-src="Image4.jpg" data-trigger="1">
<img data-src="Image5.jpg" data-trigger="0">

images with data-trigger on click
replace values
<a data-zoom="this image src" data-trigger="this value"><img src etc></a>

in this case: Image2 + 4 trigger = 1

js:

var driftvar;
if data-trigger = 1 driftvar = new Drift...
else 
driftvar.destroy()

scenario:
On click image2 and this trigger value is 1, Drift works perfect.
On click Image3 and trigger value is 0, Drift destroy works perfect.

But:
click image2 then
click image4 then
click image3 with trigger = 0,
Drift destory no longer works.

destroy only works if, trigger 1 0 1 0 1 0

Thanks for this awesome library, looked awesome and very easy to customize!

I'm encountering a small issue though: I have an image that takes nearly all the screen estate on mobile. The zoom on mobile looks good and works well, but the issue is that I simply can't scroll at all as the touch event is immediately captured to launch the zoom.

Would it be possible to add some smarter detection so that the zoom is only started after a few milli seconds of hold? I've tried the "hoverDelay" but it does not seem to handle this use case.

Thanks :)

Hi, hoping you may be able to help sort an issue out I seem to be having. The documentation says that there is support for the 3 (or 2?) latest browsers, Edge and IE11 would fall into those categories. My issue is on Internet Explorer 11. I'm not sure if the issue is also on Edge.

I'm having an error on my site when activating Drift (the issue is also on the Drift Playground). It states that there is a syntax error on line 1, column 1770 of drift.min.js. Because of this error it fails to load and says Drift is undefined. This would be the latest version of the code as I'd just updated to the latest version from GitHub in hopes of correcting the previous issue I was having. Drift would launch once, but the second time it would throw an error about getWindowRect() or something similar. I had updated hoping it would fix the issue, but now it seems the plugin won't work at all.

Everything works perfectly on Chrome and Firefox, but unfortunately my client requires IE compatibility.

Here's a screenshot of the error that happens. If not in inspector mode the page just simply does nothing when hovering over the image

Screenshot from Drift Playground

Update: I just checked: the issue does not apply to Edge.

Currently we use fadeZoomIn and fadeZoomOut, which could clobber something else. These should be prefixed with drift.

Hi!

If parent of zoom image (up to body) has position: relative we have wrong position of bounding box.

You can see problem here: http://codepen.io/andrey-hohlov/pen/zNENEa

See this codepen https://codepen.io/anon/pen/amxJKX. I added a listener to disable the drift reference when the trigger image is clicked.

When I disable the drift reference while still hovering over the image, the magnified image is still visible until my mouse leaves the trigger image.

Is this expected, and is there a way I can get it to disable right away?

Hi guys, thank you for awesome library!
I have thought and wanna share with you.

• maybe in some scenarios I need border for ZoomPane so I can provide css border properties like: border-width, border-style, border-color to ZoomPane options.

Thank you all!

Hello!

I searched both open and closed issues, probably missed something.

I have a pane container which is positioned absolutely. This container is placed on a div which contains some information about a product, some buttons and other stuff. I need to be able to show the pane container when user hovers a picture, and then hide the container on mouse out.

The problem is, that, I tried to use onShow and onHide events, but in that case bounding-box does not have width and height, and thus I cannot see it at all. I think this happens because when the pane is hidden for some reason bounding-box does not get width/height css attributes.

More details: I use VueJS, and I have

how to use drift in right to left boxes?

or

how to change zoom box position at right?

im using flexbox for layout

        <div class="product-detail__image-main">
            <img src="images/shirt8.jpg" class="demo-trigger" data-zoom="images/shirt9.jpg" alt="6">
        </div>
    
        <div class="product-detail__info main-zoom">
        </div>


         var demoTrigger = document.querySelector('.demo-trigger');
         var paneContainer = document.querySelector('.main-zoom');

         new Drift(demoTrigger, {
         paneContainer: paneContainer,
         inlinePane: false,
         });

Works ok with Firefox, but I would like it to view inside the img tag that it is in, if that is possible?
Does not trigger at all using IE 11.
Also, is it possible to get rid of the large dark box that is around the zoomed image?

Code I'm using:

new Drift(document.querySelector('.ms-microfeed-attachmentImage'), {
   inlinePane: false,
   showWhitespaceAtEdges: true,
   zoomFactor: 1.8
});

I ran it thru a trace and it looks like it crashes on line #796 styleEl.classList.add('drift-base-styles');

I can't get it to actually magnify the image it is hovering over

my options:

const trigger = document.querySelector('.trigger');
new Drift(trigger, {
   inlinePane: true,
   containInline: false,
   sourceAttribute: 'data-zoom'
}); 

trigger and sourceAttribute seem to be working ok but just can't get the magification effect. I've also tried setting zoomFactor: 3 and nothing changed.

any ideas what the problem may be? thanks

• Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/drift/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please take a moment to find out whether your idea fits with the scope and aims of the project

Is your feature request related to a problem? Please describe.
Enable library to be used in a server-side-rendering Project. var d = new Drift() cannot be called on the server since it heavily relies on the DOM, but right now the library has some checks that cause errors in a server environment if the library is imported that could be changed.

Describe the solution you'd like
ZoomPane.js contains a check at the beginning:

var divStyle = document.createElement("div").style;

const HAS_ANIMATION =
  typeof document === "undefined" ? false : "animation" in divStyle || "webkitAnimation" in divStyle;

This causes an error on the server on import even if no Drift is created. I believe these lines could be changed to

let HAS_ANIMATION = true
if (typeof document !== 'undefined') {
  const divStyle = document.createElement('div').style
  HAS_ANIMATION = 'animation' in divStyle || 'webkitAnimation' in divStyle
}

to enable the file to be imported on the server without error.

Describe alternatives you've considered
This could be implemented in other ways, like moving the check into the ZoomPane class itself.

Additional context
I'd be happy to submit a pull request.

Hi thanks for a great lib. Im having some trouble when zooming on mutliple images. US: I have several thumbs in a slider when I click a thumb i changes to that picture which can be seen in a corresponding fullsize version. When I hover over it I can only zoom in on the original one. So even though I change the image to zoom on, it still keeps the original one. How can I change so it zooms in on the correct image?

I've configured like so:

new Drift(demoTrigger, {
    paneContainer: paneContainer,
    inlinePane: false,
    hoverBoundingBox: true
});

But not seeing any bounding box. Is there additional setup needed?

Problem is in Chrome, Firefox, and Safari on Mac.

See here: http://codepen.io/anon/pen/zBVPEr