Home » jQuery 外掛

[jQ]iviewer 0.1

範例 1
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

iviewer_0_1

iviewer 是一個蠻實用的圖片瀏覽效果,除了可讓瀏覽者自行切換圖片的顯示比例,且也支援滑鼠滾輪(Mouse Wheel)的縮放。不過還有一點點 Bug

套件名稱:iviewer
套件版本:0.1
作者網站:http://wiki.github.com/can3p/iviewer
套件網址:http://plugins.jquery.com/project/iviewer
發佈日期:2009-09-13
檔案大小:9.76 KB
檔案下載:jquery.iviewer.js jquery.iviewer.css
引用檔案:jquery.mousewheel.js

參數說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
src(必填)
描述: 要顯示的圖片路徑
預設值: 無
 
ui_disabled(選填)
描述: 是否隱藏工具列;如果設為 true 則不會顯示下方的工具鈕及其按鈕
預設值: false
 
zoom(選填)
描述: 當 iviewer 執行時的縮放大小; 0 表示 100%
預設值: 0
 
zoom_max(選填)
描述: iviewer 縮放時的最大比例; 5 表示 100% * 5
預設值: 5
 
zoom_min(選填)
描述: iviewer 縮放時的最小比例; -5 表示 100% / 5
預設值: -5
 
zoom_delta(選填)
描述: iviewer 縮放時所參考的滾輪值;不過作者好像沒用到它..
預設值: 1

方法說明:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
// 指定元素加上 iviewer 效果
$(selector).iviewer(options);
 
// 讓 iviewer 中的圖片配合寬高縮放
$.iviewer.fit(delta);
 
// 讓 iviewer 中的圖片顯示原尺寸
$.fn.iviewer.toOrig(delta);
 
// 讓 iviewer 中的圖片依 delta 值來縮放
$.fn.iviewer.zoom(delta);

使用範例:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.iviewer.css" />
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.iviewer.js"></script>
<style type="text/css">
	#viewer {
		width: 500px;
		height: 500px;
		border: 1px solid black;
		position: relative;
	}
	.wrapper {
		overflow: hidden;
	}
</style>
<script type="text/javascript">
	$(function(){
		$("#viewer").iviewer({
			src: "3931994702_2d8071b0df_o.jpg"
		});
	});
</script>
 
<body>
	<div class="wrapper">
		<div id="viewer"></div>
	</div>
	<span>感謝梅干桑熱情贊助圖片</span>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

工具列按鈕圖片:
iviewer.zoom_fit.gif iviewer.zoom_in.gif iviewer.zoom_out.gif iviewer.zoom_zero.gif

8 筆針對 [jQ]iviewer 0.1 的迴響

  1. 哇!從來沒有搶過第一個!Lucky!

    您好,我從梅老師那連來這,可否請教一個有關相本特效的問題。我參考這裡 http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 做了這頁 http://crk.iri.columbia.edu/health/test/courseindex2.html 但我不會JAVA 我不知如何將文字直接連結到其他的頁面而不用點數字1.2.3. 例如點Influenza and Climate會到第二頁,請問要如何做呢?謝謝!

    • 在你設定完 easySlider 後加入下面的語法試看看

      檢視原始碼 JavaScript
      1
      2
      3
      4
      5
      6
      
      var _p = $('#slider ul li:first h2').siblings('p:has(a)');
      $('#slider ul li:first h2').siblings('p').find('a').click(function(){
      	var _i = _p.index($(this).parent('p'));
      	$('#controls li').eq(_i+1).click();
      	return false;
      });

      另外,JavaScript 跟 Java 是不一樣的,網頁上用到的基本上是 JavaScript。

  2. 男丁大大,謝謝您這麼快回答我的問題,大感激!我將您的語法加入 之中, 這樣對嗎?如果對的話, 還是沒有作用欸。http://crk.iri.columbia.edu/health/test/courseindex2.html,不好意思, 可以再幫忙一下嗎?謝謝您!

    • 磕頭就太誇張了...
      至少你成完成想要的效果..及還能來回覆說我給的 Code 沒問題..
      這樣我就覺得值得了

發表迴響