search

ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

[amp-lightbox-gallery] [amp-pan-zoom] Add the capability to hover and zoom #12245

Closed kul3r4 closed 2 years ago

kul3r4 commented 6 years ago

This is a feature request. Looking at pages like this, there is no way how to hover and zoom on images at the moment in AMP.

This is relevant for e-commerce pages.

@ericlindley-g @aghassemi FYI

gilbertococchi commented 6 years ago

It would be really interesting to consider a Mobile use case as well, as in fashion websites the zoom functionality is still interesting to see the detail of the dress fabric and the shape of a dress (random example: https://mobile.yoox.com/it/41724742PD/item).

ericlindley-g commented 6 years ago

Good point. We're working on improvements to the image lightbox that will support pinch/zoom, and be easily applied to image carousels, so hopefully that will get part of the way there, but I agree there's a lot of opportunity to make the experience even better on mobile.

kul3r4 commented 6 years ago

@cathyxz is this part of Ligthbox 2.0?

cathyxz commented 6 years ago

@kul3r4 not currently scoped for our v1 launch, but I'm open to exploring this as an additional FR for <amp-lightbox-gallery>. From the example you linked, it looks like it's a desktop only feature. Is that accurate? Are there similar but slightly different use cases of this feature? I'd like to collect a few examples (esp variations if any) to understand and scope what API / feature set would satisfy the need here.

kul3r4 commented 6 years ago

@lswang1618 in case she knows more use cases for this feature on e-commerce pages

lswang1618 commented 6 years ago

I think on mobile it takes the form of tap and zoom: https://www.jcrew.com/p/womens_feature/newarrivals/justin/classic-popover-in-ratti-floral/H6958?color_name=persimmon-multi

Is this currently possible?

cathyxz commented 6 years ago

@lswang1618 the mobile zoom of that website is just broken... But currently we have double-tap zoom on mobile with <amp-image-viewer>. <amp-image-viewer> isn't launched, but its features are available via <amp-lightbox-gallery>. There are plans to launch it and incorporate svgs via https://github.com/ampproject/amphtml/issues/13602, but no set timeline yet (the component name / api may yet change).

IamAlta commented 6 years ago

The purpose of a thumbnail→large image is to save page load time. I'd love to see the ability to show the thumbnail (say 100x100 img) and when it's tapped, the larger image loads and is shown. Any thoughts on this?

ericlindley-g commented 6 years ago

@IamAlta — that sounds interesting (and may already be possible in AMP). Do you have an example of this being used on a page?

IamAlta commented 6 years ago

I just checked and this page, below, doesn't load the larger images in the list of products about 1/3 way down. As you can see, loading all those large images would definitely increase page load times. Only the thumbnails are until the thumbnail is clicked. This is done with a lightbox plugin. https://www.gardecor.com/p-af-outdoor-artificial-geranium-bushes

Here is the scenario. I envision it being done with a on="tap:AMP.setState..." when the thumbnail is clicked. That triggers a hidden div to show. And, the large image is loaded and shown in the large div. There is an X on the large image div to hide the div.

Alternate scenario that is like the current amp-image-lightbox but instead of loading the large image, load the thumbnail and when tapped, switch the thumbnail with the large image. When closed, switch it back to the thumbnail.

I'm not versed in AMP, yet, but perhaps someone who is can construct that and package it as part of AMP.

Lazy-loading images is a similar feature where images are loaded _when the page scrolls to where the part with the image is shown. (e.g., http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/). Lazy-loading would be nice to keep down the initial page-load times.

These would be nice for image intense website such as image galleries and eCommerce where products use many images.

Thank you for your time. Make it a wonderful day — you deserve it!

nainar commented 6 years ago

Usecase demo that I was thinking of seen below: american_apprel

aghassemi commented 5 years ago

Closing in favor of https://github.com/ampproject/amphtml/issues/20219 which is the superset.

aghassemi commented 5 years ago

reopening this this captures hover zoom use-case

arpanjain100 commented 4 years ago

Hi, has this been implemented? Is is possible to zoom on images in AMP?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.