Google AMP 放大器-灯箱-图库

amp-lightbox-gallery组件用于为其他 amp 组件（如 amp-carousel、amp-img）提供灯箱体验。目前 amp-lightbox-gallery 仅支持图像。

所需脚本：将 amp-lightbox-gallery 组件导入标头。

属性：

• lightbox：我们使用此属性为图像添加灯箱效果。
• src：指定要嵌入的图像的 URL 或路径。
• 布局：指定图像的布局，例如响应式。

例子：

HTML

  

    
    
  
    
  
    
    
  
    
    
  
    Google AMP amp-lightbox-gallery
  
    
    
    
  
    
        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
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
    
        :root {
            --color-primary: #005AF0;
            --color-text-light: #fff;
            --space-1: .5rem;
            --space-2: 1rem;
        }
    

  

    
        
        
  
        
            welcome to geeksforgeeks
        
  
          
        
        
  
        
            GeeksforGeeks A Computer Science 
            portal for geeks.
        
  
    

  

输出：

代码输出

点击图片可以看到以下视图

在图像上单击

单击左上角的图库选项会显示以下视图

画廊视图