nanogallery2是用于一款现代化的相册和幻灯片。
a modern photo / video gallery and lightbox
推荐理由:复制黏贴即可用,不需要过多的前端知识。
实现效果
主页地址有实现效果的展示。 (图片是墙外的,需要翻墙)
简单代码实现
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实现。 - 基于框架的响应式相册的实现。