Javascript

【Javascript】CSS3とインラインSVGアイコンで作られた軽量の画像ライトボックスBilderrahmen

March 9, 2018
bilderrahmen

bilderrahmenはCSS3とインラインSVGアイコンで作られた軽量の画像ライトボックス。

Usage

CDN使用

<html>
<body>
  <link href="https://cdn.jsdelivr.net/npm/bilderrahmen@0.3.1/dist/bilderrahmen.min.css" rel="stylesheet" />

  <a href="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/images/DSC05104.JPG" target="_blank"><img
        src="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/thumbs/DSC05104.JPG"
        data-bilderrahmen="gallery-02"
        data-bilderrahmen-title="Image Four"
  /></a>
  
  <!-- Video only supports MP4 and one video source! -->
  <a href="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4" target="_blank"><img
          src="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p-poster.jpg"
          style="width:200px;border:1px solid #ccc"
          data-bilderrahmen-video="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4"
          data-bilderrahmen="gallery-02"
          data-bilderrahmen-title="Video One"
  /></a>

  <script src="https://cdn.jsdelivr.net/npm/bilderrahmen@0.3.1/dist/bilderrahmen.min.js"></script>
  <script>
      new bilderrahmen({
          closeOnOutsideClick: true
      });
  </script>
</body>
</html>

MIT