Amphtml: Feature request: lightbox mode for amp-carousel

[sebastianbenz]

Let's provide a lightbox mode for amp-carousel to cope with carousel slides of varying sizes.

amp-carousel works great for image galleries - if images and captions have a uniform size. If image sizes vary (e.g. mixed portrait and landscape photos) with images having long and short caption texts, it becomes difficult to provide a good amp integration.

There are some good workarounds, however these require additional non-trivial work on the backend to estimate the amp-carousel size based on image and caption sizes. This makes migrating image galleries a pain point for many publishers.

The proposed solution would be a lightbox mode for amp-carousel. By default the carousel shows a placeholder image. On click or tap, the carousel expands to fill the viewport. Inside the lightbox, slides can have different sizes with the option to scroll the content vertically if it doesn't fit the viewport.

Example:

<amp-carousel 
      width=400                       <= optional: can be derived from placeholder
      height=300                      <= optional: can be derived from placeholder
      layout=responsive
      type=lightbox>
  <amp-img src="img1.jpg"
          layout="fixed"
          width=500
          height=300
          placeholder></amp-img>
  <amp-img src="img2.jpg"
          layout="fixed"
          width=300
          height=600></amp-img>
  <amp-img src="img3.jpg"
          layout="fixed"
          width=100
          height=500></amp-img>
  </amp-carousel>

// @adewale

[dvoytenko]

@sebastianbenz this is definitely a good idea. We've been trying to come up with something here: either allow all elements to implement their own lightbox mode or to build a very smart lightbox that can understand groups of content. I think at this point we are pretty close to either option. One thing to note - for this to work, we will need a semantic way to define image vs caption tags. Please take a look here: https://github.com/ampproject/amphtml/blob/master/extensions/amp-image-lightbox/amp-image-lightbox.md and let me know if you think these will work for the carousel as well.

[rudygalfi]

cc @ericlindley-g

[sebastianbenz]

@dvoytenko why do we need a semantic way to define image vs caption tags? Couldn't this work exactly like the current carousel and allow arbitrary content?

As far as I understand amp-image-lightbox, the semantic refs avoid duplicating image and caption in content and lightbox. For the carousel we could do it the other way around by showing the element marked as placeholder in the content and in the lightbox.

[dvoytenko]

It depends on what we want to enable in the lightbox. Consider some of the current features in the lightbox:

1. We have pan/zoom gestures (I think is likely desired for carousel as well)
2. Caption is positioned at the bottom and can be hidden on tap, e.g. when a user wants to get a better view.

[sebastianbenz]

I understand - these are definitely nice to have.

We could start with a generic lightbox carousel and gradually add image gallery specific features. For example, if the root element in a slide is a figure with figcaption, we could automatically add zooming + caption hiding.

[noahrs]

Good idea :) We'd need this functionality as well, as we currently have these on the Daily Mail mobile web experience.

On tap of an inline image, launch light-box with left/right carousel capabilities. If you tap on image 3, you should be able to swipe left to get to image 2 or swipe right to image 4. On swipe right of last image, you should be returned back to the article at the position you were on before tapping into the light-box.

Other requirements:

• ability to pass and display caption metadata
• tap to remove caption (mentioned above)
• ability to fire tracking request on each photo, as these can be counted as individual pageviews

Nice to have:

• pinch and zoom on image
• display of "1 of 15" text so the user knows what position they are in the collection
• ability to share individual images so that upon click, users are brought back to this image via an anchor tag in the URL

[noahrs]

Any update on this request? Can we expect any of this for launch?

[dvoytenko]

@noahrs It's marked for M2, so likely not going to be ready for lunch, but most likely shortly after.

[noahrs]

Thanks @dvoytenko - I assume you meant launch, not lunch. But now I'm hungry :)

This is both a source of pageviews and monetization (interstitial ads), not to mention a superior user experience for those who wish to navigate our articles via a photo gallery experience since we provide rich and contextual captions to help tell the story. We find a large % of users prefer this.

[kul3r4]

Another alternative would be opening the carousel on a separate page hosted by the website.
A preview of the carousel could be shown on the page, without showing the entire carousel content, then clicking on it will open a separate page which will host just the carousel.
This would allow doing more advanced things: like adding a share button for the carousel given the page hosting it would have its own URL.

[jaygray0919]

In non-AMP configurations, we use a conventional lightbox with two images.
The first image is the preview - think of it being the upper left area of the full image.
The second image is the full image that is displayed when the preview is clicked.

For AMP, would you consider supporting such as solution where we specify two URLs:
the URL for the image in the carousel - the preview image
the image for lightbox - the full image

/jay gray

[ericlindley-g]

@jaygray0919 — that sounds interesting. Do you have a sample page you could point to, in order to make sure we understand the full behavior you're describing?

[iamsens]

and again
"Any updates on this request? "

[ericlindley-g]

Work that will support has had significant progress — tracked in https://github.com/ampproject/amphtml/issues/4152

I'm closing this bug, but will continue to take the features requested here into consideration

[jaygray0919]

@ericlindley-g
I lost my handle on this thread and am late to the party.
Here is an example of a preview image that, on click, opens a lightbox.
https://afdsi.org/page/Concept.html

the structure looks like this:

<a
     style=""
     class="fancybox"
     href="/public/media/catalog_media/legend_database_applications.png"
     title="Explanation of header in ..."
>
<img
     src="/public/media/catalog_media/legend_database_applications_preview.png"
     width="150"
     alt=""
/></a>

We're currently using a Javascript, and would replace that with amp-lightbox.
And would convert to <amp-img> and specify dimensions.

We would like to put the preview images in an <amp-carousel> and then, on click, show the main image in amp-lightbox.

Please let me know if we can accomplish the same effect using current AMP technology.
Otherwise, would like to achieve the above.

Short term, we're gonna need to use this page via iframe.

/jay

[kul3r4]

@jaygray0919 is this something similar to the image carousel in product sample. If you click on the image in the main carousel, a lightbox is opened.

[jaygray0919]

@kul3r4 not quite. Our example uses one image as a preview (thumbnail) and another as the image in the lightbox. The AMP product sample uses the same image for preview as for the lightbox. A preview/thumbnail enables a smaller carousel.

[kul3r4]

I see, at the moment the amp-image-lightbox src is the same as the one in which the tap event is specified. For example in the Product page:
<amp-img src="/img/red_apple_2_1024x793.jpg" ..." on="tap:gallery-lightbox"> </amp-img> <amp-image-lightbox id="gallery-lightbox" layout="nodisplay"> <div on="tap:gallery-lightbox.close" role="button" tabindex="0"> <button class="ampstart-btn caps m2 close-gallery-button" on="tap:gallery-lightbox.close" role="button" tabindex="0"> Close </button> </div> </amp-image-lightbox>
I don't have an idea how this would be possible in AMP, unless something like changing the src of the amp-img when the event tap is generated. @aghassemi do you think this would be achievable?

[jaygray0919]

my suggestion: provide src-prev="preview.jpg". If src-prev is specified, use it in the carousel. If not, use src="" for both preview and lightbox. If that would work, the benefit is that the height of a carousel could be smaller, but the target image (the src) is displayed in lightbox, as it is now.

[jaygray0919]

Additional thought: for a specific carousel, all .jpg and/or .png for src-prev would have the same height. For example height=72 is a good size for a preview. An author would select the best 72x72 part of src="" as the preview.