圖片展示內容頁

1、制作圖片展示內容頁

內頁模板布局主要分三部分，頁頭/頁中/頁底。

頁面引用語法

1.1 引用頁頭模板header.html

{template 'header.html'}

1.2 頁中部分制作

圖片展示內容頁其他調用項都與普通內容頁雷同，區(qū)別在于多出了圖片輪播部分。

內容頁頁中調用可參考[ 查看 ]

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 助您「輕松搭建」企業(yè)官網。