uikit实现简洁自适应lightbox图片点击放大轮换效果代码-html代码-BFW代码库

uikit实现简洁自适应lightbox图片点击放大轮换效果代码

代码语言：html

代码描述：uikit实现简洁自适应lightbox图片点击放大轮换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">

    <style>
        body {
          margin: 40px 0;
        }
        
        
        /* FOOTER STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .page-footer {
          position: fixed;
          right: 0;
          bottom: 20px;
          display: flex;
          align-items: center;
          font-size: 1rem;
          padding: 5px;
          background: rgba(255, 255, 255, 0.65);
        }
        
        .page-footer a {
          display: flex;
          margin-left: 9px;
        }
    </style>



</head>

<body translate="no">
    <article class="post">
        <h1 class="uk-text-center">A Simple UIkit lightbox</h1>
        <div class="uk-container">
            <div class="uk-child-width-1-2@s" uk-grid>
                <div>
                    <figure>
                        <a href="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" data-caption="Ring of Kerry, County Kerry, Ireland" data-alt="Ring of Kerry, County Kerry, Ireland">
                            <img width="1920" height="1280" data-src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt="Ring of Kerry, County Kerry, Ireland" uk-img>
                        </a>
                    </figure>
                </div>
                <div>
                    <figure>
                        <a href="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png" data-caption="Fintown, Ireland" data-alt="Fintown, Ireland">
      .........完整代码请登录后点击上方下载按钮下载查看