Google amp 页面：如何向 amp-image-lightbox 添加关闭按钮？

Question

如何给amp-image-lightbox添加关闭按钮？它通过单击图像外部关闭，但是如果宽高比匹配显示应该怎么办？代码块如下：

$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"></amp-image-lightbox>';

Answer 1

代码中的更改：

$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"> <span on="tap:lightbox.close" role="button" tabindex="0">X</span></amp-image-lightbox>';

示例：click here

<!--
## Introduction

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- ## Head -->
<!-- -->
<head>
  <!-- The charset definition must be the first child of the `<head>` tag. -->
  <meta charset="utf-8">
  <title> amp-image-lightbox</title>
  <!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
  <!--
    AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
  -->
  <link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
  <!--
    AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
  -->
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!--
    CSS must be embedded inline.
  -->
  <style amp-custom>
    .close-button { position:fixed; top:50px; right:50%; transform:translateX(50%); z-index:1000; border:5px solid yellow; border-radius:10px; padding:2px;}
  </style>
  <!--
    The AMP boilerplate.
  -->
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- ## Body -->
<!-- -->
<body>
<h1>Add Custom Close Button In amp-image-lightbox</h1>

<amp-img on="tap:lightbox"
  role="button"
  tabindex="0"
  src="https://dummyimage.com/600x400/9d0000/fff/&text=amp-image-lightbox"
  alt="Picture of a dog"
  title="Picture of a dog, view in lightbox"
  layout="responsive"
  width="300"
  height="246"></amp-img>
<amp-image-lightbox id="lightbox"
  layout="nodisplay">
  <span class="close-button" on="tap:lightbox.close" role="button" tabindex="0">X</span>
  </amp-image-lightbox>
</body>
</html>

Answer 2

没有 html 代码，只有 CSS。把这个放在你的风格上：

对于 amp-image-lightbox：

#lightbox1::before {
  content:"X";
  cursor: pointer;
  font-size: 32px;
  right:19px;
  top:8px;
  font-weight: 600;
  position: fixed;
  display: block;
  text-align:right;
  color:#fff;
}

选择器是默认示例选择器。确保它是正确的。

在 amp-lightbox 上：

.lightbox::before {
  content:"X";
  cursor: pointer;
  font-size: 32px;
  right:19px;
  top:8px;
  font-weight: 600;
  position: fixed;
  display: block;
  text-align:right;
 color:#fff;
}

Try it on codepen

Google amp 页面：如何向 amp-image-lightbox 添加关闭按钮？

Google amp page: how to add close button to amp-image-lightbox?

html

php

amp-html