###### tags: `套件` `video`
# FancyBox V3版本
## FancyBox images 加入文字
### 方法一
HTML：

    <a id="various1" href="#inline1" title="Sample" name="various1">Preview</a>
    <div id="inline1" style="width:500px;height:500px;overflow:auto;">
        <font>Enter text here</font>
        <img src="http://www.google.co.in/images/logos/ps_logo2.png">
    </div>

JS：

 $(document).ready(function() {
            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });


        });

參考：[fancybox: images+text](https://stackoverflow.com/questions/4345010/fancybox-imagestext)

### 方法二
- 參考：[example](http://jsfiddle.net/JYzqR/5/)
- 參考：[example](https://www.sitepoint.com/community/t/fancybox-text-inside-gallery-image/235931)

## FancyBox images
- 單張圖片 Single image
1. 需要在 `<a>` 連結加上 `data-fancybox` 屬性
2. 並指定 `<a>` 連結的 `href="幻燈片顯示的圖片路徑"`，就是點擊後Popup出現的大圖路徑。

<a href="https://farm4.staticflickr.com/3953/15594397982_477385f90d_b_d.jpg" data-fancybox>
    <img src="https://farm4.staticflickr.com/3953/15594397982_477385f90d_m_d.jpg" />
  </a>

- 相簿 Image gallery
1. 需要在多個 `<a>` 連結加上 `data-fancybox="images"` 屬性，代表多張照片都是吃同一個屬性，這樣就會變成相簿。

<p>
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
      <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
  </a>

  <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images">
      <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
  </a>

  <a href="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_b_d.jpg" data-fancybox="images">
      <img src="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_m_d.jpg" />
  </a>
  
</p>

- 用一張照片當成一個相簿 Gallery with one preview image
1. 在單張照片`<a>` 連結加上`data-fancybox="images-single"`
2. 在相簿裡的照片 `<a>` 連結也加上`data-fancybox="images-single"`，`data-thumb=`這個屬性是用來可以指定小圖瀏覽時的照片路徑，可設可不設。

<p>
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
    </a>
</p>

<div style="display: none;">
  <a href="https://farm3.staticflickr.com/2947/33594572585_b48eba935b_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2947/33594572585_46ca00f3a5_m_d.jpg"></a>
  
  <a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
  
</div>

參考：https://codepen.io/fancyapps/pen/jyEGGG

## FancyBox iframe
1. 在要加上iframe的連結上，加入`data-fancybox="dollPart"`，dollPart 這是class名稱，可以自己命名。
2. `data-type="iframe"` 加上iframe屬性
3. ` href="dollPart.html"`，dollPart.html 是指要嵌入的iframe的檔名，可自己命名。

<div class="btnBlock">
        <div class="moreBtn yellow" data-fancybox="dollPart" data-type="iframe" href="dollPart.html"><span>立即購買</span></div>
    </div>

4. 在`<script></script>`裡放入以下程式，dollPart為我們命名的class名稱

   $('.dollPart').fancybox({
            toolbar: false,
            smallBtn: true,
            iframe: {
                preload: false //載入的畫面
            }
    });

5. 建立一個 html檔案，並命名 dollPart.html，在 dollPart.html 放入要嵌入的內容,如圖：這裡放入youtube影音和一些文字，就完成了。

參考：
https://codepen.io/fancyapps/pen/qoKGRW
https://codepen.io/fancyapps/pen/rdKgmP