Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Display Larger version of image when image clicked

Solved by Paul Hibbitts View solution

Started by carlos 6 years ago · 4 replies · 821 views
6 years ago

Happy new Year to everyone!

I'm wondering if there is a plugin or way that when I click on a image in a post, the image is displayed in larger dimension. Very useful when the web page is rendered on a smart phone.

Any clue will be very appreciated.
kind regards
Carlos.

6 years ago

@cidelab, Instead of using a modal windows showing a larger (full screen) image, an alternative might be to adapt the layout of the page/image to cater for different screen sizes.

Based on the width and/or screen density of the device, such a responsive webdesign could then:

  • Alter the space allocated to the image. E.g the image is displayed/zoomed at 20-25% on desktop and 100% on mobile.
  • Display different images with different pixel sizes: Resolution switching.
    This could save the mobile user costly and time consuming bandwidth.
  • Display different image content (e.g cropped or portrait/landscape): Art direction.

I think a modal popup showing a large size image might be of value on a desktop because there is ample space to show the image 4-5x larger. That space is not available on mobile.

👍 1
6 years ago

@cidelab, I just learned about a nice solution that might be what you are looking for.

They seem to be using a <picture> element containing multiple images, but my guess is there is a bit more to it than just a <picture> ...

Basically, on mobile, when you click on the image which is already 100% wide, an image with a larger dimension is shown which can be scrolled from side to side to see the details.

Have a look at the webshop of J.Crew on a mobile device or the mobile devtools in your browser: Slim Stretch Secret Wash shirt in gingham organic cotton

last edited 01/09/20 by pamtbaau
6 years ago

Thanks @paulhibbitts the links are very useful, I will test them now.
thanks a lot.
Carlos.

👍 1

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 198 2 months ago
Themes & Styling · by Ian, 2 months ago
3 94 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 455 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 48 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 128 3 months ago