[jQ]iviewer 0.1

作者：男丁格爾 | 日期：2009-10-12 | 分類：jQuery 外掛 | 瀏覽：1,607 | 留言：8

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 效果
$(...).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>

範例瀏覽：
http://demonstration.abgne.tw/jquery/plugins/0072/0072.html

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

相關連結
推薦內容
標籤：, , ,
發表留言

如果有任何 jQuery 問題也可以直接到 討論區 中發文討論。
  1. chihuei
    2009-10-21 22:03:08 回覆

    哇！從來沒有搶過第一個！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會到第二頁，請問要如何做呢？謝謝！


    • 男丁格爾
      男丁格爾
      2009-10-22 11:35:55 回覆

      在你設定完 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. chihuei
    2009-10-22 21:48:21 回覆

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


  3. chihuei
    2009-10-22 21:49:40 回覆

    打錯了！我將您的語法加入之中。 sorry!


  4. chihuei
    2009-10-22 21:52:58 回覆

    script and /script, 應該可以顯示了吧！


    • 男丁格爾
      男丁格爾
      2009-10-22 22:38:53 回覆

      依你的網頁原始碼來看..請加在第14行後面..


  5. chihuei
    2009-10-23 02:19:25 回覆

    我感激的痛哭流涕！搞定了！我把這個特效放在Moodle裡，IT IS WORK!如果您有興趣可看這裡：（use guest access)
    http://crk.iri.columbia.edu/health/course/view.php?id=32
    磕頭了！謝謝您！


    • 男丁格爾
      男丁格爾
      2009-10-23 09:00:24 回覆

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