Home » jQuery 應用

[jQ]用 jQuery 做畫廊 – 中間突顯位移式的商品展示

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

現在 Adobe 已經不繼續支援開發行動裝置版的 Flash Player 了,所以就算用 Flash 做出了個很酷炫的商品展示效果,也許過不久就通通無法在行動裝置上正常瀏覽了。因此就有些主管開始把腦筋動到 JavaScript 上面,像今天要分享的效果也是某位同學問的(因為老闆指定...)。

HTML 一樣是使用 ul li 清單來列出資料:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
	<div id="abgne-gallery-20111224">
		<a href="#previous" class="controls previous" rel="previous"></a>
		<a href="#next" class="controls next" rel="next"></a>
		<ul>
			<li><a href="#" title="Slide 1"><img src="images/a.jpg" /></a></li>
			<li><a href="#" title="Slide 2"><img src="images/b.jpg" /></a></li>
			<li><a href="#" title="Slide 3"><img src="images/c.jpg" /></a></li>
			<li><a href="#" title="Slide 4"><img src="images/d.jpg" /></a></li>
			<li><a href="#" title="Slide 5"><img src="images/e.jpg" /></a></li>
			<li><a href="#" title="Slide 6"><img src="images/f.jpg" /></a></li>
			<li><a href="#" title="Slide 7"><img src="images/g.jpg" /></a></li>
		</ul>
	</div>
</body>

接著再加上 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
34
35
36
37
38
39
40
41
#abgne-gallery-20111224 {
	position: relative;
	border: 1px solid #0cf;
	background: #0cf;
	width: 960px;	/* 整個區塊的寬 */
	height: 400px;	/* 整個區塊的高 */
}
#abgne-gallery-20111224 ul {
	width: 880px;	/* 整個區塊的寬 - 兩個左右鈕的寬 */
	height: 400px;
	position: absolute;
	left: 40px;		/* 一個左鈕的寬 */
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-gallery-20111224 li a {
	outline: none;
}
#abgne-gallery-20111224 li a img {
	vertical-align: middle;
	border: none;
}
#abgne-gallery-20111224 .controls {
	position: absolute;
	top: 180px;		/* (整個區塊的高 - 自己的高) / 2 */
	display: block;
	width: 40px;
	height: 40px;
	outline: none;
	background: url(images/arrow.png) no-repeat;
}
#abgne-gallery-20111224 .previous {
	left: 0;
	background-position: -4px 0;
}
#abgne-gallery-20111224 .next {
	right: 0;
	background-position: -49px 0;
}

之前的一些範例基本上當 CSS 設定好後就能看出大概的輪廓了,但此次的範例得等到全部的程式都完成才有辦法看到最後的樣貌。所以廢話就不多說了,直接上 jQuery 囉:

檢視原始碼 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
// 當網頁載完後執行(因為要抓圖片的寬高)
$(window).load(function(){
	// 先取得相關區塊及圖片的寬高
	// 並先計算出大圖片要垂直置中所需要的 top 值
	var $gallery = $('#abgne-gallery-20111224'), 
		$frame = $gallery.find('ul'), 
		_frameHeight = $frame.height(), 
		_frameWidth = $frame.width(), 
		$li = $frame.find('li'), 
		$img = $li.find('img'), 
		_imgLength = $img.length, 
		_imgWidth = $img.width(),
		_imgHeight = $img.height(),
		_topDiff = (_frameHeight - _imgHeight) / 2, 
		_animateSpeed = 200;
 
	// 設定每張圖片縮放比例
	// _totalWidth 用來記錄寬度累加
	var resizeRatio = [ 0.6, 0.7, 0.8, 1, 0.8, 0.7, 0.6], 
		liCss = [], 
		_totalWidth = 0;
 
	// 預先算出每張圖片縮放後的總寬度
	var _m = 0;
	$img.each(function(i){ 
		_m += $(this).width() * resizeRatio[i];
	});
	// 平均分配要重疊的寬度
	var _leftDiff = Math.ceil((_m - _frameWidth) / (_imgLength - 1));
 
	// 設定每一個 li 的位置及圖片寬高
	$li.each(function(i){
		var $this = $(this), 
			_width = _imgWidth * resizeRatio[i],
			_height = _imgHeight * resizeRatio[i];
 
		liCss.push({
			height: _height, 
			width: _width, 
			left: _totalWidth  + (i == _imgLength - 1 ? 1 : 0), 
			top: _topDiff + (_imgHeight - _height) / 2, 
			zIndex: resizeRatio[i] * 10
		});
 
		$this.css(liCss[liCss.length-1]).css({
			position: 'absolute',
			border: '1px solid white'
		}).data('_index', i).find('img').css({
			width: '100%', 
			height: '100%'
		});
 
		_totalWidth += _width - _leftDiff;
	});
 
	// 當滑鼠點擊在 $gallery 中的 .controls 時
	$gallery.on('click', '.controls', function(){
		var $button = $(this);
 
		// 重新計算每一個 li 的位置及圖片寬高
		$li.each(function(){
			var $this = $(this), 
				_index = $this.data('_index');
 
			_index = ($button.hasClass('next') ? (_index - 1 + _imgLength) : (_index + 1)) % _imgLength;
			$this.data('_index', _index);
 
			$this.stop(false, true).animate(liCss[_index], _animateSpeed);
		});
 
		return false;
	});
});

要注意的是,範例中會需要抓取圖片的真實寬高,所以一定得等到圖片都載完才有辦法取得。因此程式特別寫在

檢視原始碼 JavaScript
1
2
3
$(window).load(function()){
	//code...
});

但這樣會執行時機會比較慢一點。如果不想等圖片載完的話,那麼在上面程式第 11, _imgWidth_imgHeight 的部份可以手動指定,看你圖片的寬高是多少就寫死吧!

