jackmoore / wheelzoom Goto Github PK

View Code? Open in Web Editor NEW

342.0 342.0 95.0 112 KB

A small script for zooming IMG elements with the mousewheel/trackpad.

Home Page: http://www.jacklmoore.com/wheelzoom

License: MIT License

JavaScript 94.87% HTML 5.13%

wheelzoom's People

Contributors

Stargazers

Watchers

Forkers

leison oaubert ramdeveloper girikudlur jjabba iarnaud dadanarifin web5design razerboot clonemeagain moeamaya rjungbeck slavik112211 irontony emret zenseo zsae arunpunnath duanlixin htmlr chrisgalard gadlol mrmax182 jaymascarenas othieno vegetableman verico apollo-dev nicolopernigo ermanno-pirotta ospreyinformatics modulexcite alexxroche anishmaharjan 0xcodezero lj-415 repomaa scalesoft elnapa jlauppe koken-kin aaronflower idanka labn36 jbach six-ponies zhangdubhe apachesep tmjones ykankaya jiimy collenjones ewalchredzone damlavelle guidetheorient denyncrawford mdiannna bydesigno devsubhani tiagoeduardonovaes pftom taquanjianimei eramudeep yash0307 igauch georapbox todomato tituslungu azarual kuuup-at-work shalevy1 mafftor benjamingirard square-in-root jqueryscript waldenn sanggwon brauliotec proladon a417420427 callebalik shoshonstudio gorobey xdxddxd hassanchajai trailaptrinh veldfiets artmeet crsynsotwal duynguyen-04061999 ygorperez abderrahmens jum-mk canbaran011

wheelzoom's Issues

add PinchToZoom event

Hello,
I use your code with a iPad and i can't zoom with my fingers. Do you have a solution ?
Thanks

not working with more than one image on site?

the first picture (in dom) works, the others not.

Does not work/update with responsive images

On change of image-size the script needs to recalculate the width/height of the image. Currently the background size stays the same.

A typical usecase is having a responsive image like max-width: 100%; height: auto;.

How to using wheelzoom with highslide

