Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – N 宮格的相本畫廊展示

[ 日期： | 瀏覽：20,755 | 迴響：17 ]
範例 1
範例 2
範例 3
請協助我把這個效果加到我的網站 (只要 2,000 元)
沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

筆者今天要跟各位分享的範例是常在網路相簿 Widget 中看到的效果，大概動作是移到小相片後會放大顯示

唔~也許這樣很難了解，那就直接先做了再說：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<body>
	<div class="abgne-block-20111014">
		<ul>
			<li><a href="#"><img src="images/P1020976.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030001.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030034.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030141.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030165.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1020997.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030013.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030039.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030062.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030074.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030104.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030127.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030132.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030155.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030144.jpg" width="50" height="60" /></a></li>
			<li><a href="#"><img src="images/P1030140.jpg" width="50" height="60" /></a></li>
		</ul>
	</div>
</body>

既然是系列的內容，當然就是用 ul li 來呈現囉。接著就換 CSS 登場來排版一下：

檢視原始碼 CSS
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
30
31
32
33

.abgne-block-20111014 {
	width: 200px;
	border: 1px solid #666;
	position: relative;
}
.abgne-block-20111014 ul, .abgne-block-20111014 li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.abgne-block-20111014 ul {
	width: 200px;
	height: 240px;
	position: relative;
}
.abgne-block-20111014 li {
	float: left;
	position: relative;
}
.abgne-block-20111014 li a img {
	width: 50px;
	height: 60px;
	vertical-align: middle;
	border: none;
}
.abgne-block-20111014 a.control {
	position: absolute;
	display: block;
	width: 50px;
	height: 60px;
	background: #000;
	z-index: 100;
}

暫先別管 a.control 是用來做什麼的，當各位完成基本的 HTML 及 CSS 後就能看到基本的雛型了：

接下來的動作是要當我們把滑鼠移到某小圖時能放大並"蓋"在它旁邊幾張小圖上面。但麻煩的是在當它蓋在其它小圖上時，當滑鼠想移到原本在它旁邊的圖片時，就得等放大後的圖片還原後才有辦法移入。所以呢...筆者會利用一層隱形的機關 a.control 來擔任這重要的角色：

隱形的機關會蓋在 ul li 上面，所以當移到第 N 格機關上時，我們就能當它也是移到相對應的第 N 個小圖。因為這隱形的機關 z-index 較高，所以也不會被小圖所蓋住。這樣一來整個場面我們就能 hold 住囉：

檢視原始碼 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

$(function(){
	// 先取得相關元素、區塊的寬及單一圖片的寬
	// 並算出一行能放置幾個元素
	var $block = $('.abgne-block-20111014'), 
		$ul = $block.find('ul'), 
		$li = $ul.find('li'), 
		$img = $li.find('img'), 
		_width = $block.width(), 
		_imgWidth = $img.width(), 
		_imgHeight = $img.height(), 
		_rows = _width / _imgWidth;
 
	// 有幾個 li 就產生幾個新的 a.control 元素加到 $block 中
	$li.each(function(i){
		var $this = $(this)
		$this.css({
			position: 'absolute',
			top: Math.floor(i / _rows) % _rows * _imgHeight, 
			left: i % _rows * _imgWidth
		});
 
		var _control = $('<a href="' + $this.find('a').attr('href') + '" class="control" target="_blank"></a>').css({
			top: Math.floor(i / _rows) % _rows * _imgHeight, 
			left: i % _rows * _imgWidth, 
			opacity: 0
		});
 
		$block.append(_control);
	});
 
	// 當滑鼠移入及移出 a.control 時
	var $control =  $block.find('.control').hover(function(){
		// 找到目前在 a.control 中排行
		var _index = $control.index($(this));
 
		// 取得相對排行的 li
		// 接著控制其座標移動及子元素 img 的寬高
		$li.eq(_index).css({
			zIndex: 99, 
			top: Math.floor((Math.floor(_index / _rows)== _rows - 1 ? _index - _rows : _index) / _rows) % _rows * _imgHeight, 
			left: (_index % _rows == _rows - 1 ? _index - 1 : _index) % _rows * _imgWidth
		}).find('img').css({
			width: _imgWidth * 2, 
			height: _imgHeight * 2
		});
	}, function(){
		// 找到目前在 a.control 中排行
		var _index = $control.index($(this));
 
		// 取得相對排行的 li
		// 接著控制其座標移動及子元素 img 的寬高
		$li.eq(_index).css({
			zIndex: 9, 
			top: Math.floor(_index / _rows) % _rows * _imgHeight, 
			left: _index % _rows * _imgWidth
		}).find('img').css({
			width: _imgWidth, 
			height: _imgHeight
		});
	});
});