另一個要注意的是第 57 行的那個 .on() 的用法,這是 jQuery 1.7 才新增的,所以若您的專案中的 jQuery 版本若是低於 1.7 的話,得要改成

檢視原始碼 JavaScript
1
2
//$gallery.on('click', '.controls', function(){
$gallery.delegate('.controls', 'click', function(){

好啦!若沒問題的話,我們就能看到最後完成的畫面了。

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
加上自動輪播功能 會員限定
另一種移動效果及加上自動輪播功能 會員限定

35 筆針對 [jQ]用 jQuery 做畫廊 – 中間突顯位移式的商品展示 的迴響

  1. 男丁老師,請教您一下,我把Jquery運用在WIN2000 SERVER的IIS上RUN,程式會無法動作,而把網頁放在XP上的IIS即正常,想請教您是否有方法解決我的問題呢?麻煩您指導了。

  2. 男丁老師好,
    請問:我的網頁想要按下選單中 其中一個選項後, 才顯現出這一個畫廊的div, 請問要怎麼更改程式碼?

    • 那應該可以當網頁載入後把 div 隱藏起來, 然後按下時, 再顯示整個 div 區塊。
      可以參考 jQuery 的 .show() 及 .hide()

      • 請問男丁老師
        $(window).load(function(){ 下方要怎麼寫比較好?
        ———————-
        我想要
        $(document).ready(function(){
        $("dt.art").click(function(){
        $("#abgne-gallery").fadeIn("slow");
        });
        });
        在按下dt.art的時候, 可以顯現出我的div畫廊,
        但是我這樣寫, 當按下dt.art的時候, 跑出div,
        但是圖片卻全都不見了(變成一點一點)
        ——-
        請問老師該怎麼寫才行的通呢?

          • 有, 效果正常顯示, 但是隱藏後要用js 的fadeIn顯示出來卻沒辦法正常顯示。
            我用ccs {display:none}隱藏它, 然後但是每次只要隱藏再點我設定的選項dt.art
            $(document).ready(function(){
            $("dt.art").click(function(){
            $("#abgne-gallery").fadeIn("slow");
            });
            });
            卻沒辦法正常顯示, 圖片皆變為一點,
            ———-

            男丁老師, 我剛剛爬文了一下,
            http://blog.miniasp.com/post/2010/07/24/jQuery-ready-vs-load-vs-window-onload-event.aspx
            (關於這篇)

            是不是我的程式碼有衝突?
            而且我的網頁需要好幾個男丁老師設計的這個div效果, 作為作品的展示模式(需要設計好幾個同樣的div)
            不知道該怎麼做比較好
            煩請男丁老師幫忙~

          • 你把程式的順序稍微改一下, 先套用 gallery 後, 再用程式去隱藏 gallery
            若要用到多次的話, 那麼把 gallery 的效果寫成外掛方式會比較方便。或者直接自己用 .each() 的方式來處理~

          • 男丁老師,
            我後來將$(window).load(function(){
            改成先用這樣把它隱藏起來↓
            $(document).ready(function(){
            $("#abgne-gallery").css('display','none');

            然後再用這樣把它叫出來↓
            $("dt.art").click(function(){
            $("#abgne-gallery").css('display','block');
            ————-結果就成功了————-

            可是我現在 在這個div畫廊上加了一個back的連結,想要回去選單的部分, 我用一個back讓div畫廊再消失, "再點一次div之後圖片卻全都變小了"

            我再back一次, 再點選單顯示div畫廊, 圖片變得更小了!
            重複步驟, 後來卻變成一點...

            我不懂問題在哪裡
            第一次顯示都沒問題, back之後再點一次, 卻開始出現問題了。(重新整理後的第一次顯示都是正常的)

            謝謝男丁老師的耐心解答

          • 如果可以的話, 把你組合在一起的範例寄給我測試看看(要含html, css, js 及圖片)

  3. 老師好:
    我圖片超過7張(用php產生...),但畫面只要顯示7張,其他的隱藏起來
    程式碼這部分要如何改?

  4. 不好意思想請問一下如果想再同一個頁面上同時使用作兩個這樣的效果但內容完全不同,要如何修改。
    我把原本, 並且也變更id的值,同時也在對應的js 和 css 的code作修改,只是好像還是會產生錯誤情形,一開始建立的效果會在下面後建立的 出現,不好意思想請問一下這樣情況是哪裡沒有修改到嗎

    • $(window).load(fn)這一段有分別寫兩次嗎? 如果你有兩個的話, 最簡單就是 copy 兩段, 抓取不同的 id

  5. 男丁老師 您好
    請教您在這個範例中
    如果要讓圖片間沒有白色框線需要修改哪邊?

    練習時套用的圖片為去背後的png圖
    所以可以看到左右的圖
    但是會出現框線覆蓋在上面
    現況:http://www.majhost.com/gallery/maxgod911/OTHER/web.png
    如圖紅色圈選處

    目前改了CSS中的li a img 部分
    以及網頁原碼改為
    都無效
    因此要請男丁老師指點一下
    謝謝!

  6. 剛好最近也需要用到類似功能,Google一下又果然又查到老師這邊來了XD。老師給的範例是最核心的部分了,小弟不才照老師之前上課所教的加以包裝了一下,多了一些簡單功能,包括根據圖片數量產生縮放陣列,可自定縮放大小參數,動畫速度,自動播放,透明度控制,顯示的圖片數量( 原本的是全部顯示 ) 等,大家若有需要且不嫌棄的話可以參考看看,若使用過程有發現任何bug問題也煩請不吝告知,感謝。 連結:https://github.com/jocoonopa/SlideSize

發表迴響