lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码-html代码-BFW代码库

lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码

代码语言：html

代码描述：lightgallery+justifiedGallery实现图片相册自适应瀑布流点击放大效果代码，使用bootstrap布局，点击后放大图片幻灯片，包含缩略图。

代码标签： lightgallery justifiedGallery 图片相册自适应瀑布流点击放大

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

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

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lightgallery.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lg-zoom.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/justifiedGallery.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.0.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lg-thumbnail.css">
  
<style>
body {
  padding: 40px;
  background-image: linear-gradient(#e8f0ff 0%, white 52.08%);
  color: #0e3481;
  min-height: 100vh;
}

.header .lead {
  max-width: 620px;
}
.gallery-container-wrap {
  position: relative;
}

/** Below CSS is completely optional **/

.gallery-item {
  width: 200px;
  padding: 5px;
}

.btn-dynamic {
  color: #333;
  background-color: white;
  padding: 5px 10px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 14px;
  z-index: 9999;
}
</style>

  
  
  
</head>

<body >
  <div class="header d-flex flex-column align-items-center">
  <h1 class="display-6 mt-3 mb-0">lightGallery</h1>
  <p class="lead mt-2 mb-4">
    lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile
  </p>

</div>
<div class="container-sm">
  <div class="row justify-content-center">
    <div class="col col-md-8 gallery-container-wrap">
      <button type="button" class="btn btn-dynamic"
        id="dynamic-mode-images" >
        See 15 photos
      </button>
      <div class="gallery-container" id="gallery-dynamic-thumbnails">
        <a
            data-lg-size="1600-1067"
            class="gallery-item"
             data-index="0"
            data-src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png"
            data-sub-html="<h4>Photo by - <a href='' >Tobias Rademacher </a></h4><p> Location - <a href=''>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>"
        >
            <img
                alt="layers of blue."
                class="img-responsive"
                src="//repo.bfw.wiki/bfwrepo/image/64ae9606c64bf.png"
            />
        </a>

        <a
            data-lg-size="1600-2398"
            data-pinterest-text="Pin it3"
                        data-index="1"
            data-tweet-text="lightGallery slide  4"
            class="gallery-item"
            data-src="//repo.bfw.wiki/bfwrepo/image/64b3b2276682f.png"
            data-sub-html="<h4>Photo by - <a href='' >Yusuf Evli </a></h4><p> Foggy Road</p>"
        >
            <img
                class="img-responsive"
                src="//repo.bfw.wiki/bfwrepo/image/64b9145582e81.png"
            />
        </a>
        <a
            data-lg-size="1600-1067"
            data-pinterest-text="Pin it3"
                        data-index="2"
            data-tweet-text="lightGallery slide  4"
            class="gallery-item"
            data-src="//repo.bfw.wiki/bfwrepo/image/64b9f213cd702.png"
            data-sub-html="<h4>Photo by - <a href='' >Jay Mantri</a></h4><p>  Misty shroud over a forest</p>"
        >
            <img
                class="img-responsive"
                src="//repo.bfw.wiki/bfwrepo/image/64bded342caec.png"
            />
        </a>
        <a
            data-lg-size="1600-1067"
            data-pinterest-text="Pin it3"
                        data-index="3"
            data-tweet-text="lightGallery slide  4"
            class="gallery-item"
            data-src="//repo.bfw.wiki/bfwrepo/image/64bc8d6e822e4.png"
            data-sub-html="<h4>Photo by - <a href='' >Florian van Duyn</a>.........完整代码请登录后点击上方下载按钮下载查看