Google AMP 放大器图像灯箱

图片库是网站中的一项流行功能，借助amp-image-lightbox ，开发人员可以轻松地将灯箱效果添加到 AMP HTML 页面，以激活我们对 amp-image 组件使用on 操作的amp-image-lightbox 。

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

属性：

• layout： amp-image-lightbox 仅支持 nodisplay 布局。
• id：指定灯箱组件的id。这被 on 操作用作图像的目标。
• data-close-button-aria-label：用于设置关闭按钮的 aria-label。

例子：

HTML

  

    
    Google AMP amp-image-lightbox
  
    
    
      
    
    
    
  
    
  
    
  
    
        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
            }
        
    

  

    
    
        
        
  
        
        
    
  
    
    
    
  
    
    
        
        
          
        geeksforgeeks
    

  

输出：