小刀模板图片灯箱使用方法!

修士 · 333次点击 · 2023-02-23

网站预览:https://www.123cors.com/

这里用到灯箱js

Lightbox.js

地址:https://victordiego.com/lightbox/

您需要的一切都位于 lightbox/ 目录下。在您的 HTML 文档中包含 javascript 和 css 文件,您就完成了所有设置:

<link href="lightbox/lightbox.min.css" rel="stylesheet">
<script src="lightbox/lightbox.min.js"></script>

用法


data-lightbox属性添加到<a>标签并将其href设置为您希望在灯箱中打开的内容。打开图像时,您可以使用data-image-alt属性发送其替代文本:

<a href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
  Image</a><a href="#modal" data-lightbox>
  Modal</a><a href="https://vimeo.com/83897470" data-lightbox>
  Vimeo</a><a href="https://www.youtube.com/watch?v=Xyu_MdKBXic" data-lightbox>
  Youtube</a><div id="modal" class="lightbox-hide">
  <div class="modal-content">
    <h3>Welcome!</h3>
    <p>Sign in to your account.</p>
    <form>
      <input type="email" name="email" placeholder="e-mail account">
      <input type="password" name="password" placeholder="password">
      <input class="btn" type="submit" name="submit" value="Sign In">
    </form>
  </div></div>

画廊


在同一父元素下的所有<a>标签上将data-lightbox属性 设置为“gallery” ,将自动找到任何上一个或下一个项目:


<div class="gallery">
  <div class="gallery-item">
    <a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
      <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 1">
    </a>
  </div>
  <div class="gallery-item">
    <a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
      <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 2">
    </a>
  </div></div>


被收藏 0  ∙  1 赞  
加入收藏
0 回复  
善言善语 (您需要 登录 后才能回复 没有账号 ?)

请先登录网站