Hi
I want use both wheelzoom and highslide (http://highslide.com/)
Who can help me?

Spurious console output on 'wheelzoom.destroy'

The source contains this statement (line 146):

console.log(originalProperties);

It appears to be forgotten debug code.

How to apply wheelzoom with multi image (grid image)?

This js seem only working first image if have more image.

This project is really great and simple. Anyway, downloading and adding JS-files manually is very old fashioned and, depending on the project, not a good practice. Instead it would be great to install with a package manager(like npm) and be able to import the module and have TypeScript definitions.

If this project is inactive and someone wants to fork this repository and rewrite in ES6 or TypeScript he is very much welcome!

Background-size wrong when fadeing image

Hi Jack,

I have managed to combine a fancybox css (no jquery) and html with your wheelzoom, which works perfectly when I have the div/image on display: block; (so visible).

Except, when I add a jQuery function to fadeIn the div/image, the wheelzoom doesn't get the right background-size which makes it 100px width and that isn't correct.

Please check http://office.prelicious.nl/builds/test/demo/ with the working file
And please check http://www.quintystexel.nl/eten-drinken for the broken file, click on the first image ('Quinty's Lunch')

Do you know the problem? I seriously can't find it :(
The only thing I've changed is, I made the div invisble (the overlay) and added a jQuery function to make it fade in when it's being triggered.

I've added some attachments, maybe you can find the problem there.

I've also chagned this line:

backgroundSize: width+'px '+height+'px',

To this (to match my fancybox css, this gives NO problems at all - this is not important but just so you know I've changed it):

backgroundSize: width+'px 100%',

I hope you can help me

Problem in modal box

When I add the wheel zoom in dynamic content as image within modal box, the image is already in zoomed state and I could not zoom in and zoom out the image. Nothing happens to the image. How to resolve this issue ?

default zoom value is not modified !

This is the code I used :
`<!doctype html>

There is no difference in zoom percent in both images !

Not working on dynamically added image source

I populate image source with image path i got from ajax.
Something like
$('#image').attr('src', resultFromAjax);

Am i doing something wrong? :)

Is it possible to use it with background images?

I have my images in divs using background image contain. As this plugin already uses background images to work, is it possible to use it where the picture is already a background image?

wheelzoom npm package

Hey there,

I love this script! Thanks for sharing!

Are there any plans for hosting it on npmjs.org? A npm package of this would be awesome!

TypeError on 'wheelzoom.destroy'

I get this error in the console:

TypeError: Not enough arguments to EventTarget.removeEventListener.

Apparently that's because img.removeEventListener('wheelzoom.destroy'); is called without a second argument.

initial values

wheelzoom is great! A user wants to start with a zoomed-in version (e.g., centered, scale=2x) because
there is a list of images and each of them would require mouse actions.
I tried to fiddle around in the code, but it appears that the settings should be internally consistent,
i.e., not tampered by anything other than the pan/zoom events. It is possible that this requires an artifical rescaling event after the full load of an image (?). A possible approach would be to add, for instance, 'initialzoom: 2.0' to the wheelzoom() second argument. Any advice is greatly appreciated.

How to calc of image zoom movement(x,y) ?

I am making a similar function of the picture zoom interface

How to achieve the same effect by changing top, left, and scale

I don’t know how to calculate the movement of the picture when it is zoomed out or zoomed in

The ratio of the picture (img) and the outer frame (div) (overflow: hidden) is not the same

html dom structure is like this

div {
  width:1000px;
  height:1000px;
  overflow: hidden;
  display: flex;
  align-items: center; // child image vertical center
}
img{
  width: 1000px; 
  height: 800px;
  position: relative;
  top: 0;       // cagene this value 
  left: 0;        // cagene this value 
  transform: scale(1);     // cagene this value 
}

<div>
   <img src="image.jpg">
</div>

sorry my english is bad

What files need to be imported after npm install to run this library on angular 5, and can i apply this on canvas?

Hey, I want to use this zooming mode on my canvas image. I have installed your npm library, but don't know what files need to be imported to make it run. And i wan to do this zooming on canvas, so how it can be done? Let me know what you think.

Image shifts during zoom if page is scrolled down

If you open your demo page and use the mouse wheel on the image, the point under the cursor doesn't move.

If you scroll the whole page down a bit and then use the mouse wheel on the image, the point under the cursor moves.

The more you scroll the page, the more dramatic the effect.

Latest Firefox, OS X.

Missing event after updateBgStyle

Hi Jack,

this is more a feature request then an issue.
If you could add those lines of code at the end of the function updateBgStyle everyone could
listen to it and have the updated values at hand for further calculations.

var bgStyle = { "width": width, "height": height, "bgWidth": bgWidth, "bgHeight": bgHeight, "bgPosX": bgPosX, "bgPosY": bgPosY }; var event = new CustomEvent("wheelZoomUpdatedBgStyle", {detail: bgStyle}); document.dispatchEvent(event);

Thanks and keep on doing what you do :) It is a nice piece of code.

best,
ND

Assigning and adjusting the zoom ratio does not seem to work

Hello, I need help.
I tried using the zoom percentage adjustment feature and it is not getting the new value received.

I followed the example:
Wheelzoom (document.querySelectorAll ('img'), {zoom: 0.05});

I changed the value of 'zoom: 0.05' to other values like '0.05', '0.50', '10.00' and others ... did not make any difference.

I tested by adding a new default variable to test with an 'Alert' inside the script and also did not change the value:

Wheelzoom (document.querySelectorAll ('img'), {direction: 5});

And added the default variable:

Window.wheelzoom = (function () {
Var defaults = {
Zoom: 0.10,
MaxZoom: false,
Direction: 1
};

Alert only shows '1' and not 5 assigned.

What could be the problem? Or what can I be doing wrong?
From now on, thank you very much for your contribution with this script, really very useful and has helped me a lot until now.

Wheelzoom and jquery rotate

I am using wheelzoom and rotate js for my project. Both works well but when I rotate an image, the wheelzoom panning control gets reversed. How to solve this ?

Image links that contain single quotation marks do not show

Due to the way the background image is created

img.style.backgroundImage = "url('"+img.src+"')";

links with one or more single quotation marks (a valid non-encoded URI character) such as http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg will fail to show.

This is because the resulting concatenated string for such a URL is ill-formed
url('http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg')

Notice how the URL string is truncated to
http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San.

The fix is trivial: changing the aforementioned statement to
img.style.backgroundImage = 'url("'+img.src+'")';

should generate the intended string
url("http://www.marsnjak.com/sergej/yemen/highres/402%20-%20Old%20San'a'.jpg")

Crop to parent element, rather than original image size?

I'm using wheelzoom with your colorbox library.

When viewing a portrait image on a landscape screen (or vice versa), there is whitespace to the side of the image. For the unzoomed image, this is necessary to preserve the aspect ratio.

But when zooming in, it would be much more natural if the image could expand to fill the parent element, rather than being constrained to the original image size. Here, the whitespace is wasted - there is no reason why the image shouldn't expand horizontally.

Is it possible to modify the library so that the image is cropped to a parent, rather than its original size?

Issue with .PNG image

Hello,
I am trying this on both .JPEG and .PNG image and on .JPEG images it it working fine but on .PNG images it is not working.
can you tell why?

Zooming Issue with Specify CameraModel Image

Hi,
facing issue with Sensefly Camera model images,
May I know why it's happening?
SenseflyIMage

load() fails to retrieve image width and height correctly when styling images with CSS

I have a web page where several images are rendered in a tabbed view. On page load the image in the default tab is being processed correctly. However, when the tab is switched, the width and height values are corrupted, with width returning 80 and height returning NaN.

I suspect the issue might arise from the fact that my images have no explicit width and height tag; rather, width and height are defined in CSS using width:80%; height: auto'. The return values from the CSS resemble the corrupted ones (80% and auto-> 80 andNaN. Perhaps the getComputedStyle` function cannot parse the values correctly.

This is supported by the fact that when I declared width and height explicitly in the img tag, the issue went away.

How to use wheelzoom in colorbox

Is there a simpler way to use wheelzoom with colorbox?

some problem while zooming

I have a question about your wheel zoom plugin.
I'v used it with jquery colorbox, my pictures are fitted within the colorbox
It means i set the height and width to 100%, but beacuase some pictures are smaller than usual, they are not fitted vertically.
The real demand is that i want the picture to get bigger when i use mouse wheel(exactly like Windows photo viewer in windows OS),
it just zoom within the first dimention, and some part of picture will be hide while zoom,however, we have some more space to show the bigger picture.

my example page is on the following url :
http://ideamall.ir/Project/ViewPackage/?Id=17

sorry if my english writing is not so well!

thank you in advanced.
best regards.

Bootstrap 4 carousel caption h5: letters are too small in telephone

Telephone: landscape: letters/background caption in the picture, but too small to read, portret: caption at bottom! Have tried a lot of things, found at GitHub/StackOverflow, problem more often occurred, but no solution works in my case!
http://www.veldfiets.nl/appelscha/

CCS:
.carousel-caption h5 {
display: inline-block;
padding: 10px;
background: rgba(0, 0, 0, 0.50);
border-radius: 10px;

P.s.: I added only: font-size: 2vw; in order to have some result (only landscape) but, on large
screen the letters are too big now. In portret, telephone: text still too small, bottom.

}
HTML:

na een fantastische maaltijd etc.

.. etc. Excuse: de HTML is not shown, don't know why not, please look at the links page source.

wheelzoom and fancybox

wheelzoom and fancybox v3 seem to conflict with each other. When wheelzoom is added the first image wheel zooming works but when you go to the next slide it doesn't display.This doesn't happen when the wheelzoom is removed.

Any ideas why this is happening?

Regards.

Wheelzoom not working in carousel bootstrap: why not?

**This is the html/body:

.. previous ..

    <div class="carousel-item">
        <img class="zoom d-block w-10" src="slides/slider-1.jpg" data-color="black" alt="foto">
		<script src="wheelzoom.js"></script>
           <script>
        wheelzoom(document.querySelectorAll ('img.zoom'));
        </script>
		<div class="carousel-caption d-md-block">
             <h5>Langwarder Groden, detail</h5>		
        </div>
	</div> Etc., more slides to come. Thanks for any solution. P.s. the wheelzoom.js I dowloaded via Download/JackMoore-site.

data:url() is not working with large images on iPhone

Is is possible to get rid of image conversion to base64?

Zoom value argument seems not working

The only problem i found, zooming to a given value is not working for me.
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});
I tried values like 0.05, 0.5, 1, 2, 40. They all behave the same, adding background-size with the value of the original size of the image. And wheelzoom is applied. So these two behave the same and the zoom value is not taking effect:
wheelzoom(document.querySelectorAll('img')};
wheelzoom(document.querySelectorAll('img'), {zoom:0.05});

I thought the second one is zooming in to the specified value (Max is 1 and equals the original image size), independently on mouse wheel interaction.

Even on a very simple page with one image inside body and no styling, i find the same issue.

I intended to use this in a React, jQuery, bootstrap carousel context and to add zooming buttons to toggle between different zoom levels. It would imply "destroy" and "wheelzoom" each time, which is doable, if the zoom value worked.

BTW, here they are wrong about how to use wheelzoom:
https://docs.omniref.com/github/jackmoore/wheelzoom/1.1.1
$('img').wheelzoom();

Thank you

Position problem under enlarging

Hi!

My problem is:
If I enlarge the image, the positioning with mouse is not smooth but jumpy.
I think the jump size is 1 pixel in the original image!

Thanx, Art

Panel to zoomIN and ZoomOut

Bro, :D i love you, but i need a new feature in your plugin. Im working on a website, and i need to create my customized map. I need to create a panel with 2 buttons ( + AND - ) to zoomin and zoomout.

There is an example

http://jsfiddle.net/aamir/TSMpq/3/