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.
Related
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 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?
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.
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).
I've completed my responsive design, except the adsense implementation.
When for example a visitor changes the orientation of the tablet, the size of the ad should change automatically.
At the moment, I'm not getting it to work without a page refresh.
The ad only changes when I refresh the page, but that's not what a visitor would do.
According to Adsense support it has already been implemented:
Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.
However, I'm not getting it to work. Am I understanding it the wrong way, or am I missing something?
If it's not supported by Adsense yet, is there a workaround (allowed by adsense)?
EDIT: I just found out it is actually working on my smartphone. It just doesn't work with window resizing, but that's not really a problem. So I guess this is solved.
Pay close attention to the official "Technical considerations" at About responsive ad units
Your site uses third-party JavaScript
The parent container has no width set
In my case, responsive design was not setting an explicit width on viewports below 467x. As a result, the units would resize when going from portrait to landscape, but not vice versa from landscape to portrait. This resulted in a an ad unit stretching the content column wider than the viewport, and worse no ability to zoom out.
Setting an explicit width for the ad unit using a media query solved the issue, and now the units resize and cache exactly as described.