jQuery iViewer是一款基于jQuery的圖片查看器插件，可以在網頁中顯示圖片，并提供縮放、旋轉、拖拽等功能，使用戶能夠輕松查看完整的圖片內容。以下是對jQuery iViewer的詳解及使用方法。

使用前需要引入 jQuery 和 jQuery iViewer 插件，例如：

<script src="jquery.min.js"></script>
<script src="jquery.iviewer.min.js"></script>
<link rel="stylesheet" href="jquery.iviewer.css">

然后通過JavaScript代碼來創建查看器，例如：

<div id="iviewer"></div>
<script>
$("#iviewer").iviewer({
src: "image.jpg",
zoom_min: 100,
zoom: "fit",
mousewheel: true,
onStartLoad: function() {
console.log("開始加載");
},
onFinishLoad: function() {
console.log("加載完成");
},
onErrorLoad: function() {
console.log("加載錯誤");
}
});
</script>

上述代碼中，首先創建一個div容器，然后通過$("#iviewer").iviewer({...})調用插件來創建查看器，其中src屬性指定了圖片的路徑，zoom_min屬性指定了縮放的最小值，zoom屬性指定了初始縮放比例（"fit"表示適應容器大小），mousewheel屬性指定是否開啟鼠標滾輪縮放功能。另外，onStartLoad、onFinishLoad、onErrorLoad屬性分別定義了在開始加載、加載完成、加載錯誤時執行的函數。

查看器提供了多種交互功能，例如縮放、旋轉、拖拽等。以下是常用的一組函數：

$("#iviewer").iviewer("zoom_by", 50); // 放大50%
$("#iviewer").iviewer("zoom_by", -50); // 縮小50%
$("#iviewer").iviewer("rotate", 90); // 順時針旋轉90度
$("#iviewer").iviewer("rotate", -90); // 逆時針旋轉90度
$("#iviewer").iviewer("set_zoom", 100); // 設置縮放比例為100%
$("#iviewer").iviewer("resize"); // 重新調整大小

需要注意的是，查看器必須在圖片加載完成后才能使用交互功能。因此，在代碼中可以使用onFinishLoad函數來執行初始化工作。

jQuery iViewer還支持多種事件，例如在圖片拖拽、縮放、旋轉等操作時觸發。以下是其中的一組事件：

$(document).on("iviewer_zoom", "#iviewer", function() {
console.log("縮放中...");
});
$(document).on("iviewer_zoomed", "#iviewer", function() {
console.log("縮放完成！");
});
$(document).on("iviewer_moving", "#iviewer", function() {
console.log("拖拽中...");
});
$(document).on("iviewer_moved", "#iviewer", function() {
console.log("拖拽完成！");
});

上述代碼中，首先通過$(document).on("iviewer_事件名", "#iviewer", function(){...})綁定事件，其中#iviewer表示容器的id，事件名可以是zoom（縮放）、rotate（旋轉）、move（拖拽）等。

總之，jQuery iViewer是一款實用的圖片查看器插件，具有豐富的交互功能和事件處理方式，可以為用戶提供良好的體驗。