有了這層隱形的機關，我們就能很順利的完成整個移入移出的動作了：

當然若是要讓它自動輪播時，不可少的就是 setTimeout() 計時器囉：

檢視原始碼 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

$(function(){
	// 先取得相關元素、區塊的寬及單一圖片的寬
	// 並算出一行能放置幾個元素
	var $block = $('.abgne-block-20111014'), 
		$ul = $block.find('ul'), 
		$li = $ul.find('li'), 
		$img = $li.find('img'), 
		_width = $block.width(), 
		_imgWidth = $img.width(), 
		_imgHeight = $img.height(), 
		_rows = _width / _imgWidth;
	// 計時器,  輪播速度及目前顯示第幾張
	var timer, _speed = 3000, _index = -1;
 
	// 有幾個 li 就產生幾個新的 a.control 元素加到 $block 中
	$li.each(function(i){
		var $this = $(this)
		$this.css({
			position: 'absolute',
			top: Math.floor(i / _rows) % _rows * _imgHeight, 
			left: i % _rows * _imgWidth
		});
 
		var _control = $('<a href="' + $this.find('a').attr('href') + '" class="control" target="_blank"></a>').css({
			top: Math.floor(i / _rows) % _rows * _imgHeight, 
			left: i % _rows * _imgWidth, 
			opacity: 0
		});
 
		$block.append(_control);
	});
 
	// 當滑鼠移入及移出 a.control 時
	var $control =  $block.find('.control').hover(function(){
		clearTimeout(timer);
		if($control.index($(this)) == _index) _index = (_index - 1 + $li.length) % $li.length;
		$control.eq(_index).mouseout();
 
		// 找到目前在 a.control 中排行
		_index = $control.index($(this));
 
		// 取得相對排行的 li
		// 接著控制其座標移動及子元素 img 的寬高
		$li.eq(_index).css({
			zIndex: 99, 
			top: Math.floor((Math.floor(_index / _rows)== _rows - 1 ? _index - _rows : _index) / _rows) % _rows * _imgHeight, 
			left: (_index % _rows == _rows - 1 ? _index - 1 : _index) % _rows * _imgWidth
		}).find('img').css({
			width: _imgWidth * 2, 
			height: _imgHeight * 2
		});
	}, function(event){
		if(!!event.clientX){
			timer = setTimeout(show, _speed);
			return false;
		}
 
		// 找到目前在 a.control 中排行
		_index = $control.index($(this));
 
		// 取得相對排行的 li
		// 接著控制其座標移動及子元素 img 的寬高
		$li.eq(_index).css({
			zIndex: 9, 
			top: Math.floor(_index / _rows) % _rows * _imgHeight, 
			left: _index % _rows * _imgWidth
		}).find('img').css({
			width: _imgWidth, 
			height: _imgHeight
		});
 
	});
 
	// 控制輪播用
	function show() {
		_index = (_index + 1) % $li.length;
		$control.eq(_index).mouseover();
 
		timer = setTimeout(function(){
			$control.eq(_index).mouseout();
			show();
		}, _speed);
	}
 
	show();
});

其它更進階的變化效果就由各位去設計囉！

範例 1 範例 2 範例 3

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

17 筆針對 [jQ]用 jQuery 做畫廊 – N 宮格的相本畫廊展示 的迴響

  2. 男丁格爾大大

    不知道這問題留這邊是否恰當

    我想請問有關於http://www.minwt.com/?p=2614

    這個外掛使用白色背景之後

    chrome和firefox看都是正常的白色倒影

    但使用ie時卻是黑色

    請問這要如何解決?

    先謝謝大大,麻煩你了

    • 我在刪除原本留言前就有先回你信了。
      不知道你用的瀏覽器版本是什麼？我用 IE8,9 看起來應該都沒問題的。

  4. 男丁大人:我用IE9會出現位置跑掉,原本該是圖片的地方卻變空白,原本4列4欄卻變成5列4欄,第一列只有最上方一張圖, 第五列最下方掉了一張圖,用firefox是正常低,有方法解決嗎??

  5. 通告： [jQ]用 jQuery 做互動式放大縮小圖片功能 | Digi Talker

  7. 大大我想請問一下 我總共做了24張圖
    但是最下面一排會往下覆蓋而不是像附件一樣
    會自動往上覆蓋 不知道要改哪些程式碼呢 ><

發表迴響