Javascript, 網頁設計

jQuery外掛-CloudZoom放大鏡+ThickBox燈箱整合包隨即套用

梅干 2010/09/24
梅問題-jQuery教學-cloud-zoom放大鏡thickbox燈箱效果大整合立即可用
  有在收看梅問教學網的朋友,應該不難發現到,在梅問題的教學文章中,當把滑鼠移到縮圖上時,右邊就會出現放大鏡的效果,這對檢視圖片來說,是個相當方便的方法,而最近梅干又發現到一隻相當不錯的放大鏡套件CloudZoom,這隻外掛與教學網中所使用的效果差不多,但各位會發現到在教學網中單響影像時,圖片則會在另開視窗,所以這時梅干就在想,若單響圖片時能以燈箱的方式作為顯示,那這樣就不會開啟一堆視窗了,於是請教了好友男丁,有沒有辦法把CloudZoomTickBox整合在塊,哈~真沒想到,男丁老師終於完成了梅干的夢想,而梅干下午就花了點時間,把它整理一下分享各位,讓各位直接就可套用。

所使用的套件:
套件名稱:cloud-zoom(放大鏡)
套件版本:1.0.2
官方網站:http://www.professorcloud.com/mainsite/cloud-zoom.htm

套件名稱:Thickbox
套件版本:3.1
官方網站: http://jquery.com/demo/thickbox/

放在<head>.....</head>之間:
可由官網中下載套件,下載完畢後二個套件放在同一目錄下,並且引將這二隻外掛引用進來。
<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.min.js"></script> 
<link type="text/css" href="cloud-zoom/cloud-zoom.css" rel="stylesheet" media="screen" /> 
<script type="text/javascript" src="thickbox/thickbox-compressed.js"></script> 
<link type="text/css" href="thickbox/thickbox.css" rel="stylesheet" media="screen" /> 
<style type="text/css"> 
body, div, ul, li { margin:0; padding:0;}
.wrapper { width:300px; height:420px; border:4px solid #ccc; background:#ddd;}
.cloud-zoom {display:block; width:300px; height:420px;}
 </style> 

放在<body>.....</body>之間:
<div class="wrapper">
	<script>
		$(function(){
			$('.mousetrap').live('click', function(){
				$('#zoom1').click();
			});
		});
	</script>
    <!-- 第一張截入的影像,這邊的zoom1不可更改,rel是設定Cloud-Zoom的參數 -->
	<a id="zoom1" class="thickbox cloud-zoom" href="image/minwt_demo01.jpg" rel="adjustX:10, adjustY:-4"> 
	<img src="image/minwt_demo01m.jpg" title="梅問題比G尼人像攝影" ></a> 
</div>
<!-- 縮圖的存放位置, 這邊只須指定照片的尺寸大小就可以了,分別要準備大中小,中是上力圖片顯示用,小是下方的縮圖,大是滑鼠滑入的放大效果 -->
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo02m.jpg'" href="image/minwt_demo02.jpg"><img src="image/minwt_demo02s.jpg"></a>
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo03m.jpg'" href="image/minwt_demo03.jpg"><img src="image/minwt_demo03s.jpg"></a>
<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'image/minwt_demo04m.jpg'" href="image/minwt_demo04.jpg"><img src="image/minwt_demo04s.jpg"></a>

cloud-zoom rel可用參數設定:
參數 說明 預設值
zoomWidth 放大鏡的寬度 'auto'
zoomHeight 放大鏡的高度 'auto'
position 放大镜的顯示位置, left 、 right 、 top 、 bottom 'right'
adjustX 放大鏡與圖片顯示的水平距離 0
adjustY 放大鏡與圖片顯示的垂直距離 0
tint 非放大區域的颜色,须用是十六進位的色彩編碼,如 '#00ffff',不能與 softFocus 一起使用 false
tintOpacity 不透明度,0 透明,1 不透明 0.5
lensOpacity 镜头鼠标指针不透明度,0 是完全透明,1 是完全不透明,在 tint 和 softFocus 模式下始终透明 0.5
softFocus 模糊效果 false
smoothMove 放大鏡圖片移動的順暢度,數字越高越順暢 3
showTitle 顯示圖片標题 true
titleOpacity 標題透明度,0 是透明,1 是不透明 0.5

  哈~夠簡單吧!只要直接增加html碼,再把三種尺寸的影像指定好,就大功告成啦!而各位可以直接下載梅干的整合包,在整合包中已將ThickBox的關閉鈕,移到右上角這樣更符合平常的使用習慣,同時梅干也將影像的層級調整好了,所以各位只要專心把照片弄好,立即就可套用囉!
[範例預覽] [範例下載]