Has anybody managed to add images in Blocs with an option to magnify a larger version on hover or click and be able to view various enlarged areas by moving the cursor?
I am working on a website for an artist, who wants to show off the paint strokes and I think this would be her preferred option, but there is no easy or obvious way to do this in Blocs. This is something that would be useful not just for artists but also e-commerce solutions.
After searching the web I found a few online pages like this, but they really look like a lot of work and added code if you have to edit 50 different source images, plus an equal number of enlarged images.
There are some commercial options with plugins for WordPress etc, but I wondered if anybody knew of a simple to manage option that could work with Blocs?
How well spaced are your images? That code you reference uses the surrounding container for the magnification.?
Depending on your design, a popup with a larger image could be useful?
How do you want to handle small screen sizes?
For ease of duplication I am placing each image in a separate bloc with 3 rem padding at top & bottom for an even layout.
The small screen sizes is a very real issue and something I have tried explaining to the client, not least for issues of page weight if we’ll be looking at something like 15 paintings per page.
On a small screen I am not convinced this is an optimal solution and I provided an alternative using a feature bloc with the main image on the left and text on the right. Under the text I added a 3 column row with Lightbox thumbnails that enlarged when clicked on to show sections of the painting, however she has decided against that.
This is a client in her 70s and from past experience they understand very little but quick to change their minds and assume it’s just it can all be done in an extra 10 minutes. I could have a pop up modal from the image that goes full width but on mobile this is pretty much pointless.
Popup with a larger version of the image and magnifying cursor on larger breakpoints sounds like a good option.
And just have nothing on the mobile. I’ve never seen mobile magnification work very well. Often you get trapped with the image.
Everyone who likes it gets a free delivery (any where in the world) of Fish and Chips from @Jerry’s venture.
2 Likes