I am trying to implement photoswipe in a new website, but for the life of me, I can't figure out why the zoom button won't show up. I tried in chrome and IE. I can pinch to zoom in mobile, but that may just be the built in zoom capability of the mobile device.
Everything else seems to be working like a charm.
Have you tried using a test picture with a high resolution on your computer (over 1500x1500x)? When my picture is already at 100% width and height no zoom button is shown. When it's under 100% a zoom button is shown.
Related
I am implementing a plugin where users can zoom in and out of web content as they wanted. The plugin is going to be implemented to any mobile responsive websites.
I implemented the zoom in using
For FireFox
$('body').css('MozTransform','scale(2)');
For Chrome
$('body').css('zoom', ' 200%');
I have attached the images at the bottom.
Here right and bottom black bar is plugin part.
The problem is Desktop zoomin view.
Overflow happen and contents overflow are hidden. So when users click zoom in button on desktop, I would like to show zoomin version of mobile not zoomin version of desktop view.
I tried to fix this by changing or adding viewport metatag using Javascript.
<meta name="viewport" content="width=400, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
Here 400 is width of mobile device.
But it changed nothing.
Seems it can be easily solved if I can set device-width using Javascript, but not found solution yet.
I have been working on this issue for 2 days and anyone who have experienced this field, appreciate your help!
Is it even possible?
Desktop original view:
Desktop zoomed view:
Mobile original view:
You can also test official demos at http://www.jacklmoore.com/zoom/ on simple responsive mode on Firefox with Tap emulator, it's just not working and I don't get why.
The code I use is combo with colorbox taken from jQuery Zoom inside a colorbox
$('a.colorbox').colorbox({
'onComplete': function(){
$('#cboxLoadedContent').zoom({ on:'click' });
}
});
Which works fine on desktop. We tried click and grab modes. On mobile it's just full screen image, beyond phone resolution size and does not move.
update: found on official github https://github.com/jackmoore/zoom/issues/130 the user was trying to add touch:true but no success.
I ended up wrapping my code above with if ($(window).width() > 786) {} so the jQuery zoom is triggered only on desktop devices and on mobile you just expand image with default method built in every phone (you know, the thing you do on your phone photos, with your two fingers that zooms photo in and out).
RESIZING HERE MAPS-HELP
I'm building an Ionic app with HERE maps. When I change my phones orientation I call maps.getViewPort().resize(), but it doesn't work.I had set my div background where the map is to red and background is 100% width which is correct but maps don't scale.So I will be happy if you have some solutions.
Picture: Event when phones orientation is changed
Code of event:
Phone Screen :
Managed to find a solution. The problem was that screenOrientation function was called faster than maps would resize so adding a 250ms delay worked fine for me.
I have an android app that uses webview to render large images in a div. The div has fixed width height to match the screen leaving some area on top for controls. The image has an image-map on it and areas created with links.
Now the issue is that when I drag the image from non-mapped areas, it works fine, but when I drag from mapped area, it does not work and I think stucks in the touch event (because I also see the orange focus border on the image map area that opens links).
This happens only when the page is run from within app+webview, but if I load the page in browser on same mobile, it works fine.
Also this does not happen in my Android 5.1 Vega IRON, but it happens in older phones like Android 4.4 Droid, and same version Huawei.
Is this some known issue?
This might have something to do with touch events in application, as it works in browser but not in application.
I found out that in some conditions, the image-map does not let the mouse button events go past, therefore it does not perform even the default dragging and click behavior.
I had to remove image-map and build my own absolute positioned and display:block <a> tags for each area, and then it worked.
Hope this helps someone.
Recently i am working on a mobile webapp with a big textarea that needs to constantly display two little buttons on the bottom corners of the viewport. So i started with the basics:
position: fixed;
bottom: 10px;
This works smoothly and looks beautiful on my target devices (iOS >=5, Android >= 2.3). However, the problem starts when i give my big textarea a focus() and a system keyboard appears.
In iOS browsers, the keyboard is just an overlay on the viewport - so the viewport keeps it's dimensions after keyboard is on and half of it is just hidden under it.
In most android devices the keyboard appearance makes the viewport's height smaller and fitted to the remaining area so my position fixed workes here. However, some android devices work just like iOS and the keyboard appears as an overlay.
I'm trying to think of the best way to cover this, not using user agent string. I want this to be a universal solution. I figured out sth like
//check the viewport height
on(focus) -> see if viewport size changed and change position: fixed
But to do this i still need to wait couple seconds after focus to let the window get resized or not + i don't really know where to put my buttons if the viewport stays the same, as i might be on any of the iOS systems (the have different sizes fo keyboard) or on android device with bad behaviour.
What do You think?