:::

利用網頁語法插入點擊放大圖片

壹、基本語法

[img path="帳號" name="圖檔名稱" title="圖片替代文字" show_title=1 border=1 zoom=1 color="顏色"]

【說明】：

  • 指令前後必需以中括號括起來。
  • 各參數間以一個空白 (space) 隔開。
  • 除參數 link 必需放在第一個位置外，其餘參數的先後順序無關。
  • 參數說明：
參數img
說明系統保留字，代表要產生點擊放大效果的圖片，此參數不可省略。
用法img
參數path
說明設定圖檔所在的資料夾，通常為使用者帳號，此參數不可省略。
用法path=”sc210″
參數name
說明指定圖檔的檔名，此參數不可省略。
用法name=”IMG_6110.jpg”
參數title
說明輸入不超過 75 個中文字或 150 個英文字的圖片說明文字，此參數若省略，系統會以圖檔的主檔名當作替代文字。
用法title=”氣象探測之大氣探測”
參數show_title
說明設定是否要在圖檔下方顯示替代文字，此參數若省略，則會在圖檔下方顯示替代文字。

  • show_title=0　不顯示替代文字
  • show_title=1　顯示替代文字 (預設值)
用法show_title=0
參數border
說明設定圖片是否要加上邊框，此參數若省略，則圖檔會自動加上邊框。

  • border=0　不顯示邊框
  • border=1　顯示邊框 (預設值)
用法border=0
參數zoom
說明設定是否要產生點擊圖片放大的效果，此參數若省略，會產生點擊放大的效果。

  • zoom=0　不產生點擊放大效果
  • zoom=1　產生點擊放大效果 (預設值)
用法zoom=0
參數color
說明若要在圖片下方顯示替代文字，可設定文字的顏色，可使用的顏色代碼為 black、blue、red、green、yellow，若未指定，預設值為 blue。
用法color=”green”
參數 說明 用法
img 系統保留字，代表要產生點擊放大效果的圖片，此參數不可省略。 img
path 設定圖檔所在的資料夾，通常為使用者帳號，此參數不可省略。 path=”sc210″
name 指定圖檔的檔名，此參數不可省略。 name=”IMG_6110.jpg”
title 輸入不超過 75 個中文字或 150 個英文字的圖片說明文字，此參數若省略，系統會以圖檔的主檔名當作替代文字。 title=”氣象探測之大氣探測”
show_title 設定是否要在圖檔下方顯示替代文字，此參數若省略，則會在圖檔下方顯示替代文字。

  • show_title=0　不顯示替代文字
  • show_title=1　顯示替代文字 (預設值)
 show_title=0
border 設定圖片是否要加上邊框，此參數若省略，則圖檔會自動加上邊框。

  • border=0　不顯示邊框
  • border=1　顯示邊框 (預設值)
 border=0
zoom 設定是否要產生點擊圖片放大的效果，此參數若省略，會產生點擊放大的效果。

  • zoom=0　不產生點擊放大效果
  • zoom=1　產生點擊放大效果 (預設值)
 zoom=0
color 若要在圖片下方顯示替代文字，可設定文字的顏色，可使用的顏色代碼為 black、blue、red、green、yellow，若未指定，預設值為 blue。 color=”green”

貳、設定圖檔排列的樣式

<ul class="col s2 m2 l4 xl4">
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
    <li>[img path="帳號" name="檔名" title="替代文字" show_title=0]</li>
</ul>

【說明】：

  • 整個列表區標示在 <ul> … </ul> 之間。
  • 每一個網址連結，前後以 <li> … </li> 標示。
  • <ul class=”…”> 內的 class= 是用來設定顯示的樣式，各參數用法說明如下：
    參數col
    說明系統保留字，代表此區的內容要列表顯示，此參數不能省略。
    參數s
    說明為 Small 的簡寫，後接一個數字，用來設定手機 (螢幕寬度 480 – 767px) 一列要顯示幾張圖檔，可使用的值為 s1 – s4。
    參數m
    說明為 Medium 的簡寫，後接一個數字，用來設定平板 (螢幕寬度 768 – 1023px) 一列要顯示幾張圖檔，可使用的值為 m1 – m4。
    參數l
    說明為 Large 的簡寫 (小寫的 L，非數值 1)，後接一個數字，用來設定筆電 (螢幕寬度 1024 ~ 1299px) 一列要顯示幾張圖檔，可使用的值為 l1 – l8。
    參數xl
    說明為 eXtral Large 的簡寫，後接一個數字，用來設定桌機 (螢幕寬度 1300px 以上) 一列要顯示幾張圖檔，可使用的值為 xl1 – xl8。
    參數 說明
    col 系統保留字，代表此區的內容要列表顯示，此參數不能省略。
    s 為 Small 的簡寫，後接一個數字，用來設定手機 (螢幕寬度 480 – 767px) 一列要顯示幾張圖檔，可使用的值為 s1 – s4。
    m 為 Medium 的簡寫，後接一個數字，用來設定平板 (螢幕寬度 768 – 1023px) 一列要顯示幾張圖檔，可使用的值為 m1 – m4。
    l 為 Large 的簡寫 (小寫的 L，非數值 1)，後接一個數字，用來設定筆電 (螢幕寬度 1024 ~ 1299px) 一列要顯示幾張圖檔，可使用的值為 l1 – l8。
    xl 為 eXtral Large 的簡寫，後接一個數字，用來設定桌機 (螢幕寬度 1300px 以上) 一列要顯示幾張圖檔，可使用的值為 xl1 – xl8。

【範例】點擊放大的圖檔列表 (顯示替代文字)

<p class="user_title style03 orange mb10">獨立研究</p>
<ul class="col s2 m2 l4 xl4">
    <li>[img path="user_guide" name="IMG_6110.jpg" title="氣象探測之大氣探測"]</li>
    <li>[img path="user_guide" name="IMG_6113.jpg" title="無機構造解說"]</li>
    <li>[img path="user_guide" name="IMG_6146.jpg" title="地球光年計算"]<li>
    <li>[img path="user_guide" name="IMG_6130.jpg" title="生態系的定義與組成"]</li>
</ul>

獨立研究