Home » jQuery 外掛

[jQ]iviewer 0.1

[ 日期： | 瀏覽：8,004 | 迴響：8 ]
範例 1
請協助我把這個效果加到我的網站 (只要 900 元)
沒錯!只要 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 沒問題..
      這樣我就覺得值得了

發表迴響