本章将汇总一些解决项目实施需求的组件案例，对灵活开发和应用 WebFuture 产品组件功能提供启示实例。本文将在网站中实现图片全屏相册展示的效果。
初始需求
某个项目提出一个比较特殊的需求：首页图片列表不需要进入详情页，而是实现另外一种全屏展示效果，其要求有：
- 点击任何一张图都能弹出全屏显示当前图片的原图
- 支持上下图片切换
- 全屏支持手机版
- 手机版时支持手势上下切换
- 手机版时支持两指放大缩小图片
- 点击黑色区域关闭弹出层
- 文章内容中的图片也要实现上面的要求
演示效果
最终完成的图片全屏相册展示效果的演示如下（网站首页在“校园生活”部分）：
网站首页图片列表全屏弹出展示效果（也可以应用到栏目列表页）：
文章内容页图片全屏展示效果：
图片-内容页全屏展示效果：
其中：
- 网站首页图片列表全屏弹出展示效果（也可以应用到栏目列表页）。
- 文章内容页、图片内容页全屏展示。
- 优化了js，调整为不需要因为html结构而新增特殊组件，按照原有默认html结构获取数据。
- 优化和追加了手机版。
使用方法
第一种：首页、栏目列表页特定HTML结构使用
<!-- HTML结构 S -->
<ul class="pic-list" id="gallery-list">
<li data-pic="/upload/main/45d020cee3bf43dfa2505693f5bdc5fd.jpg" data-title="田径场">
<div class="pic">
<img src="/upload/main/45d020cee3bf43dfa2505693f5bdc5fd_330_248.jpg" alt="田径场">
</div>
<div class="title">
<span class="tit">田径场</span>
</div>
</li>
<li data-pic="/upload/main/60e2626fa3724397baad9ae49a5ff72f.jpg" data-title="文体中心内景">
<div class="pic">
<img src="/upload/main/60e2626fa3724397baad9ae49a5ff72f_330_248.jpg" alt="文体中心内景">
</div>
<div class="title">
<span class="tit">文体中心内景</span>
</div>
</li>
<li data-pic="/upload/main/06cc9fbade7644a587bcf579a0aec382.jpg" data-title="田径场鸟瞰" >
<div class="pic">
<img src="/upload/main/06cc9fbade7644a587bcf579a0aec382_330_248.jpg" alt="田径场鸟瞰">
</div>
<div class="title">
<span class="tit">田径场鸟瞰</span>
</div>
</li>
<li data-pic="/upload/main/3fcd135985484c6fbc80390feb0ed76e.jpg" data-title="综合球场" >
<div class="pic">
<img src="/upload/main/3fcd135985484c6fbc80390feb0ed76e_330_248.jpg" alt="综合球场">
</div>
<div class="title">
<span class="tit">综合球场</span>
</div>
</li>
<li data-pic="/upload/main/80954aa4389e4a6fabbbbbe623fd929d.jpg" data-title="足球场" >
<div class="pic">
<img src="/upload/main/80954aa4389e4a6fabbbbbe623fd929d_330_248.jpg" alt="足球场">
</div>
<div class="title">
<span class="tit">足球场</span>
</div>
</li>
<li data-pic="/upload/main/1a83f6fb82d44ade8e0916f1814d85c8.jpg" data-title="羽毛球场" >
<div class="pic">
<img src="/upload/main/1a83f6fb82d44ade8e0916f1814d85c8_330_248.jpg" alt="羽毛球场">
</div>
<div class="title">
<span class="tit">羽毛球场</span>
</div>
</li>
<li data-pic="/upload/main/18a7efd436bd4dafb524ce2f1aae8efc.jpg" data-title="跑道" >
<div class="pic">
<img src="/upload/main/18a7efd436bd4dafb524ce2f1aae8efc_330_248.jpg" alt="跑道">
</div>
<div class="title">
<span class="tit">跑道</span>
</div>
</li>
<li data-pic="/upload/main/b561b023e7214afc9d19e6bd4555ef3f.jpg" data-title="校大门" >
<div class="pic">
<img src="/upload/main/b561b023e7214afc9d19e6bd4555ef3f_330_248.jpg" alt="校大门">
</div>
<div class="title">
<span class="tit">校大门</span>
</div>
</li>
<li data-pic="/upload/main/71efc1562ce344f7b0ed9ccfa65a1cbd.jpg" data-title="教学楼" >
<div class="pic">
<img src="/upload/main/71efc1562ce344f7b0ed9ccfa65a1cbd_330_248.jpg" alt="教学楼">
</div>
<div class="title">
<span class="tit">教学楼</span>
</div>
</li>
<li data-pic="/upload/main/1edfd072fbb14ba3934cf3812eddc222.jpg" data-title="图书馆" >
<div class="pic">
<img src="/upload/main/1edfd072fbb14ba3934cf3812eddc222_330_248.jpg" alt="图书馆">
</div>
<div class="title">
<span class="tit">图书馆</span>
</div>
</li>
</ul>
<!-- js和css调用和使用 S -->
<link href="./galleryslides.css" rel="stylesheet" />
<script src="./galleryslides.js"></script>
<script>
//全屏图片展示
gallerySlides({
ementObj:"#gallery-list",
imgElement:"li",
imgAttribute:"data-pic",
titeAttribute:"data-title"
});
</script>
第二种：文章内容页的使用
<!-- HTML结构 S -->
<div class="conTxt" id="gallery-box">
<!-- 正文内容部分 -->
</div>
<!-- js和css调用和使用 S -->
<link href="./galleryslides.css" rel="stylesheet" />
<script src="./galleryslides.js"></script>
<script>
//全屏相册展示
gallerySlides({
ementObj:"#gallery-box",
imgElement:"img",
imgAttribute:"src",
titeAttribute:"alt",
});
</script>
第三种：图片内容页的使用
<!-- 图片内容页，图集数组原内容 S -->
<script>
//图片集数据
var slide_data = eval(@(PhotoService.GetSlideDataHtml(Power.Url,Model, "/content/_common/base/img/nopic.gif")));
</script>
<!-- HTML的点击元素 S -->
<div class="swpt-full-wrap">
<a id="galleryslides-btn" class="swpt-full-tip"><i></i>全屏观看</a>
</div>
<!-- js和css调用和使用 S -->
<link href="./galleryslides.css" rel="stylesheet" />
<script src="./galleryslides.js"></script>
<script>
// 获取相册内容数组
var galleryItems = slide_data.images.map(obj => {
return {
src: obj.image_url,
title: obj.intro
};
});
// 通过解析 URL 获取参数值的函数
function getParamValue(url, param) {
var urlParams = new URLSearchParams(url.split('#')[1]);
var value = urlParams.get(param);
return value ? parseInt(value) : 0;
}
//全屏相册展示
var myGallery = gallerySlides({
galleryItems: galleryItems
});
document.getElementById("galleryslides-btn").addEventListener('click', function(e) {
e.stopImmediatePropagation();
myGallery.show(getParamValue(window.location.href, 'p') - 1);
});
</script>
可配置参数如下：
ementObj: null,//需要图集展示的父元素，支持id:"#"+id名；class："."+类名。
galleryItems:null,//传递展示图片数组结构：[{src:"",title:"",ulr:""}],其中src属性必填
currentIndex:0,//第几个图片
imgElement:"img",//图片地址元素名
imgAttribute: "data-pic",//图片地址属性名
titeAttribute: "data-title",//图片标题属性名
urlAttribute:null,//图片跳转地址
urlTarget:"_blank",//图片跳转地址打开方式
showNum:true,//是否需要显示"当前序号/总数"
minWidth:100,//最低图片宽度
minHeight:100,//最低图片高度