manual zoom in the enlarged image window - mobile

I would like to have the option of manual zoom in the enlarged image window on the mobile device. So that I can zoom into the displayed image within the Javascript frame. I do not want to zoom the whole web page. Is that possible? Or is there another Javascript that can do this?

It is not possible to zoom the enlarged image in Lightbox or Lightbox2. There is no such feature.
To do that, you should use a different zoom script, such as Magic Zoom Plus.

Related

Is it possible to change user's phone orientation using react?

I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

Weebly Lightbox/fancy box close button layered behind image Weebly

Weebly Fancybox/Lightbox Mobile Issues- X layered behind image and Images too high
Can anyone assist with the following issues:
1- How can I make the close X button in fancybox/lightbox layer in front of the image? In mobile view the X is often partly or fully hidden behind the image and can't be clicked, this happens when the image is quite wide.
On mobile, the images in the fancybox/lightbox appear toward the top of the image screen on mobile, do you know how to centre these on the mobile screen?

Cannot disable d3 topojson base map zooming on Ionic V5 App

I am trying to make the zooming functionality of a d3 topology map smoother on my app. The default zooming behavior are kind of lag a lot and mostly it conflicts with ionic touch events. I am trying to disable all default zooming features completely and will try to do it with zoom in/out buttons.. But it seems I cannot disable zoom.
Here is my markup
And here is my map code ...
Though I cannot pinch zoom on the map, but it seems I can zoom the svg by pinching the white area outside the map. I want to disable the pinch zoom completely so user cannot zoom it using touch.
You could put a div above the map, and give this div a transparent background and give it height and width as the map size, so when user touch the div it will give no effect since it is the div and not the map, and then you can do your zooming using 2 buttons (zoom in/ zoom out).

Cordova Capture & Camera

Is it possible using Cordova camera and capture plugin to initialise the camera on page In say a 400x400 square rather than loading the full screen capture? Reason being I'm after using the front camera on a tablet which when a member of staff clocks in during the process takes a quick photo of the member of staff.
Is this possible with Cordova camera and capture? If so could somebody provide a quick example or point me in the right direction.
Thanks
There is a great plugin for that: CordovaCameraPreview
Cordova plugin that allows camera interaction from HTML code.
Show camera preview popup on top of the HTML.
Features:
•Start a camera preview from HTML code.
•Drag the preview box.
•Set camera color effect (Android and iOS).
•Send the preview box to back of the HTML content.
•Set a custom position for the camera preview box.
•Set a custom size for the preview box.
•Set a custom alpha for the preview box.
•Maintain HTML interactivity.

Pinch Zoom only on a image (and not the rest of the page)

I resume the situation:
I have a responsive website with a "zoom box" (jquery script that makes a overlay black cache and shows an image over the page).
I want to enable the pinch zoom on this "layer" of my website (or at least on the image).
But when we use "pinch zoom", all the website is affected!
How can i make this pinch zoom being enabled only for that image (or better this overlay)...
Thank you.

Resources