Fancybox 是什麼？

我們先看看官方說明

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

重點就是達到 zooming 的感覺。

Demo 看看效果

{.fancybox}

Usage

一開始當然要把 css和 javascript 配置好，這部分就省略，直接到他們官網參考。

重點是要如何使用這個 fancybox ，以下是 markdown 中的表示方法：

[![](http://i.imgur.com/Emnd7eRm.jpg)](http://i.imgur.com/Emnd7eRl.jpg){.fancybox}

會這樣寫是因為 fancybox 需要的格式必須把 <img> 包在 <a> 裡面，並且 <a> 要有 fancybox 這個 class 。

<a class="fancybox" href="link_of_image"><img src="link_of_image"/></a>

Optional Configuration

上面那樣其實就可以運作了，不過基於美觀還可以再做更多的調整。在 css 中加入

.fancybox img {
    max-width: 80%;
    display: block;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 4px #bbb;
    -webkit-box-shadow: 2px 2px 4px #bbb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: auto;
}

將 width 縮小至 80%，在縮圖的部分會比較好看，但如果你有用 thumbnail 的話就可以省略。另外加上 border 和 shadow ，以及將圖片置中。