此擴充元件提供圖片另外一種瀏覽的方式,即是以滑鼠移動檢視局部放大的瀏覽效果,只要準備小圖與放大圖,即可快速加入此效果於頁面上。
STEP1.
開啟範例練習檔dw08.html,再新增一空白檔案為 dw08-iframe.html,為要插入『jqzoom』元件。直接由dw08-jqzoom.html程式碼內,複選並貼入所需 CSS 與 Javasccript 檔連接於</head>之前:
以及複選並貼入dw08-iframe.html於<body>內加入所需內容:
STEP2.
點取加入的內容,切換至程式碼並修正影像為預先準備小圖(white-car-image-s.jpg)與大圖(white-car-image.jpg),原圖為小圖、連結為大圖。
STEP3.
可以切換至程式碼,更改放大檢視的視窗大小,更改【zoomWidth】與【zoomHeight】即可;檢視視窗上方的標題,只要更改【title】。
STEP4.
對於顯示視窗的屬性,可以至 CSS 樣式控制板上更改控制標題的【div.jqZoomTitle】,更改 font-size、height、color、background-color;更改控制顯示視窗的【.jqZoomWindow】按下編輯更改邊框屬性即可。
STEP5.
回到原頁面dw08.html,確定滑鼠游標在要插入內頁框儲存格內,加入<iframe>內容即可。