7/05/2018

讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens

A+
jquery-image-zoom-mlens.jpg-讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens最近接到的需求是,希望滑鼠經過圖片時,能像使用放大鏡一樣,掃過的區域有放大的效果。

類似的功能還滿常見的,例如購物網站,需要展示產品的頁面,由於網頁的空間、寬度有限,圖片很難呈現局部細節。為了降低消費者的疑慮,有必要用放大鏡功能,讓小圖來呈現大圖的細部效果。

另外客戶也希望行動版有同樣效果,也就是網頁版的滑鼠 hover 效果,在行動版上需要支援 touch(碰觸) 效果。本篇要介紹的 jQuery 外掛 mlens 符合以上需求,也一併整理許多讓圖片有放大效果的相關外掛。



一、圖片放大相關外掛


1. Cloud Zoom

  • Cloud Zoom 官網
  • 非常有質感,效果非常棒的外掛
  • 操作介面非常友善,例如滑鼠滾輪就能直接調整縮放比例。同時功能豐富齊全,也有詳細的 API 操作說明
  • 可惜已經不是免費,但仍可索取測試版來用


2. Image Zoom



3. 其他外掛




二、mlens 官網


jquery-image-zoom-mlens-1.jpg-讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens


會介紹這個外掛,主要是因為功能沒有太多,就是單純放大鏡功能,所以檔案很小。但不錯的地方在於,仍有支援行動版 touch 功能

另外官網展示頁面也值得介紹,如上圖,各種參數一目了然,直接修改後,按下「Apply changes」就能立刻看到效果。

下圖是範例效果,滑鼠移到圖片上方即可看到放大鏡效果:

jquery-image-zoom-mlens-2.jpg-讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens



三、安裝程式碼


1. 準備動作

