<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · ImagePreview（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="ImagePreview.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);display:flex;gap:8px;}
    .kole-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;border: 1px solid var(--kole-color-border);}</style>
</head>
<body>
  <div id="thumbs"></div>
  <div class="kole-imgprev-mask" aria-modal="true" id="mask" style="display:none">
    <button class="kole-imgprev-close" role="button" tabindex="0" aria-modal="true" id="close">✕</button>
    <button class="kole-imgprev-arrow prev" role="dialog" aria-modal="true" id="prev">‹</button>
    <img class="kole-imgprev-img" aria-modal="true" id="big" />
    <button class="kole-imgprev-arrow next" role="dialog" aria-modal="true" id="next">›</button>
    <div class="kole-imgprev-count" role="dialog" aria-modal="true" id="count"></div>
    <div class="kole-imgprev-thumbs" role="dialog" aria-modal="true" id="strip"></div>
  </div>

  <script>
    function svg(c1, c2, t) {
      var s = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>" +
        "<stop offset='0' stop-color='" + c1 + "'/><stop offset='1' stop-color='" + c2 + "'/></linearGradient></defs>" +
        "<rect width='400' height='300' fill='url(#g)'/><text x='200' y='160' font-size='40' fill='#fff' text-anchor='middle' font-family='sans-serif'>" + t + "</text></svg>";
      return "data:image/svg+xml;utf8," + encodeURIComponent(s);
    }
    var IMGS = [svg('#2F54EB','#1D39C4','图 1'), svg('#13C2C2','#08979C','图 2'), svg('#722ED1','#531DAB','图 3'), svg('#8C5A00','#D46B08','图 4')];
    var cur = 0;
    var mask = document.getElementById('mask');

    document.getElementById('thumbs').innerHTML = IMGS.map(function (u, i) {
      return '<img class="kole-thumb" role="button" tabindex="0" src="' + u + '" data-i="' + i + '">';
    }).join('');
    document.querySelectorAll('.kole-thumb').forEach(function (t) {
      t.onclick = function () { cur = parseInt(t.dataset.i, 10); show(); };
    });

    function show() {
      mask.style.display = 'flex';
      document.getElementById('big').src = IMGS[cur];
      document.getElementById('count').textContent = (cur + 1) + ' / ' + IMGS.length;
      document.getElementById('strip').innerHTML = IMGS.map(function (u, i) {
        return '<img class="kole-imgprev-thumb ' + (i === cur ? 'is-active' : '') + '" role="dialog" aria-modal="true" src="' + u + '" data-i="' + i + '">';
      }).join('');
      document.querySelectorAll('.kole-imgprev-thumb').forEach(function (th) {
        th.onclick = function () { cur = parseInt(th.dataset.i, 10); show(); };
      });
    }
    function hide() { mask.style.display = 'none'; }
    document.getElementById('close').onclick = hide;
    document.getElementById('prev').onclick = function () { cur = (cur - 1 + IMGS.length) % IMGS.length; show(); };
    document.getElementById('next').onclick = function () { cur = (cur + 1) % IMGS.length; show(); };
    mask.addEventListener('click', function (e) { if (e.target === mask) hide(); });
  </script>
</body>
</html>
