nanogallery2 现代化相册框架

  1. 实现效果
  2. 简单代码实现
  3. 延申： (搜索关键词)

nanogallery2是用于一款现代化的相册和幻灯片。

a modern photo / video gallery and lightbox

推荐理由：复制黏贴即可用，不需要过多的前端知识。

实现效果

1542898212058

主页地址有实现效果的展示。 (图片是墙外的，需要翻墙)

简单代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 <html>
        <head>
            <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">          
            
            <!-- jQuery -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
          
            <!-- nanogallery2 -->
            <link  href="https://unpkg.com/nanogallery2@2.3.0/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
            <script  type="text/javascript" src="https://unpkg.com/nanogallery2@2.3.0/dist/jquery.nanogallery2.min.js"></script>
        </head>
        <body>
        
              <h1>gallery made with nanogallery2</h1>

              <!-- ### start of the gallery definition ### -->
              <div id="nanogallery2"
              
                  <!-- gallery settings -->
                  data-nanogallery2 = '{
                        "thumbnailHeight":  150,
                        "thumbnailWidth":   150,
                        "itemsBaseURL":     "http://nanogallery2.nanostudio.org/samples/"
                      }' >
                      
                  <!-- gallery content -->
                  <a href = "berlin1.jpg"   data-ngThumb = "berlin1_t.jpg" > Berlin 1 </a>
                  <a href = "berlin2.jpg"   data-ngThumb = "berlin2_t.jpg" > Berlin 2 </a>
                  <a href = "berlin3.jpg"   data-ngThumb = "berlin2_t.jpg" > Berlin 3 </a>
              </div>
              <!-- ### end of the gallery definition ### -->
            
          </body>
      </html>

3个引用：

1
2
3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<link  href="https://unpkg.com/nanogallery2@2.3.0/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script  type="text/javascript" src="https://unpkg.com/nanogallery2@2.3.0/dist/jquery.nanogallery2.min.js"></script>

图片来源：

1

<a href ="berlin1.jpg"   data-ngThumb ="berlin1_t.jpg" > Berlin 1 </a>

配置：

1
2
3
4
5

data-nanogallery2 = '{
                        "thumbnailHeight":  150,	每张图片的高
                        "thumbnailWidth":   150,	每张图片的宽
                        "itemsBaseURL":     	"http://nanogallery2.nanostudio.org/samples/"	图片的网址
                      }' >

更多的配置，可以查看主页。

延申： (搜索关键词)

  • css或js implementation google photos
  • Google Image Grid或Gallery
    • 增加 Fluid responsive 或flexbox
  • 其他尝试：jekyll plugin


隐藏内容：

关键词： - 基于框架的Google photos 相册实现。 - 基于框架的500px实现。 - 基于框架的响应式相册的实现。