jQuery Prettyphoto 影像互動瀏覽
2020/05/13閱讀時間約 1 分鐘
提供快速建立可自動撥放與 前後切換顯示大圖的瀏覽方式，且大圖周 圍將以半透明圓角矩形的效果呈現。
STEP1.
開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。
開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。
至dw12-prettyphoto.html直接複製所需CSS與Javasccript檔連接，並貼入於dw12.html內</head>之前:
以及主要內容於內容區(<td>)之內:
STEP2.
依序直接更改圖片內容原始檔與連結圖檔為其對應大圖:
依序直接更改圖片內容原始檔與連結圖檔為其對應大圖:
若要增加圖片內容請至程式碼直接增加完整一組<a>…</a>，並更改title，即可儲存檔案後預覽檢視，除了可以前後切換外，還可以由下方顯式的小圖切換顯示。
STEP3.
對於外觀屬性部分，可以至 CSS 樣式 控制版上設定「.container」width:600px（同內容區寬），讓整個 內容區符合頁面內容區尺寸；若要更改小圖周圍邊框，可以更改「.border」內的邊框、間距與內距設定。
對於外觀屬性部分，可以至 CSS 樣式 控制版上設定「.container」width:600px（同內容區寬），讓整個 內容區符合頁面內容區尺寸；若要更改小圖周圍邊框，可以更改「.border」內的邊框、間距與內距設定。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部