-
Posts
-
Hello,
We have been using Masonry Gallery to show our brochure but it has never been high enough in resolution to view small text. I raised the pixels to 2500×2500 but that only helped when viewing on a 4k 34″ screen. I need to make it so that a 8.5 x 11″ (1900×2500 pixel) image can be zoomed in on. I have 16 images of that size for the brochure. I searched the forum but couldn’t find a solution that allows for zooming using a masonry gallery. Can you give me any suggestions?
Hi Actionrev,
I think a lightbox would not fit what you need since Masonry Gallery is basically showcasing photos and other graphics but not documents with little letters which would be hard to read.
Try to have the documents in PDF format then use some PDF viewer plugin, here’s a tutorial from wpbeginner: https://www.wpbeginner.com/plugins/how-to-add-a-pdf-viewer-in-wordpress/
Then you can put the shortcode inside the Code Block.
I hope you’ll find this tip helpful.Best regards,
Nikkodid you use the full resolution images for the lightbox?
on default it is not that case. It uses the large image for it. – There are some snippets for child-theme functions.php to set the source for lightbox images to “full”btw: how did you realise the zoom?
Hi Guenni007,
The size of the image in lightbox on Actionrev’s site is 1936x2500px.
Best regards,
NikkoZoom was not realized. This image https://actionrev.com/wp-content/uploads/2021/03/Flow_Technician_Productivity_Report2500x1932.jpg in Masonry Gallery is 1936x2500px but because a screen is 1920 by 1080 the fine text is not viewable unless I open the Masonry Gallery on a 4k screen. I’m wondering if there’s a way to have a pop-up image with an additional zoom after it has popped up? Scrolling up, down, left, and right is fine also.
“did you use the full resolution images for the lightbox?
on default it is not that case. It uses the large image for it. – There are some snippets for child-theme functions.php to set the source for lightbox images to “full” ”In Setting>Media I changed Large File and Masonry Size to 2560 x 2560. This just allowed for larger images to display without creating a lower resolution thumbnail. I assume the snippets for child-theme functions.php to set the source for lightbox images to “full” will allow for someone to open a large image and scroll up, down, left, and right? Where can I find these snippets?
Nikko,
I added [pdfviewer]https://actionrev.com/wp-content/uploads/2021/03/Actionrev-Brochure-OnWeb.pdf[/pdfviewer].
I set the Default Width and Height to 100% but I’m not sure where to place [pdfviewer width=”100%” height=”100%” beta=”true/false”]http://full-url/document.pdf[/pdfviewer].
Does Enfold support the plugin PDF Embedder By Lever Technology LLC ? That has a zoom function and looks a little more refined.
have a look at this page – with your image:
https://webers-testseite.de/jean/
you see on the lightbox now a magnifier – it only magnifies ( quick solution) to 200% on click – but that would be enough?Thank you for the attempt but it functions the same way. When I click on the image it opens the lightbox and has -+ magnifying glass. When I click to zoom in with the magnifying glass it doesn’t do anything. I tried it on the latest Chrome and Mozilla. If I can get it to work at 200% I think it would be great. Can I change the zoom if I want to any number?
Hi Actionrev,
You can put the shortcode inside a Code Block.
As for PDF Embedder By Lever Technology LLC, I haven’t tested it but I think it should work as well.Best regards,
Nikko“You can put the shortcode inside a Code Block.”
I did and I’m still having problems. I put:
[pdfviewer]https://actionrev.com/wp-content/uploads/2021/03/Actionrev-Brochure-OnWeb.pdf[/pdfviewer]
[pdfviewer width=”200%” height=”200%” beta=”false”]https://actionrev.com/wp-content/uploads/2021/03/Actionrev-Brochure-OnWeb.pdf[/pdfviewer]
into the top part of Code Block.The PDF shows up twice at the bottom of the page but they are in small frames that don’t allow for the full pages to be seen. One frame is wide but really shallow. The other is really skinny and shallow.
Let me recap the problem I have. I just need for the audience to zoom into a 2500 x 2500 image to read small text in a spreadsheet. They need to be able to scroll left, right, up, and down if they zoom in a lot. I prefer it to be a thumbnail image as it is now, when clicked it zooms, and then can be zoomed one more time to see the text. If I can only get that from a PDF then so be it…
https://kriesi.at/support/topic/zoom-into-high-resolution-graphics-to-view-text/#post-1289371
yes – you are right – on firefox it works on chrome and safari not – so i sitched the function from css zoom to transform scale.
see again : https://webers-testseite.de/jean/
( maybe you had to refresh browser cache)but even if the zoomed image is there – it will be no good solution for mobile screens ( even if i put a scroll to x direction ) the scaling is still in relation to the source image.
btw. you can use normal pdf browser viewer and embed a pdf like this:
https://webers-testseite.de/pdf-on-website/Hi Actionrev,
I have checked on the page and I think @Guenni007 solution is actually better than the PDF plugins and have applied it on your page.
Please review the page.
@Guenni007 thanks again :)Best regards,
NikkoYes, @guenni007, both solutions look to be just what I needed. Thank you. I opened your link in firefox and chrome on an android. Both browsers cut off the left and the right, slightly, with the second zoom when in portrait, Images zoomed fine when the phone is in landscape. To play it safe I’ll use the pdf viewer.
I’m going to change the pdf to individual pages as opposed to the bifold.
I’ll also need to change the frame of the PDF viewer to be shorter in height so that it’s completely viewable in 1920 x1080. I changed the code to width=”100%” height=”800px” type=”application/pdf”> and it looks good but I would prefer the frame to more dynamic based on screen size. I tried width=”100%” height=”90%” type=”application/pdf”>. The frame stayed just as wide as before but was extremely shallow, defeating the purpose. Any suggestions to allow the PDF Viewer to reshape itself based on screen size?
Hi Actionrev,
I believe you can use CSS in order to change the height for example to target bigger screens like 1920px wide screens:
@media only screen and (min-width:1920px) { height: 900px !important; }for smaller screens, you use something like:
@media only screen and (max-width:767px) { height: 700px !important; }add this CSS code in Enfold > General Styling > Quick CSS.
Just adjust the height value.
You can learn more regarding media queries here:
– https://www.w3schools.com/css/css3_mediaqueries.asp
– https://365webresources.com/list-css-media-queries-common-devices/
Hope this helps.Best regards,
Nikko
- You must be logged in to reply to this topic.