How to prevent Pinch IN Zooming of Image using Pinchzoom.js - javascript

So I have this scenario where I am using Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link. When you will PINCH IN, you will observe that the image zooms OUT but after the gesture has ended, it retains its original size. I wanted to ask if there is a way to disable this zooming out effect? My PinchZoom settings are as:
Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});

Try setting the property minZoom to 1.
This effect happens because it allows you to zoom out to a size that is smaller than your screen, so the browser scale it back so it fits the whole phone width.

You need to add the property which will tell the minimum zoom size. In Pinchzoom.js library there is minZoom property for that.
So if you don't want your image to be zoomed out on pinch-in then set minZoom:1.
I tried this settings by adding minZoom property to the demo link and it was working correctly.
Array.from(document.querySelectorAll('.myimages-container')).forEach(function (el) {
new PinchZoom.default(el, {
tapZoomFactor: 5,
maxZoom: 10,
minZoom:1,
use2d: true,
verticalPadding: 1,
draggableUnzoomed: false
});
});
If this solution is not working for you then maybe this is the problem is with your element selection.
Use container <div> as the parent of your every image and then apply settings to that parent <div>.
<div class="myimages-container">
<img src="my_image.jpg"></img>
</div>

Related

Vertical scroll animation 'jumps' on iOS

I'm working on a site that uses CSS3 animations.
I've noticed on iOS the comic captions 'jump' which I believe is caused by the address bar changing one of the window properties used to calculate the caption position.
Source code is available here: https://gitlab.com/ashleyconnor/adventurersclubcomic
If I'm correct in my assumption. Is there an accurate way to offset the iOS address bar so there is no jump (sudden increase) in any of these values?
I cloned your repo, and was able to reproduce the jitter on window resize in both Firefox and Chrome. After a few minutes of debuggine, I think the problem is actually in your index.js file.
You are completely refreshing the enllax plugin every time the windows resizes. This appears to be unnecessary.
If you remove the excess calls to the enllax function like this:
$(document).ready(function() {
// function enllax() {
$('#start').enllax({
type: 'foreground',
ratio: 0.5,
direction: 'vertical'
});
// $(window).scroll();
// };
$('#begin').click(function() {
$('html, body').animate({
scrollTop: $("#panel1").offset().top
}, 1000);
});
// enllax();
// And trigger the scroll event on resize to deal with changes
// in the responsive layout
$(window).on('resize', $(window).trigger('scroll'));
});
With that update, the jitter stops on resize in all the browsers I have installed. It remains to be tested in iOS because I don't have any Apple hardware to test it on, but I suspect it should fix the problem there as well.

autoPanMargin in Openlayers is not working in IE

I have an overlay in openlayers and I am providing the autoPanMargin of 100 pixels. It will work fine Chrome but in IE 11 if we click on the right side it will not work.
According to the API, autoPanMargin is the margin (in pixels) between the overlay and the borders of the map when autopanning.
So here is the overlay how I am using in the code
var overlay = new ol.Overlay(/** #type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanMargin : 100
}));
Here is the sample. Check this in both chrome and IE by clicking on the right side of the screen. In Chrome it will pan. But in IE it will not. May I know the reason and possible solution for this behaviour.
Thanks for asking. This is a bug. I just created a fix, which will be included in the next release (> v4.0.1).

Can OpenSeaDragon panning options be changed after initialisation

I'm building a responsive image viewer, incorporating OpenSeaDragon, that requires different panning behaviour at different screen widths. At narrow widths panning should not be allowed, but when the window's wider, panning should be activated.
A simplified example follows:
Let's assume the window is fairly wide, then the panning options during initialisation will be:
OpenSeaDragon({ panHorizontal: true, panVertical: true, ... });
(I understand these are the defaults, but including them here for clarity.)
I can then detect whether panning should be activated/deactivated using matchMedia inside a window resize event handler, something like:
// (Crude example, resize would need debouncing etc)
window.addEventListener('resize', function () {
if (window.matchMedia('(min-width:800px)').matches) {
// allow panning
} else {
// prevent panning
}
});
My question is, can the panning constraint options provided when OpenSeaDragin is initialised be changed later, without having to reinitialise the viewer? Failing that, is there a different way of getting the same effect? I've had a dig into the OpenSeaDragon docs and code but I can't see a way of doing it.
Yes, you can change those properties directly without having to reinitialize, like so:
var viewer = OpenSeaDragon({ panHorizontal: true, panVertical: true, ... });
viewer.panHorizontal = false;

iScroll 4 No Canvas click/tap events when zoomed in

I have an odd problem that I can't work out - I'm using iScroll 4 to scroll an HTML5 canvas (implemented as below):
mapScroll = new iScroll('td_map', {zoom: true, bounce: false,
hScrollbar: false, vScrollbar: false,
}, 100);
The zoom works brilliantly (tested on iPad 2/4), and the canvas items which have tap and click events are firing when the map is not zoomed in. However as soon as the zoom is used (so in iScroll the scale is changed from minZoom of 1) the click events aren't firing or they're not being reached. If I zoom out or double click to reset the zoom back to normal, the events will fire as expected again.
The click event:
trainGroup.on("click tap", function(evt) {
console.log("Hello train!");
});
Any ideas as to what's going on would be great :)
Thanks very much,
Becky
EDIT: After much debug logging to work out what was going on where, it looks like the mouse event has the wrong information. It seems that the CSS transform the zoom does on the canvas doesn't update the mouse clicks, so when I think I'm clicking on the object its actually clicking whatever would be on the non-zoomed canvas. I haven't figured out how to update the mouse events with the translated info yet, but at least thats progress :)

How to make the image map clickable on mobile-safari?

I'm using jQuery and qTip2 to make Geo information on an image map visible. You can see the demo here on JSFiddle | Fiddle Screen result
On Desktop Browsers everything works fine. on-hover you see the tooltip and on-click you go to the URL defined by href tag.
But on mobile safari (ipad/iphone) it is impossible to get the link to the URL. Every time you click on the map it is like you hover on pc, but never a click.
The image is created with standard html:
<img src="http://i.stack.imgur.com/6z2Z9.png" usemap="mapname">​
also the map is created with standard html but with additional attribute tooltip(1):
<map name="mapname">
<area shape="poly" href="?content=meteo&abm=ALL" tooltip="ABM Alland" coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>
The jQuery is very tiny with(2):
$(document).ready(function() {
$('area').each(function() {
$(this).qtip({
content: { text: $(this).attr('tooltip') },
position: {
my: 'bottom left',
target: 'mouse',
viewport: $(window)
},
hide: { fixed: true },
style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
});
});
});​
So how could i solve this problem?
(1) I know this attribute should be data-tooltip. this will be changed soon.
(2) Based on the imagemap demo
This is logical. Ever tried hovering on a touchscreen? :-D
Since mobile devices lack the ability to hover, you need to adapt the way you are presenting your data, to fully support them.
For mobile device users, you need to make absolutely clear where a :hover action on desktop browsers would take place. Make the places "pop out of the map", so they know without hovering, where to retrieve information.
You need to substitute every :hover action with an adequate touchscreen action. For example provide the tooltips on tap and put the Link inside the tooltip to compensate for the missing hover action.
In return you could make use of "touchscreen-only" interactions to compensate.
A startingpoint on how to adapt you webcontent for mobile devices can be found in Apples Developer Library. (Especially §5 of this article).

Categories

Resources