WP Image Zoom doesn’t work

Hello @satimis,

currently the zoom effect is not applied to any of the images from the linked page. You need to add the “zoooom” (with 4 “o”s) CSS class to the image.

Also, the uploaded image should be larger (as width and height in pixels) than the image presented on the website. If you plan to add the zoom effect to the header image, then you should reupload a larger version of the image, as currently the image is 640×444 px, while presented on the website at the page’s full width, which is 1000px. That image is already stretched on the website and adding the zoom effect to it will make it look even more blurry within the zoom lens.

Hi@diana_burduja,

Thanks for your advice. If the images are big enough I don’t need to magnify them, such as adding “Embed code”of YouTube video. I can adjust the size the image/window and can also start the YouTube video with only a click.

Regards

There are plenty of use cases when the image needs to be presented on the website as smaller because of design reasons, but also the user should have the option to magnify the image, if he wants. This works only by having a larger uploaded image, which will be used inside the magnifier lens. No web design technique will actually add pixels to the images in order to magnify it.

If you don’t need to magnify an image, then the problem has sorted itself out.

Hi@diana_burduja,

If I use “Embed code”of YouTube video, I don’t need to magnify it. The content can be read easily. But I have >100 YouTube video, it will take up large space therefore I need showing the video as icons on web page.

Regards

Hi @satimis,

sorry, I assumed you wanted the zoom effect on the header image (the image with the “Is traveling for everyone?” text).

The same is valid for the YouTube thumbnail images. Currently the uploaded images are 150x150px. Try uploading to the website thumbnail images of around 500x500px and present them on the website at 150x150px. In the page editor the images can be set to be presented at 150x150px, so that the space on the website will not increase. Only the uploaded images need to be larger.

You’ll still need to add the “zoooom” CSS class to the images in order to mark the images on which the zoom effect should be applied.

Hi@diana_burduja

Did as advised. But I haven’t created the link yet. WP Image Zoom plugin activated.

Moving mouse pointer over the icons has no effect.

Regards

The last step: you’ll still need to add the “zoooom” CSS class to the images in order to mark the images on which the zoom effect should be applied. Alternatively, if you’re using the Classic Editor, then you can select the image and enable the “Image Zoom” button in the editor’s toolbar (see this screenshot). After that the zoom effect should work on the YouTube thumbnail images.

Hi@diana_burduja

I have been searching the document re: adding “zoooom” CSS class to the images without result. How to make them. Pls help. Thanks

Which file I need to edit?

Regards

• This reply was modified 2 months ago by satimis.

Open the “WP Admin -> Pages”, then the “Travels to USA” page for editing, then select the one of the images on which you want to apply the zoom.

Depending on the editor or the page builder you’re using, the procedure to add a CSS class to an image is a bit different. See the following screenshots for examples on how to do that for the most common editors or page builders:

• Classic Editor – screenshot
• Gutenberg – screenshot
• WPBakery – depending on the page builder’s version: 1) screenshot with the “large” or “full” for the Image Size setting. Or 2) screenshot.
• Page Builder by SiteOrigin – screenshot
• Elementor Page Builder – screenshot. It works with all the Image Size options, except Custom.
• Beaver Builder – screenshot
• Divi Builder – screenshot (used by the Divi theme)
• Avia Layout Builder – screenshot (used by the Enfold theme)
• Fusion Page Builder – screenshot
• Brizy Page Builder – screenshot
• Tatsu Page Builder – screencast

If you don’t know which editor or page builder you’re using, then you can open the “Travels to USA” page for editing and make me a screenshot of the entire page.

Hi@diana_burduja

Lot of thanks for your detail advice.

There is some strange on this WP website:
(Classic editor plugin has been installed and activated)

Dashboard -> Pages -> All Pages
It shows:
“Travels to USA – Classic editor”
clicking “Edit (classic editor)”, it starts the page (Travels to USA)

Select an icon of the images and click “image zoom” without response. Please advise how to attach the screenshot here.

Regards

• This reply was modified 2 months ago by satimis.

The zoom effect is working on the first image.

Hi@diana_burduja,

It is very strange here. I tried on the 2nd and 3rd images here. But there are no response on clicking the “Image Zoom” with mouse pointer. The 1st image was done by you. What is the problem? Thanks

Regards

I didn’t do anything. I don’t have any kind of access to the admin of your website.

You’ll have to do the same for the 2nd and 3rd images.

What is wrong here? All reply postings are deleted.

Regards

What is the problem here. All reply postings deleted?

Regards