浏览-照片-显示组件
# FastWeb 浏览-照片-显示组件
fotorama是一个开源的照片显示工具，通过引入标签以及图片链接的方式来打开显示组件中的内容。实现类似于幻灯片播放的效果。
# 1. 下载示例
点击https://github.com/artpolikarpov/fotorama/archive/refs/heads/master.zip (opens new window)下载库文件以及关联的示例等信息。
# 2. 确认参数
使用文本编辑器html文档。显示的内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
</head>
<body>
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
data-allowfullscreen="true"
data-nav="thumbs">
<img src="https://s.fotorama.io/1.jpg">
<img src="https://s.fotorama.io/2.jpg">
<img src="https://s.fotorama.io/3.jpg">
<img src="https://s.fotorama.io/4.jpg">
<img src="https://s.fotorama.io/5.jpg">
</div>
</body>
</html>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
通过阅读，我们发现这些<img>标签的内容组成了照片序列的顺序，故在这里我们将这些<img>标签使用参数param_list来代替。
# 3. 修改模板
# 3.1. 本地化处理
观察上述的文本内容，将其中的外链地址中的文件下载至目录中。其中：
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.png
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama@2x.png
1
2
3
4
5
2
3
4
5
下载完成后请将上述文件放置于libs文件夹中。
https://s.fotorama.io/1.jpg
https://s.fotorama.io/2.jpg
https://s.fotorama.io/3.jpg
https://s.fotorama.io/4.jpg
https://s.fotorama.io/5.jpg
1
2
3
4
5
2
3
4
5
以上的图片文件在下载后放入image文件夹中。
将上述库文件地址都修改为本地地址，最终修改完显示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jQuery 1.8 or later, 33 KB -->
<script src="library/js/fotorama/libs/jquery.min.js"></script>
<!-- Fotorama from CDNJS, 19 KB -->
<link href="library/js/fotorama/libs/fotorama.css" rel="stylesheet">
<script src="library/js/fotorama/libs/4.6.4/fotorama.js"></script>
</head>
<body>
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
data-allowfullscreen="true"
data-nav="thumbs">
<img src="library/js/fotorama/image/1.jpg">
<img src="library/js/fotorama/image/2.jpg">
<img src="library/js/fotorama/image/3.jpg">
<img src="library/js/fotorama/image/4.jpg">
<img src="library/js/fotorama/image/5.jpg">
</div>
</body>
</html>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 3.2. 标记参数
根据预设，将参数param_list替换显示的部分，简单设置相关选项，设置完成的显示内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jQuery 1.8 or later, 33 KB -->
<script src="library/js/fotorama/libs/jquery.min.js"></script>
<link href="library/js/fotorama/libs/fotorama.css" rel="stylesheet">
<script src="library/js/fotorama/libs/fotorama.js"></script>
</head>
<body>
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
data-allowfullscreen="true"
data-nav="thumbs"
data-width="100%"
data-ratio="700/467">
param_list
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
至此，模板内容已设置完成，可进入JQueryFrame组件管理界面，将上述内容填写入模板中。
# 3.3. 设置参数
在参数界面中，设置上述参数，分别为其设置默认值：
其中的param_list处设置的内容为
<img src="library/js/fotorama/image/1.jpg"><img src="library/js/fotorama/image/2.jpg"><img src="library/js/fotorama/image/3.jpg"><img src="library/js/fotorama/image/4.jpg"><img src="library/js/fotorama/image/5.jpg">
1
设置完成后会在编辑框中显示图片信息。
# 3.4. 与数据库字段联动
此示例无需与数据库字段联动。此部分请留空设置设置。
# 4. 设置文件
根据上述方式与默认的设置已经可以导入至UgJQueryFrame中查看演示。使用图片展示时，请确保图片文件尽量使用分辨率一致，纵横比一致的图片，这样能使界面在显示时达到最佳效果。