以下程式碼請放在範本中 </head> 之前:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--mlens 圖片放大-->
<script>
//<![CDATA[
/*! jquery.mlens.js - magnifying lens jQuery plugin for images by Federica Sibella (@musings.it) - Double licensed MIT and GPLv3 */
!function(e){function t(e){if("string"==typeof e){var t=e.indexOf("_");-1!=t&&(e=e.substr(t+1))}return e}function i(e,t){if("string"==typeof e){var i=e.indexOf(t);if(-1!=i)return!0}return!1}var n=[],r=0,o={init:function(t){var o={lensShape:"square",lensSize:[100,100],borderSize:4,borderColor:"#888",borderRadius:0,imgSrc:"",imgSrc2x:"",lensCss:"",imgOverlay:"",overlayAdapt:!0,zoomLevel:1,responsive:!0},a=e.extend({},o,t),s="100px",d="100px";if(i(a.lensSize,",")){var u=a.lensSize.indexOf(","),l=[];l[0]=a.lensSize.substring(0,u),l[1]=a.lensSize.substring(u+1),a.lensSize=l}this.each(function(){var t=e(this),u=t.data("mlens"),l=e(),c=e(),g=e(),p=e(),h=t.attr("src"),m="auto";("number"!=typeof a.zoomLevel||a.zoomLevel<=0)&&(a.zoomLevel=o.zoomLevel);var v=new Image;""!==a.imgSrc2x&&window.devicePixelRatio>1?(h=a.imgSrc2x,v.onload=function(){m=String(parseInt(this.width/2)*a.zoomLevel)+"px",l.css({backgroundSize:m+" auto"}),p.css({width:m})},v.src=h):(""!==a.imgSrc&&(h=a.imgSrc),v.onload=function(){m=String(parseInt(this.width)*a.zoomLevel)+"px",l.css({backgroundSize:m+" auto"}),p.css({width:m})},v.src=h),jQuery.isArray(a.lensSize)===!0?(s=i(a.lensSize[0],"%")||i(a.lensSize[0],"px")?String(a.lensSize[0]):String(a.lensSize[0])+"px",d=i(a.lensSize[1],"%")||i(a.lensSize[1],"px")?String(a.lensSize[1]):String(a.lensSize[1])+"px"):(s=i(a.lensSize,"%")||i(a.lensSize,"px")?String(a.lensSize):String(a.lensSize)+"px",d=s);var f="background-position: 0px 0px;width: "+s+";height: "+d+";float: left;display: none;border: "+String(a.borderSize)+"px solid "+a.borderColor+";background-repeat: no-repeat;position: absolute;",S="position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; z-index: 1;";switch(a.overlayAdapt===!0&&(S+="background-position: center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"),a.lensShape){case"square":f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;";break;case"":f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;";break;case"circle":f+="border-radius: 50%;",S+="border-radius: 50%;";break;default:f=f+"border-radius:"+String(a.borderRadius)+"px;",S=S+"border-radius:"+String(a.borderRadius)+"px;"}return t.wrap("<div id='mlens_wrapper_"+r+"' />"),g=t.parent(),a.responsive===!0?t.css({width:"100%"}):g.css({width:t.width()}),l=e("<div id='mlens_target_"+r+"' style='"+f+"' class='"+a.lensCss+"'>&nbsp;</div>").appendTo(g),l.css({backgroundImage:"url('"+h+"')",backgroundSize:m+" auto",cursor:"none"}),p=e("<img style='display:none;width:"+m+";height:auto;max-width:none;max-height;none;' src='"+h+"' />").appendTo(g),""!==a.imgOverlay&&(c=e("<div id='mlens_overlay_"+r+"' style='"+S+"'>&nbsp;</div>"),c.css({backgroundImage:"url('"+a.imgOverlay+"')",cursor:"none"}),c.appendTo(l)),t.attr("data-id","mlens_"+r),l.mousemove(function(i){e.fn.mlens("move",t.attr("data-id"),i)}),t.mousemove(function(i){e.fn.mlens("move",t.attr("data-id"),i)}),l.on("touchmove",function(i){i.preventDefault();var n=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];e.fn.mlens("move",t.attr("data-id"),n)}),t.on("touchmove",function(i){i.preventDefault();var n=i.originalEvent.touches[0]||i.originalEvent.changedTouches[0];e.fn.mlens("move",t.attr("data-id"),n)}),l.hover(function(){e(this).show()},function(){e(this).hide()}),t.hover(function(){l.show()},function(){l.hide()}),l.on("touchstart",function(t){t.preventDefault(),e(this).show()}),l.on("touchend",function(t){t.preventDefault(),e(this).hide()}),t.on("touchstart",function(e){e.preventDefault(),l.show()}),t.on("touchend",function(e){e.preventDefault(),l.hide()}),t.data("mlens",{image:t,settings:a,target:l,imageTag:p,imgSrc:h,imgWidth:m,imageWrapper:g,overlay:c,instance:r,lensSizeHoriz:s,lensSizeVert:d}),u=t.data("mlens"),n[r]=u,r++,n})},move:function(e,i){e=t(e);var r=n[e],o=r.image,a=r.target,s=r.imageTag,d=o.offset(),u=parseInt(i.pageX-d.left),l=parseInt(i.pageY-d.top),c=s.width()/o.width(),g=s.height()/o.height();return u>0&&l>0&&u<o.width()&&l<o.height()&&(u=String(-((i.pageX-d.left)*c-a.width()/2)),l=String(-((i.pageY-d.top)*g-a.height()/2)),a.css({backgroundPosition:u+"px "+l+"px"}),u=String(i.pageX-d.left-a.width()/2),l=String(i.pageY-d.top-a.height()/2),a.css({left:u+"px",top:l+"px"})),r.target=a,n[e]=r,n},update:function(t){e(this).mlens("destroy"),e(this).mlens("init",t)},destroy:function(){var i=t(e(this).attr("data-id")),r=n[i];r.target.remove(),r.imageTag.remove(),r.image.unwrap(),r.overlay.remove(),e.removeData(r,"mlens"),this.unbind(),this.element=null}};e.fn.mlens=function(t){return o[t]?o[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist on jQuery.mlens"):o.init.apply(this,arguments)}}(jQuery);
//]]>
</script>

第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。


2. 圖片設定

要產生圖片放大效果的圖片,HTML 碼請進行以下設定:

<img class="zoom" src="小圖網址" data-big="大圖網址"/>
  • 如果原圖尺寸夠大的話,那麼兩個圖片網址都填一樣也沒關係。
  • 要有放大效果的圖片,必須加上 class="zoom"


3. 執行程式碼

以下程式碼請放在範本中 </body> 的前一行:

<!--mlens 設定-->
<script>
//<![CDATA[
$(".zoom").each(function() {
var $this = $(this);
$this.mlens({
imgSrc: $this.attr("data-big"),
lensShape: "circle", // 放大鏡形狀 circle(圓形), square(方形)
lensSize: ["20%", "30%"], // 放大鏡長寬 (可使用 px 或百分比 %)
borderSize: 3, // 放大鏡邊框寬度 (px)
borderColor: "#fff", // 放大鏡邊框顏色色碼
borderRadius: 0, // 如果放大鏡為方形 設定圓角程度
overlayAdapt: true,
zoomLevel: 1,
responsive: true // 圖片是否自適應
});
}).parent().css("position", "relative");
//]]>
</script>

由於這個外掛在某些模版可能會產生衝突,所以上面的安裝程式碼與官網不同:

  • 我已修正官方 code 會衝突的問題
  • 簡化參數,需要完整參數請參閱官網
  • 所有修改參數請參照註解說明修改即可

放大鏡的效果大致如下:

jquery-image-zoom-mlens-2.jpg-讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens




更多 jQuery 外掛:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

2 則留言:

  1. 非常有趣的一個"放大鏡"方法.
    不過在操作上, 有2個問題.
    1) 滑鼠點圖, 有圓形放大鏡, 一旦滑到邊界, 只有"半"圓放大鏡時, 滑鼠再向邊推, "放大鏡"不會消失(本來是不錯的設計), 鼠標也看不見, 原來要一直滑到整個圓形放大鏡以外位置, 才可以停止放大鏡, 鼠標重現. 操作上總是怪怪的. 建議"鼠標"一旦離開圖片, "放大鏡"馬上消失.
    2) 手機點屏使用時, 手指把"放大鏡"完全擋住, 根本看不到放大位置. 建議"放大鏡"回應時, 手指位置定位在"放大鏡"圓環上, 方法看到放大效果.
    希望有更好的操作體驗. 言身寸

    回覆刪除
    回覆
    1. 1. 關於第一點 可操作官方的展示頁面 應該沒有上面提到的狀況 這代表是我的範本 CSS 跟外掛程式衝突 導致您提到的現象 如果裝在您的網站沒這個問題就不用另外調 CSS

      2. 這是好建議 會有這現象 解決的方法可以調大放大鏡尺寸 另外就是看能否修改 CSS 讓觸控的位置出現在放大鏡邊緣

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP