5-8
加入fancybox燈箱效果
- 目前點擊圖片是沒有反應的，我們希望點擊縮圖，可以出現大圖，若是影片則開始播放影片，但又不希望離開目前頁面，要作到這種效果，可以用燈箱效果工具來做，其中又以 FancyBox 最為有名。
- FancyBox 官網：http://fancyapps.com/fancybox/3/
- 安裝 FancyBox， 按 Ctrl+` 開啟終端機，並貼上以下指令執行之 ：
npm install --save @fancyapps/ui
- 由於要引入 FancyBox 的 js 及 css 檔，所以接著得修改
index_head.tpl，加入：
<!-- 引入 fancybox -->
<script src="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.css" />
- 最後修改
op_show.tpl，將縮圖加上連結，並連結圖檔。連結中須加入 data-fancybox="gallery" 才會有作用
{foreach $news.files as $filename=> $file_path}
<a href="{$file_path}" data-fancybox="gallery" data-caption="{$filename}">
<img src="{$file_path}" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
</a>
{/foreach}
- 最後修改
index_content.tpl，將縮圖也套上連結
{if is_file(reset($news.files))}
<a href="{reset($news.files)}" data-fancybox="gallery" data-caption="{reset($news.files)}">
<img src="{reset($news.files)}" alt="" class="img-thumbnail"
style="object-fit: cover; width: 100%; height: 200px;">
</a>
{else}
<img src="https://picsum.photos/seed/picsum/400/400" alt="" class="img-thumbnail"
style="object-fit: cover; width: 100%; height: 200px;">
{/if}
- 最後在
index.tpl 最下方加入 FancyBox 的套用語法：
<!-- Bootstrap JavaScript Libraries -->
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
Fancybox.bind("[data-fancybox]");
</script>
- 點擊縮圖就會像這樣：
5-7 完成顯示單一文章的功能
