Magnify 圖片放大鏡 -  jQuery 套件

設計購物網站時，常常都會覺得圖片的位置不夠用，不能夠讓產品的圖片很漂亮的展示於使用者瀏覽，Magnify 可以讓您輕鬆地建立一個圖片的"放大鏡"，您只需要建立一個小型圖片和一個大型圖片大小的比例，相對應的配置您的標記就可以使用了。Magnify 基於 jQuery 框架開發，所以支援大部分的瀏覽器例如：IE6+、FireFox、Apple Safari、Google Chrome等瀏覽器。

使用方法：
第一步 載入 Magnify 需要使用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Magnify 的主程式碼 -->
<script type="text/javascript" src="jquery.magnify-1.0.2.pack.js"></script>

第二步 使用 HTML 建立大張圖片連結和小張縮圖
<a href="大張圖片連結" id="demo">
    <img src="小張的圖片" border="0">
</a>

第三步 使用 JavaScript 建立 Magnify 物件啟動
$(function(){
    $("#demo").magnify({
        showEvent: 'click',
        hideEvent: 'click',
        lensWidth: 60,
        lensHeight: 60,
        preload: false,
        stagePlacement: 'left',
        loadingImage: 'pages/jquery/ajax-loader_gray.gif',
        lensCss: {
            backgroundColor: '#cc0000',
            border: '0px',
            opacity: 0.5
        },
        stageCss: { border: '4px solid #33cc33' }  
    });
});

附上 Magnify 可修改參數

參數	型態	預設	說明
lensWidth	整數	100	設定放大鏡寬度
lensHeight	整數	100	設定放大鏡高度
showEvent	字串	'mouseover'	設定出現放大鏡的事件
hideEvent	字串	'mouseout'	設定消失放大鏡的事件
stagePlacement	字串	'right'	放大鏡出現的地方可設定為 right,left
preload	布林	true	是否於頁面加載便加載大型圖片
loadingImage	字串	null	讀取中的圖片
stageCss	物件	空物件	額外增加 CSS 樣式
lensCss	物件	空物件	小圖方框的額外 CSS 樣式
onBeforeShow	函式	空函式	圖片讀取前執行
onAfterShow	函式	空函式	圖片讀取後執行
onBeforeHide	函式	空函式	結束放大鏡前執行
onAfterHide	函式	空函式	結束放大鏡後執行

作者網站：http://www.jnathanson.com/
檔案大小：13 KB
檔案下載：http://www.jnathanson.com/pages/jquery/magnify/1.0.2/jquery.magnify-1.0.2.pack.js
檔案備份：下載