图片展示内容页

1、制作图片展示内容页

内页模板布局主要分三部分，页头/页中/页底。

页面引用语法

1.1 引用页头模板header.html

{template 'header.html'}

1.2 页中部分制作

图片展示内容页其他调用项都与普通内容页雷同，区别在于多出了图片轮播部分。

内容页页中调用可参考[ 查看 ]

1.3 引用页底模板footer.html

{template 'footer.html'}

2、内页多图轮播

图片轮播代码：

<link href="{$skin_path}/js/lightgallery/css/lightgallery.css" rel="stylesheet">
<div id="carousel-example-generic" class="carousel slide section clearfix" data-ride="carousel" style="max-height:700px; margin-top:10px; overflow:hidden;">
<!-- 大图切换 -->
<div class="carousel-inner demo-gallerylist-unstyled row" id="lightgallery" role="listbox">
{loop $archive['pics'] $i $pic}
<div class="item img-auto{if $i==1} active{/if}" data-src="{$pic['url']}" data-sub-html="{$pic['alt']}">
<a href="" rel="lightbox['roadtrip']"><img src="{$pic['url']}" alt="{$pic['alt']}" class="img-responsive" onerror='this.src="{config::get('onerror_pic')}"' /></a>
</div>
{/loop}
</div>
<!-- 左右按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

图片轮播必须加载js调用：

<script src="{$skin_path}/js/lightgallery/js/lightgallery.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-pager.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-fullscreen.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-zoom.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-hash.min.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

用 CmsEasy 助您「轻松搭建」企业官网。