開始
- 前幾天接到一個小的支持，要做一個有圖像預覽和操作功能的demo，並且給出了參照的模板。剛開始簡單的看了一下給的模板，一個是boxImg.js，另一個是Viewer.js。
問題
-
其實圖片預覽的插件有很多，但大多都是點擊之后彈出一個模態層顯示圖片，而本次要求是直接在頁面上顯示，直接顯示在一個div里。剛開始用boxImg做了一版，使用了iframe，直接放到頁面當一個div用，效果是挺好，但是副作用感覺也挺大的，而且這個效果比較丑，因為不是我這邊使用，是另一個部門的用的，然后就把這一版給pass了。
-
boxImg.js的效果圖
- 做這個東西最大的問題就是不能以模態框的形式顯示，后來看了另一個Viewer.js，感覺功能比較強大，也很好看，最重要的是它有一個inline模式，可以局部模態框，最后選中用它來做。
修改
- 主要是對實例代碼的custom-toolbar.html進行了修改，根據api改為了inline mode，去除了模態框灰色背景，去除了右上角按鈕。
- 隱藏了背景圖片，並且通過定位讓底部的工具欄變成了豎的，我覺得橫的挺好看的，但需求讓改成豎的。
- 對於一些樣式的修改，主要通過css樣式的覆蓋，而不是直接改動源碼，這樣方便以后的開發加工。
效果
- 普通版
- 工具欄豎版
相關代碼參考我的github：黃燜雞米飯