[WebTech #72] CSS > 4. CSS 範例 > 4-5 圖形處理 > 4-5-1 縮圖（Thumbnails）
喜歡拍照的朋友，一定會想要在一個網頁內，顯示越多圖片越好。那麼，您就不能錯過現在正要介紹的功能：縮圖（Thumbnails）。
用 CSS 呈現縮圖是相當方便、且效果多元的。本篇分享的縮圖效果有：一般、動畫（含：縮放、糊化、加註...）等效果。讓我們現在馬上就來看看吧！
一般縮圖：
(1) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/perfectly-rotate-and-mask-thumbnails-with-css3/
(2) http://webdesignerwall.com/tutorials/creating-a-modern-lightbox-with-css3-and-javascript
(3) http://webdesignerwall.com/tutorials/css3-image-styles
動畫縮圖（縮放）：
(1) http://tutorialzine.com/2012/05/growing-thumbnails-portfolio-jquery-css3/
(2) http://www.tangledindesign.com/blog/enhancing-thumb-galleries-css3-transitions-transforms/
(3) http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/
(4) http://inspectelement.com/tutorials/create-a-css3-image-gallery-with-a-3d-lightbox-animation/
動畫縮圖（糊化，Blur）：
(1) http://www.red-team-design.com/css-filter-effects-in-action
動畫縮圖（加註，Annotation）：
(1) http://pehaa.com/2012/02/create-your-portfolio-gallery-using-html5-canvas-tutorial/
(2) http://tympanus.net/codrops/2011/12/26/css3-lightbox/
(3) http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
其它縮圖效果：
(1) http://tympanus.net/codrops/2012/07/20/3d-flipping-circle-with-css3-and-jquery/
底下這個雖然不算縮圖，不過它與製作縮圖所用的技巧差不多，因此我就把它放在這裡了：
* 使用 CSS 製作「便利貼」： http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/
---
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp
jquery lightbox範例 在 Re: [問題] jquery切換圖片+lightbox - 看板Web_Design 的推薦與評價
回文比較好解釋（推文好難斷句啊～～～）
妳做的檔案主要有兩個效果
1. 切換圖片
2. lightbox
首先 1.的切換圖片，程式在 42～55 行
點了 .abgne-block-20120106 a 後，把 #show-image 的 src 換掉
（其中還有檢查圖片不同張時才執行、<a> 預設超連結要取消）
再來 2.lightbox 妳有使用套件 jquery.colorbox
偷看一下，套件範例點選打開 lightbox 的開關都是 <a>
說明文件也有寫 set a href to assignment to an element
因此可以知道，只要把 href 寫好，套件會自動幫我們把圖片 show 出來
所以把剛剛的程式加一段，讓 href 值為目前顯示的圖片
var $showImage = $('#show-image');
// 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時
$('.abgne-block-20120106 a').click(function(){
// 把 #show-image 的 src 改成被移到的超連結的位置
//$showImage.attr('src', $(this).attr('href'));
var $this = $(this),
_src = $this.attr('href');
if($showImage.attr('src') != _src){
$showImage.stop(false, true).fadeTo(0, 0).attr('src', _src).stop(false, true).fadeTo(400, 1);
加上這一行
$showImage.parents('.group1').attr('href', _src);
}
}).click(function(){
// 如果超連結被點擊時, 取消連結動作
return false;
});
※ 引述《revo3512 (brands)》之銘言：
: 版上大家午安~~
: 小妹最近剛開始接觸Jquery，目前僅在會套用套件，微調數據的新手程度><
: 想請教版上大家...我想要做一個可以切換圖片，然後點選大圖會出現lightbox的效果。
: 但現在卡在，我不管切換哪張圖片，點選大圖後的lightbox永遠都是第一張圖的大圖...
: 沒辦法點選第二張後，lightbox的圖片自動跑第二張...
: 請問有前輩可以幫忙修正或指導嘛？
: 謝謝><
: 檔案如連結：https://goo.gl/XqVEAg
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.137.189.95
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1483522381.A.063.html
※ 編輯: frostyjoan (223.137.189.95), 01/04/2017 17:37:43
... <看更多>